Footer

The footer is a container that displays links and content to visitors who reach the bottom of a page, it also shows them they are using an official Red Hat website.

Footer component sample

View a live version of this component to see how it can be customized.

View this component in action

The footer is divided into two parts, the Modular footer and Global footer. Most of the content in the Modular footer can be customized whereas the content in the Global footer is the same across all websites.

Footer component anatomy

A unique logo that corresponds to the website the footer is used on.

Social media links that direct a visitor to unique social media websites.

Modular navigation

A collection of links unique to the website IA (information architecture).

Unique message

A unique description that corresponds to the website the footer is used on.

Shared message

A message about Red Hat that is the same across all footers and websites.

Unique content or top task

Extra content or a top task that is unique and requires its own slot (optional).

A collection of important links that are the same across all footers and websites.

Elements in the Modular and Global footers are high in contrast so they stand out to a visitor and meet accessibility guidelines. The footer looks similar in style to the Primary navigation for a consistent user experience across websites.

Footer component styling

Color

The Modular footer background color is slightly lighter than the Global footer background color. This separation helps to distinguish the footers from each other.

Footer component styling - color

Layout

The footer spans the entire width of the browser window at all screen sizes.

Footer component styling - layout

The footer should be used to provide a visitor with additional links and content if they did not find what they were looking for, it can also include copyright and legal information.

Layout

The Modular and Global footers have specific regions for inserting various content types. Do not insert content at random, use the correct regions.

  • section header - Region for inserting a website logo (home page, Customer Portal, etc.) and social media links.
  • section main - Region for inserting modular navigation links, website messaging, top tasks, or other unique content.
  • section footer - Region for inserting global navigation links, legal content, and a link to the Summit website.
Footer component usage - layout

The Global footer can be used by itself on pages that do not fit a specific IA. Examples include landing pages, minisites, etc.

Footer component usage - global region

The footer was designed to be applied to all Red Hat websites. The layout is flexible enough to accommodate various content types and arrangements.

Red Hat Customer Portal

Status indicator
The Status indicator (All systems operational) is a feature that will be added to all footers at a later date.

Footer component example - Red Hat Customer Portal

Red Hat Developer

Footer component example - Red Hat Developer

Red Hat Partner Connect

Footer component example - Red Hat Partner Connect

Columns

If the Modular footer includes a lot of content, a second row of columns will be added underneath the first row.

Footer component behavior - columns

If the Modular footer includes less content, columns should stretch to fill the negative space.

Footer component behavior - less columns

The social media links should remain aligned to the left edge of the last column if the number of columns change.

Footer component behavior - social media links

Left-to-right languages

When content is translated to other left-to-right languages, the footer maintains the same layout and text size.

Footer component behavior - Japanese translation

Right-to-left languages

When content is translated to a right-to-left language like Hebrew, the text size increases to 16px so visual subtleties of unique characters are easier to notice.

Footer component behavior - Hebrew translation

Default

Footer component interaction state - default
Interaction state Element Text styling
Default Social media link #8a8d90
Default Modular nav link #fff
Default Call to action #73bcf7
Default Red Hat fedora icon #8a8d90
Default Global nav and legal link #fff

Hover

Footer component interaction state - hover
Interaction state Element Text styling
Hover, Focus, and Active Social media link #b8bbbe
Hover, Focus, and Active Modular nav link #fff / Underline
Hover, Focus, and Active Call to action #bee1f4
Hover, Focus, and Active Red Hat fedora icon #b8bbbe
Hover, Focus, and Active Global nav and legal link #fff / Underline

Focus

Focus styles are the same as hover styles and also include a focus indicator.

Footer component interaction state - focus

Active

Footer component interaction state - active

Focus order

A logical focus order helps visitors understand and operate our websites. Elements or components need to receive focus in an order that preserves meaning, therefore the focus order should make sense and not jump around randomly.

Footer component focus order

Large screens

Footers on large screen sizes include columns and rows of links.

Footer component for large screens

Small screens

The Modular footer on small screen sizes includes an accordion instead of columns and rows of links. All accordion panels are collapsed by default when the page loads.

Horizontal rule
At small screen sizes, the horizontal rule below the logo and social media icons disappears.

Footer component for small screens
Footer component for small screens

Changing the stacking order

Do not stack the Global footer on top of the Modular footer.

Footer component best practice - changing the stacking order

Using an accordion

Do not use an accordion inside of a large Modular footer, only Modular footers for small screen sizes include an accordion.

Footer component best practice - using an accordion

Removing information

Do not remove the copyright text or Summit link from the Global footer.

Footer component best practice - removing information

Do not use the Modular footer on its own without the Global footer.

Footer component best practice - isolating the Modular footer

The Modular and Global footers use spacers to define space values between elements.

Footer component spacing on large screens
Footer component spacing on small screens
Footer component spacing on small screens

To give feedback about anything on this page, contact us.

To learn how to use our other components in your designs, visit the Components section.