The footer is used at the bottom of an application. It provides Link to company information and other important links to secondary pages that may not be part of the header navigation structure.
Footer being applied in Carl's Shop+
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Footer |
In websites and apps that require Copyright information and external links |
At the bottom of the website/app with a fixed position and filling the width of the container |
Allows users to access external links related to the brand/company. E.g. Social Media links, articles, PRs, etc. |
Anatomy
Structure
|
|
1. brand (section) |
--- |
|
2.brand icon |
Icon of brand/ market |
|
3.brand info |
Info of brand/ market |
|
4.content (section) |
--- |
|
5.column title |
Name of that group of links, e.g. About us |
|
6.column links |
Some possible links under the About us title; People | Our mission | Drivers... |
|
7.social media (section) |
--- |
|
8.social media icon |
Social media icon. They can vary |
|
9.copyright (section) |
Copyright text |
Sizes and Spaces
|
|
|
Properties
|
Property |
Value |
Description |
|---|---|---|
|
Device |
desktop mobile |
The volume of content and elements positions change accordingly with the device |
|
Links |
true false |
--- |
|
Social media |
true false |
--- |
|
Footnote |
input |
Input field to add copyright text |
Behaviour
Responsiveness
Footer adapting for reference breakpoints
Max-width on each breakpoint
|
Component |
Extra-large >1366px |
Large 1366px |
Medium 1024px |
Small 768px |
Extra-small 428px |
|---|---|---|---|---|---|
|
Footer |
100% |
100% |
100% |
100% |
100% |
|
Number of columns (links) |
Extra-large >1366px |
Large 1366px |
Medium 1024px |
Small 768px |
Extra-small 428px |
|---|---|---|---|---|---|
|
4 columns |
2col grid width |
2col grid width |
2col grid width |
2col grid width |
Not applicable |
|
3 columns |
3col grid width
|
3col grid width
|
2col grid width |
2col grid width |
Not applicable |
|
2 columns |
4col grid width
|
4col grid width
|
3col grid width
|
3col grid width
|
Not applicable |
|
1 column |
4col grid width
|
4col grid width
|
3col grid width
|
3col grid width
|
4col grid width
|