Red Hat design system

Overview Style Guidelines Code Demos Accessibility

Installation

Slot Name	Description
`base`	Overrides everything. Do not use.
`header`	Overrides `header-*`, `logo`, `social-links`
`header-primary`	primary footer header content, e.g. main logo. Overrides `logo`
`header-secondary`	secondary footer header content, e.g. social links. Overrides `social-links`
`heading`	text that describes the footer section to assistive tecchnology. Contains default text "Red Hat footer".
`logo`	main page or product logo. Defaults to Red Hat corporate logo
`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
`links`	main footer links
`main-secondary`	typically contains prose or promotional content
`universal`	must contain `<rh-footer-universal>`

DOM Property	Description	Type	Default
`colorPalette`		`ColorPalette`	`'darker'`

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.

None

Part Name	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
`header-secondary`	secondary footer header content, e.g. social links
`logo`	main page or product logo container
`social-links`	social links container `<rh-footer-links>`
`main`	main content container.
`main-primary`	container for main footer links
`links`	container for main footer links
`links-accordion-header`	mobile links accordion header element
`links-accordion-panel`	mobile links panel container element
`main-secondary`	container fro prose or promotional content

CSS Property	Description	Default
`--rh-footer-icon-color`		`#8a8d90`
`--rh-footer-icon-color-hover`		`#b8bbbe`
`--rh-footer-border-color`		`#6a6e73`
`--rh-footer-accent-color`		`#e00`
`--rh-footer-section-side-gap`		`16px`
`--rh-footer-links-gap`		`8px`
`--rh-footer-link-header-font-size`		`0.875em`
`--rh-footer-nojs-min-height`		`750px`

Token	Copy
`--rh-color-accent-brand-on-light`
`--rh-color-border-subtle-on-dark`
`--rh-color-gray-30`
`--rh-color-gray-40`
`--rh-color-interactive-primary-default-on-dark`
`--rh-color-interactive-primary-hover-on-dark`
`--rh-color-surface-darker`
`--rh-color-surface-darkest`
`--rh-color-text-primary-on-dark`
`--rh-color-text-secondary-on-dark`
`--rh-color-white`
`--rh-font-family-body-text`
`--rh-font-family-code`
`--rh-font-family-heading`
`--rh-font-size-body-text-lg`
`--rh-font-size-body-text-sm`
`--rh-font-size-body-text-xs`
`--rh-font-size-code-xs`
`--rh-font-weight-body-text-regular`
`--rh-font-weight-heading-medium`
`--rh-length-3xs`
`--rh-length-4xs`
`--rh-length-xl`
`--rh-line-height-body-text`
`--rh-line-height-heading`
`--rh-size-icon-04`
`--rh-space-2xl`
`--rh-space-4xl`
`--rh-space-lg`
`--rh-space-md`
`--rh-space-xl`
`--rh-space-xs`

Slot Name	Description
`heading`	text that describes the footer section to assistive tecchnology. Contains default text "Red Hat footer".
`logo`
`logo-image`
`primary`
`primary-start`
`primary-end`
`secondary`
`secondary-start`
`secondary-end`
`links-primary`
`links-secondary`
`tertiary`

DOM Property	Description	Type	Default
`colorPalette`		`ColorPalette`	`'darker'`

None

None

Token	Copy
`--rh-color-text-primary-on-dark`
`--rh-color-text-secondary-on-dark`
`--rh-font-family-body-text`
`--rh-font-size-body-text-sm`
`--rh-font-weight-body-text-regular`
`--rh-font-weight-heading-medium`
`--rh-space-2xl`
`--rh-space-lg`

None

DOM Property	Description	Type	Default
`headerHidden`	Cause the header slot to be visually hidden. Setting this to true will not affect `aria-labelledby`.	`boolean`	`false`

Method Name	Description
`updateAccessibility()`

None

DOM Property	Description	Type	Default
`icon`	Icon for this social link e.g. `'facebook'`	`IconNameFor<'social'> \| undefined`	`unknown`

None

Token	Copy
`--rh-size-icon-02`