Footer

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Usage
  2. Variants
  3. Layout
  4. Behavior
  5. Responsive design
  6. Best practices
  1. Usage
  2. Variants
  3. Layout
  4. Behavior
  5. Responsive design
  6. Best practices

Usage

Use a footer to provide users with additional supporting content and show them they are using an official Red Hat website. The footer is the last or lowest element in a layout or user interface and is persistently displayed across all screens of the user experience.

Variants

A footer is divided into two parts, the Website-specific footer and the Universal footer.

Most of the content in the website-specific footer can be customized.

Image of the website-specific footer showing regions that can and cannot be customized
Region Customizable Use case
Website logo Yes Custom logo of the website where the footer is used
Social media links Yes Links to specific social media pages
Navigation links Yes Navigation links based on specific information architecture
Custom message Yes Custom message to introduce or describe the website
Red Hat message No Message about Red Hat that is the same across all websites
Extra content Yes Extra content, top task, or call to action (optional)
Language switcher No Menu that allows users to switch the language

Content in the universal footer is always the same across all websites.

Image of the universal footer showing only one region that cannot be customized
Region Customizable Use case
Navigation links No Links for global pages, Summit, and legal information

Layout

Browser window

A footer spans the entire width of the browser window at all breakpoints.

Image of a footer in a layout spanning the width of the browser window

The universal footer can be used by itself on orphan pages or pages that do not fit a specific information architecture like landing pages, minisites, etc. The Red Hat fedora always links to redhat.com.

Warning

Using the universal footer by itself is acceptable, but never use the website-specific footer by itself.

 Image of the universal footer by itself

Other web properties

The footer was designed to be applied to all Red Hat web properties. The layout is flexible enough to accommodate grids, elements, text, and more.

Image of the footer on a Customer Portal website Image of a footer on a Customer Portal website Image of a footer on a Developer website Image of a footer on a Partner Connect website

Behavior

Columns

If the website-specific footer includes a lot of content, columns can be added below the first row of columns.

Image of a footer with four columns of links in one row and two columns in the second row

If the website-specific footer includes less content, columns will stretch to fill the empty space.

Image of a footer with only two columns of links in one row

If the number of columns changes, social media links will shift position to remain aligned to the left edge of the last column.

Image of a footer with three columns of links showing an example of social media icons shifting

Responsive design

Large breakpoints

Image of a large breakpoint footer

Small breakpoints

Columns will collapse to an accordion as breakpoints get smaller and other content will also get rearranged.

Helpful tip

At small breakpoints, the horizontal rule between the logo, icons, and columns is no longer visible.

 Image of a tablet breakpoint footer Image of a mobile breakpoint footer
Breakpoint Range Content layout
Desktop, large > 1680px Columns
Desktop, medium 1440px - 1679px Columns
Desktop, small 1200px - 1439px Columns
Tablet, large 992px - 1199px Columns
Tablet, small 768px - 991px Accordion
Mobile, large 576px - 767px Accordion
Mobile, small < 575px Accordion

Best practices

Reversing the order

Do not reverse the order of footers, the website-specific footer should always be on top.

Image of the global footer on top of the website-specific footer which is incorrect usage

Replacing columns

Do not replace columns with an accordion if there is still adequate space.

Image of a desktop footer with an accordion replacing four columns of links which is incorrect usage

Do not use the website-specific footer without the universal footer.

Image of a footer missing the universal footer which is incorrect usage

Do not create your own custom universal footer by changing, deleting, or rearranging any elements.

Image of a universal footer with a new design which is incorrect usage
Edit this page on GitHub