Footer

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Style
  2. Theme
  3. Configuration
  4. Space
  5. Interaction states
  1. Style
  2. Theme
  3. Configuration
  4. Space
  5. Interaction states

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 Token or value
Color - social media icons --rh-color-gray-40
Color - divider lines --rh-color-gray-50
Border width - divider lines --rh-border-width-sm
Color - titles and link text --rh-color-white
Color - body text --rh-color-gray-30
Color - call to action #73BCF7
Color - language selector icons and text --rh-color-gray-30
Color - background --rh-color-surface-dark-alt
Property Current value
Color - social media icons --rh-color-gray-40
Color - link text --rh-color-white
Color - body text --rh-color-gray-30
Color - background --rh-color-surface-darkest

Language selector

Image of a footer with the language selector menu open
Property Token or value
Color - link text --rh-color-white
Color - menu border --rh-color-gray-50
Color - menu surface --rh-color-surface-darkest
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

Spacing tokens

Interaction states

Hover

Hover state examples within a footer
Property Token or value
Color - social media icons --rh-color-interactive-secondary-default
Text decoration - link text Underline
Color - call to action #BEE1F4
Color - language selector icons and text --rh-color-white
Color - Red Hat fedora --rh-color-interactive-secondary-default

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
Edit this page on GitHub