Skip to main content Red Hat Design System logo Contribute on Github

Footer

Overview Style Guidelines Code Demos Accessibility

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

Image of a footer showing lots of annotation numbers next to various styles and other elements
  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.

Image of a footer with no elements except for backgrounds; the top background is dark gray and the bottom is black

Theme

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

Image of a large footer
Property Current value
Color - social media icons #A3A3A3
Color - divider lines #707070
Border width - divider lines 1px
0.0625rem
Color - titles and link text #FFFFFF
Color - body text #C7C7C7
Color - call to action #73BCF7
Color - language selector icons and text #C7C7C7
Color - background #292929
Property Current value
Color - social media icons #A3A3A3
Color - link text #FFFFFF
Color - body text #C7C7C7
Color - background #151515

Language selector

Image of a footer with the language selector menu open
Property Current value
Color - link text #FFFFFF
Color - menu border #707070
Color - menu surface #151515
Border radius - menu surface 8px
0.5rem

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.

Image of how a footer is architected showing lots of alignment examples

Space

Image of a desktop footer showing space values in between elements Image of a tablet footer showing space values in between elements Image of a mobile footer showing space values in between elements Image of a footer showing space values in the language selector menu
Example Token Description
8 --rh-space-md 8px spacer
16 --rh-space-lg 16px spacer
24 --rh-space-xl 24px spacer
32 --rh-space-2xl 32px spacer
48 --rh-space-3xl 48px spacer

Spacing tokens

Interaction states

Hover

Hover state examples within a footer
Property Light theme
Color - social media icons #C7C7C7
Text decoration - link text Underline
Color - call to action #BEE1F4
Color - language selector icons and text #FFFFFF
Color - Red Hat fedora #C7C7C7

Hover - language selector

Hover state example within the language selector menu
Property Light theme
Text decoration - link text Underline

Focus

Helpful tip

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

 Focus state examples within a footer
Property Light theme
Color - focus ring #73BCF7

Focus - language selector

Helpful tip

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

 Focus state example within the language selector menu
Property Light theme
Color - focus ring #73BCF7

Active

Helpful tip

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

 Active state examples within a footer
Property Light theme
Color - focus ring #73BCF7

Active - language selector

Helpful tip

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

 Active state example within the language selector menu
Property Light theme
Color - focus ring #73BCF7
© 2021-2024 Red Hat, Inc. Deploys by Netlify