Footer - CSS Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
Construction
The CSS component uses the footer
tag with a z-footer
HTML custom attribute.
z-footer
The z-footer
parameter is the main parameter used to render the footer component.
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Footer.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Link.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Icon.css" />
Code
html
<footer z-footer>
<section>
<div>
<h4>Useful Links</h4>
<ul>
<li>
<a z-link href="#">
Contact us
</a>
</li>
<li>
<a z-link href="#">
Jobs
</a>
</li>
<li>
<a z-link href="#">
Search
</a>
</li>
</ul>
</div>
<div>
<h4>Navigation</h4>
<ul>
<li>
<a z-link href="#">
News and Media
</a>
</li>
<li>
<a z-link href="#">
About us
</a>
</li>
<li>
<a z-link href="#">
Product and services
</a>
</li>
<li>
<a z-link href="#">
Industry knowledge
</a>
</li>
</ul>
</div>
<div>
<h4> - </h4>
<ul>
<li>
<a z-link href="#">
Investor relations
</a>
</li>
<li>
<a z-link href="#">
Economics & Markets
</a>
</li>
<li>
<a z-link href="#">
Sustainability
</a>
</li>
<li>
<a z-link href="#">
Careers
</a>
</li>
</ul>
</div>
<div class="social">
<h4>Follow us</h4>
<ul>
<li>
<a z-link href="#">
<i z-icon icon="facebook:line">
</i>
</a>
</li>
<li>
<a z-link href="#">
<i z-icon icon="linkedin:line">
</i>
</a>
</li>
<li>
<a z-link href="#">
<i z-icon icon="twitter:line">
</i>
</a>
</li>
<li>
<a z-link href="#">
<i z-icon icon="instagram:line">
</i>
</a>
</li>
<li>
<a z-link href="#">
<i z-icon icon="youtube:line">
</i>
</a>
</li>
</ul>
</div>
</section>
<nav>
<ul>
<li>
<a z-link href="#">
Privacy
</a>
</li>
<li>
<a z-link href="#">
Terms of use
</a>
</li>
<li>
<a z-link href="#">
Cookies
</a>
</li>
<li>
<a z-link href="#">@2024 Zurich</a>
</li>
</ul>
</nav>
</footer>