Footer - Web Component ​

The Footer component can be used imported from:

Playground ​

Parameters ​

...

Events ​

This component has events. Check the documentation about how to use the events.

NamePayloadDescription

Slots ​

This component has slots. Check the documentation about how to use the slots.

NameTagsDescription
defaultspanContent of the footer.
socialspanSocial media links
social-textspanSocial media header
footerspanFooter links

Parameters use ​

columns ​

The columns parameter is an array of objects that define the columns in the footer. Each object has the following properties:

  • header string: The header of the column.
  • items object[]: An array of objects that define the items in the column. Each object has the following properties:
    • text string: The text of the item.
    • href string: The URL to navigate to when the item is clicked.

Make sure to use a maximum of 4 columns, following the design guidelines.

social ​

The social parameter is an array of objects that define the social media links in the footer. Each object has the following properties:

  • icon string: The name of the icon to display. Make sure to use the correct icon name. Check the icon catalog
  • href string: The URL to navigate to when the icon is clicked.

The footer parameter is an array of objects that define the footer links. Each object has the following properties:

  • text string: The text of the link.
  • href string: The URL to navigate to when the link is clicked.

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​