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 stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Footer

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-footerrh-footer-blockrh-footer-copyrightrh-footer-linksrh-footer-social-linkrh-footer-universalImportingUsagerh-footerrh-footer-blockrh-footer-copyrightrh-footer-linksrh-footer-social-linkrh-footer-universal

Importing

Add rh-footer to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-footer/rh-footer.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Lightdom CSS

This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.

Note

Replace /path/to/ with path to the CSS file, whether local or CDN.

 
<link rel="stylesheet" href="/path/to/rh-footer/rh-footer-lightdom.css">

Usage

A footer displays secondary content and legal information to users who reach the bottom of a page.

Slots 11
Slot Name Summary Description
heading

text that describes the footer section to assistive technology. Contains default text "Red Hat footer".
base

Overrides everything. Do not use.
header

Overrides header-*, logo, social-links
header-primary

primary footer header content, e.g. main logo. Overrides logo
logo

main page or product logo. Defaults to Red Hat corporate logo
header-secondary

secondary footer header content, e.g. social links. Overrides social-links
social-links

social media links (icons). Contains a default set of links
main

main footer content. Overrides main-*
main-primary

main footer region. typically a columnar grid
main-secondary

typically contains prose or promotional content
universal

must contain <rh-footer-universal>
Attributes 0
None
Methods 1
Method Name Description
updateAccessibility()

Get any <ul>s that are in the designated link slots and synchronously update each list and header if we need to.
Events 0
None
CSS Shadow Parts 11
Part Name Summary Description
base

main footer element, containing all footer content
header

footer header, typically containing main logo and social links
header-primary

primary footer header content, e.g. main logo
logo

main page or product logo container
header-secondary

secondary footer header content, e.g. social links
social-links

social links container <rh-footer-links>
section

main content container.
main

main content container.
main-primary

container for main footer links
links

container for main footer links
main-secondary

container for prose or promotional content
CSS Custom Properties 9
CSS Property Description Default
--rh-footer-nojs-min-height 750px
--rh-footer-icon-color var(--rh-color-gray-40, #a3a3a3)
--rh-footer-icon-color-hover var(--rh-color-gray-30, #c7c7c7)
--rh-footer-border-color var(--rh-color-border-subtle-on-dark, #707070)
--rh-footer-accent-color var(--rh-color-accent-brand-on-light, #ee0000)
--rh-footer-section-side-gap var(--rh-space-lg, 16px)
--pf-global--spacer--xl 32px
--rh-footer-links-gap var(--rh-space-lg, 16px)
--rh-footer-link-header-font-size var(--rh-font-size-body-text-sm, 0.875rem)
Design Tokens 30
Token Copy
--rh-font-family-body-text
--rh-line-height-body-text
--rh-color-gray-40
--rh-color-gray-30
--rh-color-border-subtle-on-dark
--rh-color-accent-brand-on-light
--rh-color-white
--rh-size-icon-04
--rh-font-weight-body-text-regular
--rh-font-family-heading
--rh-line-height-heading
--rh-length-xl
--rh-length-3xs
--rh-space-xs
--rh-font-family-code
--rh-font-size-code-xs
--rh-length-4xs
--rh-color-surface-darker
--rh-color-surface-darkest
--rh-color-text-secondary
--rh-space-md
--rh-font-size-body-text-xs
--rh-space-xl
--rh-font-size-body-text-lg
--rh-space-lg
--rh-font-weight-heading-medium
--rh-font-size-body-text-sm
--rh-color-text-primary
--rh-space-2xl
--rh-space-4xl
Slots 2
Slot Name Summary Description
header
Attributes 0
None
Methods 0
None
Events 0
None
CSS Shadow Parts 3
Part Name Summary Description
base
header
content
CSS Custom Properties 0
None
Design Tokens 8
Token Copy
--rh-space-2xl
--rh-font-weight-heading-medium
--rh-font-size-body-text-sm
--rh-space-lg
--rh-color-text-primary-on-dark
--rh-color-text-secondary-on-dark
--rh-font-family-body-text
--rh-font-weight-body-text-regular
Slots 1
Slot Name Summary Description
Attributes 0
None
Methods 0
None
Events 0
None
CSS Shadow Parts 0
None
CSS Custom Properties 0
None
Design Tokens 0
None
Slots 3
Slot Name Summary Description
header
panel
Attributes 1
Attribute DOM Property Description Type Default
header-hidden headerHidden

Cause the header slot to be visually hidden. Setting this to true will not affect aria-labelledby.

 
boolean
 
false
Methods 1
Method Name Description
updateAccessibility()
Events 0
None
CSS Shadow Parts 2
Part Name Summary Description
header
default
CSS Custom Properties 0
None
Design Tokens 0
None

Social media links for Red Hat Footer

Slots 1
Slot Name Summary Description

Optional icon for social link. Use only when suitable icon is unavailable with <rh-icon>
Attributes 3
Attribute DOM Property Description Type Default
icon icon

Icon for this social link e.g. 'facebook'

 
IconNameFor<'social'>
 
unknown
href href

Social link address

 
string
 
unknown
accessible-label accessibleLabel

Textual label for the social link e.g. "Instagram"

 
string
 
unknown
Methods 0
None
Events 0
None
CSS Shadow Parts 0
None
CSS Custom Properties 1
CSS Property Description Default
--rh-footer--social-icon--size var(--rh-size-icon-02, 24px)
Design Tokens 1
Token Copy
--rh-size-icon-02
Slots 12
Slot Name Summary Description
heading

text that describes the footer section to assistive tecchnology. Contains default text "Red Hat footer".
base
logo

logo
primary

primary
primary-start

primary-start
links-primary

links-primary
primary-end

primary-end
secondary

secondary
secondary-start

secondary-start
links-secondary

links-secondary
secondary-end

secondary-end
tertiary

tertiary
Attributes 1
Attribute DOM Property Description Type Default
color-palette colorPalette 
ColorPalette
 
'darker'
Methods 0
None
Events 0
None
CSS Shadow Parts 15
Part Name Summary Description
section

base
base

base
logo

logo
logo-anchor
logo-image

logo-image
primary

primary
primary-start

primary-start
links-primary

links-primary
primary-end

primary-end
spacer
secondary

secondary
secondary-start

secondary-start
links-secondary

links-secondary
secondary-end

secondary-end
tertiary

tertiary
CSS Custom Properties 9
CSS Property Description Default
--rh-footer-nojs-min-height 750px
--rh-footer-icon-color var(--rh-color-gray-40, #a3a3a3)
--rh-footer-icon-color-hover var(--rh-color-gray-30, #c7c7c7)
--rh-footer-border-color var(--rh-color-border-subtle-on-dark, #707070)
--rh-footer-accent-color var(--rh-color-accent-brand-on-light, #ee0000)
--rh-footer-section-side-gap var(--rh-space-lg, 16px)
--pf-global--spacer--xl 32px
--rh-footer-links-gap var(--rh-space-lg, 16px)
--rh-footer-link-header-font-size var(--rh-font-size-body-text-sm, 0.875rem)
Design Tokens 30
Token Copy
--rh-font-family-body-text
--rh-line-height-body-text
--rh-color-gray-40
--rh-color-gray-30
--rh-color-border-subtle-on-dark
--rh-color-accent-brand-on-light
--rh-color-white
--rh-size-icon-04
--rh-font-weight-body-text-regular
--rh-font-family-heading
--rh-line-height-heading
--rh-length-xl
--rh-length-3xs
--rh-space-xs
--rh-font-family-code
--rh-font-size-code-xs
--rh-length-4xs
--rh-color-surface-darker
--rh-color-surface-darkest
--rh-color-text-secondary
--rh-space-md
--rh-font-size-body-text-xs
--rh-space-xl
--rh-font-size-body-text-lg
--rh-space-lg
--rh-font-weight-heading-medium
--rh-font-size-body-text-sm
--rh-color-text-primary
--rh-space-2xl
--rh-space-4xl
Edit this page on GitHub
© 2025 Red Hat Deploys by Netlify