The footer is the last element at the bottom of a scrollable page below the main content.

General guidelines

Often underestimated, the footer is an important element of a layout. With the header, it frames the content of the page. It is the end point of the user’s scroll.

The footer contains copyrights and general information. This is as well an additional navigation which often allows users to find or discover what they did not when they scrolled.


Best practices

  • Display the site map and the most useful links. (For corporate and large sites)
  • Use the container grid. (For corporate and large sites)
  • Don’t use a footer on a non-scrollable page like a dashboard.
  • Use a back to top on top of the footer
  • Add a prefooter to show some editorial content if needed.
  • Change the footer to a subfooter, with 3-4 links, for apps and smaller websites.
Visual guidelines

Blue variant

The blue variant is the default and classic variant that should be used for business to business applications. The footer is always the same colour as the header.


White variant

The white variant is more discreet than the blue and therefore should be used for business to employee applications, putting more emphasis on the brand is less required for employees needs. The footer is always the same colour as the header.

Responsive behaviours
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top