Footer

Style

A footer is a stack of two containers that include a variety of elements or content, mostly links and text blocks. Elements in a footer are high in contrast so they grab the attention of users and meet accessibility guidelines. A footer is designed to look similar in style to the primary navigation to ensure a consistent user experience across websites.

Anatomy

1. Website logo
2. Social media links
3. Divider line
4. Navigation title
5. Navigation link
6. Body text
7. Call to action
8. Language selector
9. Website-specific footer
10. redhat.com link
11. Universal footer

Grays

The website-specific footer background color is a slightly lighter gray than the universal footer background color. This variant creates separation and helps distinguish both footers from each other.

Theme

A footer only has one theme, but visually it could be considered in the dark theme.

Language selector

Configuration

A footer is a group of regions where various types of content can be organized. Within these regions, position and alignment are somewhat rigid in order to maintain consistency.

Space

Interaction states

Hover

Hover - language selector

Focus

Helpful tip

The Focus state has the same styles as the Hover state.

Focus - language selector

Helpful tip

The Focus state has the same styles as the Hover state.

Active

Helpful tip

The Active state has the same styles as the Hover state.

Active - language selector

Helpful tip

The Active state has the same styles as the Hover state.