Footer - Web Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
Parameters
The Web component uses the <z-footer>
tag:
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|---|---|
columns | object[] | Columns to display in the footer |
social (optional) | object | Social media links |
footer (optional) | object[] | Links in the footer |
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 cataloghref
string: The URL to navigate to when the icon is clicked.
footer
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.
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.0/@zurich/web-components/footer.js"></script>
Code
html
<z-footer
columns='[{"header":"Useful links","items":[{"to":"#","text":"Contact us"},{"to":"#","text":"Jobs"},{"to":"#","text":"Search"}]},{"header":"Navigation","items":[{"to":"#","text":"News and Media"},{"to":"#","text":"About us"},{"to":"#","text":"Product and services"},{"to":"#","text":"Industry knowledge"}]}, {"header":" - ","items":[{"to":"#","text":"Investor relations"},{"to":"#","text":"Economics & Markets"},{"to":"#","text":"Sustainability"},{"to":"#","text":"Careers"}]}]'
social='{"facebook":"#","linkedin":"#","twitter":"#","instagram":"#","youtube":"#"}'
footer='[{"to":"#","text":"Privacy"},{"to":"#","text":"Terms of use"},{"to":"#","text":"Cookies"},{"to":"#","text":"@2024 Zurich"}]' />
</z-footer>