Navigation

LG and MD Breakpoints

SM and Default Breakpoints

1. Logo is a slot where the company logo will be displayed.
2. Spacer expands the space between the logo and the lists of items to aid navigation.
3. Category title represents a main section of first-level options.
4. Page link is a group of link options that belong to a section or main category.
5. Divider line separates options within a bar.
6. Accordion contains the items of a section in the compact size of the footer.
   

When to Use

Use at the bottom of the page as the last section.

There is only one type of footer, no variations.

Spacing

Ensure that proper space is given between each item in the container.

Hierarchy

A proper hierarchy must be ensured for the elements that compose the footer. The logo will have the highest level of importance, followed by the list of navigation items. Each column will have a title (secondary level of importance) and a list of link pages (tertiary level of importance). The labels need to give a clear and short idea of what they represent. The legal footer content will represent the lowest level of importance.

Alignment

Components within the container will be left-aligned.

Sizing

The footer will adjust to the viewport size.

LG and MD Breakpoints

At LG and MD viewports, each column is a text accordion that is always expanded. The line and down caret are hidden. Use a XS button variant.

Default and SM