Footer
Overview
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.
Sample component

Demo
View a live version of this component to see how it can be customized.
Anatomy
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.

Website logo
A unique logo that corresponds to the website the footer is used on.
Social media links
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).
Global navigation
A collection of important links that are the same across all footers and websites.
Style
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.

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.

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

Usage
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.

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

Examples on other websites
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.

Red Hat Developer

Red Hat Partner Connect

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

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

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

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

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.

Interaction states
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

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.

Active

Accessibility
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.

Responsive design
Large screens
Footers on large screen sizes include columns and rows of links.

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.


Best practices
Changing the stacking order
Do not stack the Global footer on top of the Modular footer.

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

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

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

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



Feedback
To give feedback about anything on this page, contact us.
Components
To learn how to use our other components in your designs, visit the Components section.