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.

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

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

Hover

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.

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.