Footer - CSS Component ​

The Footer component can be used imported from:

Playground ​

Construction ​

The CSS component uses the footer tag with a z-footer HTML custom attribute.

The z-footer parameter is the main parameter used to render the footer component. The footer component is composed of columns, social and a nav element.

Columns ​

The columns of the footer can be displayed using a section. Each column is a div element containing the header of the column using a <h4> tag and a list of items using a <ul> tag.

Make sure you use the z-link component to create the links.

Social ​

The social section is used to display the social media icons. The social media icons are displayed using a div element with the class social and a list of social media icons using the z-social-media-icon tag.

Also the header of the social section is displayed using a <h4> tag.

The nav section is used to display the footer links. The footer links are displayed using a nav element with a list of links using the z-link tag.

Code

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​