Code | Footer | Red Hat design system

Skip to main content

Home
About
Get started
Foundations
Tokens
Elements
- All elements
- Accordion
- Alert
- Audio player
- Avatar
- Back to top
- Badge
- Blockquote
- Breadcrumb
- Button
- Call to action
- Card
- Code block
- Dialog
- Footer
- Health index
- Navigation (primary)
- Navigation (secondary)
- Pagination
- Popover Planned
- Progress steps
- Site status
- Skip link
- Spinner
- Statistic
- Subnavigation
- Surface
- Switch
- Table
- Tabs
- Tag
- Tile
- Timestamp
- Tooltip
- Video embed
Patterns
Accessibility
Design/code status
Release notes
Get support

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>`

Deprecated Slots

Slot Name Description

global

must contain <rh-footer-universal>

Note: global is deprecated.

use 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`

None

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

Part Name	Description
`base`
`base`
`logo`
`logo-image`
`primary`
`primary-start`
`primary-end`
`secondary`
`secondary-start`
`secondary-end`
`links-primary`
`links-secondary`
`tertiary`

None

None

None

None

None

None

None

None

None

None

None

None

None

None

None

None

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

None

None

None

None

DOM Property	Description	Type	Default
`icon`		`string \| undefined`	`unknown`

None

None

None

None

None

© 2021-2024 Red Hat, Inc.