Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Footer

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleColor schemeConfigurationSpaceInteraction statesStyleColor schemeConfigurationSpaceInteraction 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

Color scheme

Footer only has one available color-palette, and renders in the dark color scheme.

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 darkened --rh-color-surface-dark
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
© 2021-2025 Red Hat, Inc. Deploys by Netlify