Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button group Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Readtime Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement 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 

<rh-footer data-analytics-region="page-footer">
  <a slot="logo" href="https://redhat.com/en" data-analytics-category="Footer" data-analytics-text="Logo">
    <img alt="Red Hat logo" src="https://static.redhat.com/libs/redhat/brand-assets/2/corp/logo--on-dark.svg" loading="lazy">
  </a>
  <rh-footer-social-link slot="social-links" icon="linkedin" href="https://www.linkedin.com/company/red-hat" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="LinkedIn" accessible-label="LinkedIn"></rh-footer-social-link>
  <rh-footer-social-link slot="social-links" icon="youtube" href="https://www.youtube.com/user/RedHatVideos" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="YouTube" accessible-label="YouTube"></rh-footer-social-link>
  <rh-footer-social-link slot="social-links" icon="facebook" href="https://www.facebook.com/redhatinc" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="Facebook" accessible-label="Facebook"></rh-footer-social-link>
  <rh-footer-social-link slot="social-links" icon="x" href="https://twitter.com/RedHat" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="Twitter" accessible-label="X/Twitter"></rh-footer-social-link>
  <h3 slot="links" data-analytics-text="Products">Products</h3>
  <ul slot="links">
    <li><a href="https://redhat.com/en/technologies/linux-platforms/enterprise-linux" data-analytics-category="Footer|Products" data-analytics-text="Red Hat Enterprise Linux">Red Hat Enterprise Linux</a></li>
    <li><a href="https://redhat.com/en/technologies/cloud-computing/openshift" data-analytics-category="Footer|Products" data-analytics-text="Red Hat OpenShift">Red Hat OpenShift</a></li>
    <li><a href="https://redhat.com/en/technologies/management/ansible" data-analytics-category="Footer|Products" data-analytics-text="Red Hat Ansible Automation Platform">Red Hat Ansible Automation Platform</a></li>
    <li><a href="https://redhat.com/en/technologies/cloud-computing/openshift/cloud-services" data-analytics-category="Footer|Products" data-analytics-text="Cloud services">Cloud services</a></li>
    <li><a href="https://redhat.com/en/technologies/all-products" data-analytics-category="Footer|Products" data-analytics-text="See all products">See all products</a></li>
  </ul>
  <h3 slot="links" data-analytics-text="Tools">Tools</h3>
  <ul slot="links">
    <li><a href="https://sso.redhat.com" data-analytics-category="Footer|Tools" data-analytics-text="My account">My account</a></li>
    <li><a href="https://redhat.com/en/services/training-and-certification" data-analytics-category="Footer|Tools" data-analytics-text="Training and certification">Training and certification</a></li>
    <li><a href="https://access.redhat.com" data-analytics-category="Footer|Tools" data-analytics-text="Customer support">Customer support</a></li>
    <li><a href="https://developers.redhat.com/" data-analytics-category="Footer|Tools" data-analytics-text="Developer resources">Developer resources</a></li>
    <li><a href="https://learn.redhat.com/" data-analytics-category="Footer|Tools" data-analytics-text="Learning community">Learning community</a></li>
    <li><a href="https://connect.redhat.com/" data-analytics-category="Footer|Tools" data-analytics-text="Partner resources">Partner resources</a></li>
    <li><a href="https://redhat.com/en/resources" data-analytics-category="Footer|Tools" data-analytics-text="Resource library">Resource library</a></li>
  </ul>
  <h3 slot="links" data-analytics-text="Try buy sell">Try, buy &amp; sell</h3>
  <ul slot="links">
    <li><a href="https://redhat.com/en/products/trials" data-analytics-category="Footer|Try buy sell" data-analytics-text="Product trial center">Product trial center</a></li>
    <li><a href="https://marketplace.redhat.com" data-analytics-category="Footer|Try buy sell" data-analytics-text="Red Hat Marketplace">Red Hat Marketplace</a></li>
    <li><a href="https://catalog.redhat.com/" data-analytics-category="Footer|Tools" data-analytics-text="Red Hat Ecosystem Catalog">Red Hat Ecosystem Catalog</a></li>
    <li><a href="http://redhat.force.com/finder/" data-analytics-category="Footer|Try buy sell" data-analytics-text="Find a partner">Find a partner</a></li>
    <li><a href="https://www.redhat.com/en/store" data-analytics-category="Footer|Try buy sell" data-analytics-text="Red Hat Store">Red Hat Store</a></li>
    <li><a href="https://cloud.redhat.com/" data-analytics-category="Footer|Tools" data-analytics-text="Console">Console</a></li>
  </ul>
  <h3 slot="links" data-analytics-text="Communicate">Communicate</h3>
  <ul slot="links">
    <li><a href="https://redhat.com/en/services/consulting-overview#contact-us" data-analytics-category="Footer|Communicate" data-analytics-text="Contact consulting">Contact consulting</a></li>
    <li><a href="https://redhat.com/en/contact" data-analytics-category="Footer|Communicate" data-analytics-text="Contact sales">Contact sales</a></li>
    <li><a href="https://redhat.com/en/services/training-and-certification/contact-us" data-analytics-category="Footer|Communicate" data-analytics-text="Contact training">Contact training</a></li>
    <li><a href="https://redhat.com/en/about/social" data-analytics-category="Footer|Communicate" data-analytics-text="Social">Social</a></li>
  </ul>
  <rh-footer-block slot="main-secondary">
    <h3 slot="header" data-analytics-text="About Red Hat">About Red Hat</h3>
    <p> We’re the world’s leading provider of enterprise open source solutions—including Linux, cloud, container, and Kubernetes. We deliver hardened solutions that make it easier for enterprises to
      work across platforms and environments, from the core datacenter to the network edge.</p>
  </rh-footer-block>
  <rh-footer-block slot="main-secondary">
    <h3 slot="header" data-analytics-text="Subscribe to our newsletter Red Hat Shares">Subscribe to our newsletter, Red Hat Shares</h3>
    <rh-cta><a href="https://www.redhat.com/en/email-preferences?newsletter=RH-Shares&amp;intcmp=7016000000154xCAAQ" data-analytics-category="Footer|About Red Hat" data-analytics-text="Sign up now">Sign up now</a></rh-cta>
  </rh-footer-block>

  <!-- Universal Footer -->
  <rh-footer-universal slot="universal">
    <h3 slot="links-primary" data-analytics-text="Red Hat legal and privacy links" hidden="">Red Hat legal and privacy links</h3>
    <ul slot="links-primary" data-analytics-region="page-footer-bottom-primary">
      <li><a href="https://redhat.com/en/about/company" data-analytics-category="Footer|Corporate" data-analytics-text="About Red Hat">About Red Hat</a></li>
      <li><a href="https://redhat.com/en/jobs" data-analytics-category="Footer|Corporate" data-analytics-text="Jobs">Jobs</a></li>
      <li><a href="https://redhat.com/en/events" data-analytics-category="Footer|Corporate" data-analytics-text="Events">Events</a></li>
      <li><a href="https://redhat.com/en/about/office-locations" data-analytics-category="Footer|Corporate" data-analytics-text="Locations">Locations</a></li>
      <li><a href="https://redhat.com/en/contact" data-analytics-category="Footer|Corporate" data-analytics-text="Contact Red Hat">Contact Red Hat</a></li>
      <li><a href="https://redhat.com/en/blog" data-analytics-category="Footer|Corporate" data-analytics-text="Red Hat Blog">Red Hat Blog</a></li>
      <li><a href="https://redhat.com/en/about/our-culture/diversity-equity-inclusion" data-analytics-category="Footer|Corporate" data-analytics-text="Diversity equity and inclusion">Diversity, equity, and inclusion</a></li>
      <li><a href="https://coolstuff.redhat.com/" data-analytics-category="Footer|Corporate" data-analytics-text="Cool Stuff Store">Cool Stuff Store</a></li>
      <li><a href="https://www.redhat.com/en/summit" data-analytics-category="Footer|Corporate" data-analytics-text="Red Hat Summit">Red Hat Summit</a></li>
    </ul>
    <rh-footer-copyright slot="links-secondary">© 2025 Red Hat</rh-footer-copyright>
    <h3 slot="links-secondary" data-analytics-text="Red Hat legal and privacy links" hidden="">Red Hat legal and privacy links</h3>
    <ul slot="links-secondary" data-analytics-region="page-footer-bottom-secondary">
      <li><a href="https://redhat.com/en/about/privacy-policy" data-analytics-category="Footer|Red Hat legal and privacy links" data-analytics-text="Privacy statement">Privacy statement</a></li>
      <li><a href="https://redhat.com/en/about/terms-use" data-analytics-category="Footer|Red Hat legal and privacy links" data-analytics-text="Terms of use">Terms of use</a></li>
      <li><a href="https://redhat.com/en/about/all-policies-guidelines" data-analytics-category="Footer|Red Hat legal and privacy links" data-analytics-text="All policies and guidelines">All policies and guidelines</a></li>
      <li><a href="https://redhat.com/en/about/digital-accessibility" data-analytics-category="Footer|Red Hat legal and privacy links" data-analytics-text="Digital accessibility" class="active">Digital accessibility</a></li>
      <!-- If your website supports trustarc include this item to add Cookie Preferences to your site. -->
      <!-- <li><span id="teconsent"> </span></li> -->
    </ul>
  </rh-footer-universal>
</rh-footer>

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

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

Site footer for navigation links, social icons, and legal content. Use when a page needs branded footer navigation. Must slot an rh-footer-universal in the universal slot and should contain rh-footer-links groups and rh-footer-block sections. Uses a <footer> landmark with aria-labelledby auto-wired to headers. Tab navigates links. On mobile, collapses to accordion.

Slot Name Summary Description
heading

visually-hidden footer heading for assistive technology

Expects inline text. Screen readers announce this heading to identify the footer landmark region. Defaults to "Red Hat footer".
base

overrides all footer content

Expects block elements. Replaces the entire footer inner structure. Avoid using; bypasses all built-in layout, ARIA wiring, and responsive behavior.
header

Expects block elements. Overrides header-primary, logo, and social-links slots. Screen readers navigate child links as a group.
header-primary

Expects block elements. Primary header area, typically the site logo. Should contain an accessible <a> linking to the homepage. Screen readers use the link text.

main page or product logo

Expects block elements: an <a> wrapping an image. Defaults to the Red Hat corporate logo. Screen readers rely on the img alt attribute or link text for identification.
header-secondary

Expects block elements. Overrides social-links slot. Should contain <rh-footer-social-link> elements with accessible labels for screen readers.
social-links

social media icon links

Expects block elements: <rh-footer-social-link> elements. Each link must have an accessible-label for screen reader announcement. Rendered as a list with role="list".
main

Expects block elements. Overrides main-primary and main-secondary slots. Should contain <rh-footer-links> groups. Screen readers use aria-labelledby on each group.
main-primary

Expects block elements: <rh-footer-links> with heading elements. On mobile, collapses to accordion. Screen readers use aria-labelledby on each link group.
main-secondary

Expects block elements: prose, promotional content, or <rh-footer-block> elements. Screen readers announce content in DOM order.
universal

universal footer slot

Expects block elements: an <rh-footer-universal> element providing global Red Hat links, logo, and copyright. Screen readers navigate this as a separate footer landmark region. Must not be omitted.

None

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 Summary Description
base

main footer container, containing all footer content.
header

footer header with logo and social links

Contains the site logo and social media links. Screen readers navigate these as link groups. Tab moves through logo link and social links.
header-primary

primary footer header content, e.g. main 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

footer header with logo and social links

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 Property Description Default
--rh-footer-nojs-min-height

Minimum height when JavaScript is disabled. @deprecated target rh-footer:not(:defined) directly

 —
--rh-footer-icon-color

Default icon color. Uses --rh-color-gray-40 design token

 —
--rh-footer-icon-color-hover

Icon color on hover/focus. Uses --rh-color-gray-30 design token

 —
--rh-footer-border-color

Border color for section dividers. Uses --rh-color-border-subtle-on-dark design token

 —
--rh-footer-accent-color

Accent color for emphasis. Uses --rh-color-accent-brand-on-light design token

 —
--rh-footer-section-side-gap

Horizontal padding for footer sections. Responsive: 16px / 32px / 64px

 —
--rh-footer-links-gap

Vertical spacing between footer link items. Defaults to --rh-space-lg

 —
--rh-footer-link-header-font-size

Font size for link column headers. Defaults to --rh-font-size-body-text-sm

 —
--pf-global--spacer--xl

Gap between promotional blocks in the secondary region

 32px
Token Description Copy
--rh-font-family-body-text

Footer typeface

Body text font family
--rh-line-height-body-text

Footer line height

Line height for body text
--rh-color-gray-40

Footer icon default on dark

Subtle icon (hover state)
--rh-color-gray-30

Footer icon hover default on dark

Subtle borders (light theme)
--rh-color-border-subtle-on-dark

Footer border subtle on dark

Subtle border color (dark theme)
--rh-color-accent-brand-on-light

Footer accent brand on light

Brand red (light theme)
--rh-color-white

Footer text color

Universal footer accordion surface

Lightest surface (light theme) or primary text (dark theme)
--rh-size-icon-04

Footer logo width

40px icon box
--rh-font-weight-body-text-regular

Footer body text weight

Regular font weight
--rh-font-family-heading

Footer typeface

Heading font family
--rh-line-height-heading

Footer line height

Line height for headings
--rh-length-xl

24px length token
--rh-length-3xs

Debug mode outline width

2px length token
--rh-space-xs

4px spacer
--rh-font-family-code

Code font family
--rh-font-size-code-xs

12px font size
--rh-length-4xs

Footer height

1px length token
--rh-color-surface-darker

Footer background

Footer background

Secondary surface (dark theme)
--rh-color-surface-darkest

Footer background

Primary surface (dark theme)
--rh-color-text-secondary

Footer text color
--rh-space-md

Primary global links row gap

Secondary global links row gap

8px spacer
--rh-font-size-body-text-xs

Footer text size

12px font size
--rh-space-xl

Footer universal inline gap

Primary global links column gap

Secondary global links column gap

Footer content gap

24px spacer
--rh-font-size-body-text-lg

18px font size
--rh-space-lg

Footer section horizontal margin

Footer content gap

Desktop link column row gap

16px spacer
--rh-font-weight-heading-medium

Footer font weight

Medium font weight for headings
--rh-font-size-body-text-sm

Footer link column header size

14px font size
--rh-color-text-primary

Footer text color
--rh-space-2xl

Footer section block padding

Footer content gap

Footer content gap

Footer universal block gap

Desktop link column inline gap

Footer main padding block-start at viewport >= md

32px spacer
--rh-space-4xl

Footer main padding block-end at viewport >= md

64px spacer

Sidebar content block for prose, promotions, or calls to action within <rh-footer>. Use when the footer needs content alongside link columns. Should contain a heading in the header slot for accessible labeling via aria-labelledby. Tab navigates interactive children.

Slot Name Summary Description
header

block heading

Expects a block elements heading (h2-h5) labeling this content block. Provides visual and semantic grouping for screen readers. Should be provided for accessibility.
[default]

block body content

Expects block elements: prose text, links, or promotional content. Screen readers announce content in DOM order. Tab navigates interactive children.
Note: [default] unnamed slots do not have a slot="name" attribute.

None

None

None

Part Name Summary Description
base
header
content

None

Token Description Copy
--rh-space-2xl

32px spacer
--rh-font-weight-heading-medium

Block heading weight

Medium font weight for headings
--rh-font-size-body-text-sm

Block default body size

Block heading size

14px font size
--rh-space-lg

Block heading bottom spacing

16px spacer
--rh-color-text-primary-on-dark

Block default text on dark

Block heading text on dark

Primary text color for dark theme
--rh-color-text-secondary-on-dark

Block secondary text on dark

Secondary text color for dark theme
--rh-font-family-body-text

Block body typeface

Body text font family
--rh-font-weight-body-text-regular

Block body weight

Regular font weight

Copyright notice for <rh-footer-universal>. Use when the footer requires a legal copyright line. Authors should avoid overriding.

Slot Name Summary Description
[default]

copyright text content (default slot)

Expects inline text containing the copyright notice. Defaults to "© [current year] Red Hat" if not provided. Screen readers announce this text within the footer landmark; it is not focusable via Tab. Override for a different entity or localized text.
Note: [default] unnamed slots do not have a slot="name" attribute.

None

None

None

None

None

None

Accessible link group for the footer. Auto-wires aria-labelledby between the heading and <ul> for screen readers. Must contain a <ul>; should include a heading in the header slot. Tab moves focus through each link. On mobile, collapses into an accordion panel.

Slot Name Summary Description
header

link group heading

Expects a block elements heading (h2-h5) labeling this link group. Automatically linked to the <ul> via aria-labelledby for screen reader users. Visually hidden when header-hidden attribute is set.
panel

accordion panel content

Expects block elements. Alternative content slot used when links are rendered inside an accordion panel on mobile viewports. Screen readers navigate panel content after the accordion header is expanded.
[default]

link list

Expects block elements: a <ul> of navigation links. Each link is focusable via Tab. The list should have aria-labelledby pointing to the header (auto-wired by the component).
Note: [default] unnamed slots do not have a slot="name" attribute.
Attribute DOM Property Description Type Default
header-hidden headerHidden

Visually hides the header slot content while preserving it for screen readers. The aria-labelledby association remains active regardless of this setting. USE when the heading should be accessible but not visible (e.g. social links group). Defaults to false.

 
boolean
 
false
Method Name Description
updateAccessibility()

None

Part Name Summary Description
header
default

None

None

Social media icon link for the footer. Authors must set accessible-label so screen readers announce the platform name via ARIA. Uses role="listitem" for list semantics. Tab navigates between links; use icon or slot a custom SVG.

Slot Name Summary Description
[default]

custom social icon content

Optional slot for a custom icon when the built-in <rh-icon> social set does not include the desired platform. Screen readers rely on the parent anchor's aria-label rather than this icon content.
Note: [default] unnamed slots do not have a slot="name" attribute.
Attribute DOM Property Description Type Default
icon icon

Name of the social media icon from the social icon set (e.g. 'facebook', 'twitter', 'linkedin'). Renders an <rh-icon> in the default slot if no custom icon is slotted. Defaults to undefined.

 
IconNameFor<'social'>
 
unknown
href href

URL of the social media profile or page. Applied to the anchor element's href attribute. Must be a valid URL. Defaults to undefined.

 
string
 
unknown
accessible-label accessibleLabel

Accessible text label announced by screen readers for the social link (e.g. "LinkedIn", "YouTube"). Applied as aria-label on the anchor. Must be provided for accessibility. Defaults to undefined.

 
string
 
unknown

None

None

None

CSS Property Description Default
--rh-footer--social-icon--size

Social icon size override

 var(--rh-size-icon-02, 24px)
Token Description Copy
--rh-size-icon-02

Social icon default size

24px icon box

Global Red Hat footer bar for consistent branding across all properties. Authors must not customize content per-site. The secondary-start slot should contain <rh-footer-copyright>. Renders a <footer> with ARIA landmark semantics and a visually-hidden <h2> so screen readers can identify the region. Tab navigates link groups.

Color palette

This element is a color palette container and supports all color palettes via the color-palette attribute.

Slot Name Summary Description
heading

visually-hidden heading for assistive technology

Expects inline text. Screen readers use this heading to identify the universal footer region. Defaults to "Red Hat footer". Hidden if a parent <h2> already exists.
base

overrides all universal footer content (base slot)

Expects block elements. Replaces the entire universal footer structure. Avoid using; bypasses all built-in layout, grid regions, responsive behavior, and ARIA landmark wiring.

Red Hat logo (logo slot)

Expects block elements: an <a> wrapping an <img> or <svg>. Defaults to the Red Hat logo SVG linking to redhat.com. Screen readers rely on the anchor aria-label for identification.
primary

overrides primary-start, links-primary, and primary-end (primary slot)

Expects block elements. Replaces the entire primary link region. Override only when the three sub-slots are insufficient. Screen readers navigate child links as a group.
primary-start

content before primary links (primary-start slot)

Expects inline or block elements placed before the primary global navigation links. Screen readers encounter this content before the link list.
links-primary

primary global navigation links (links-primary slot)

Expects block elements: a <ul> of <li> anchor links for primary global Red Hat navigation. Screen readers announce the list group; Tab moves through each link.
primary-end

content after primary links (primary-end slot)

Expects inline or block elements placed after the primary global navigation links. Screen readers encounter this content after the link list.
secondary

overrides secondary-start, links-secondary, and secondary-end (secondary slot)

Expects block elements. Replaces the entire secondary link region. Override only when the three sub-slots are insufficient. Screen readers navigate child links as a group.
secondary-start

content before secondary links, e.g. copyright (secondary-start slot)

Expects block elements such as <rh-footer-copyright>, placed before the secondary links. Screen readers announce this content in DOM order within the footer landmark.
links-secondary

secondary global navigation links (links-secondary slot)

Expects block elements: a <ul> of <li> anchor links for secondary global Red Hat navigation. Screen readers announce the list group; Tab moves through each link.
secondary-end

content after secondary links (secondary-end slot)

Expects inline or block elements placed after the secondary global navigation links. Screen readers encounter this content after the secondary link list.
tertiary

optional third content region (tertiary slot)

Expects block elements such as a language selector or custom widget. Hidden when nothing is slotted. Screen readers encounter this region after the secondary links.
Attribute DOM Property Description Type Default
color-palette colorPalette

Color palette for the universal footer. Defaults to 'darker'. Valid values: 'lighter', 'light', 'dark', 'darker', 'darkest'. The universal footer typically renders on the darkest surface.

 
'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'
 
'darker'

None

None

Part Name Summary Description
section

Wrapper for the universal footer content (logo, primary, secondary, tertiary).
base

Wrapper for the universal footer content (logo, primary, secondary, tertiary).

Container for the logo slot.
logo-anchor

Link wrapping the logo; defaults to redhat.com.
logo-image

Logo image or SVG element.
primary

Primary row (start, links, end).
primary-start

Left area of the primary row.
links-primary

Main link list area in the primary row.
primary-end

Right area of the primary row.
spacer

Spacer between primary and secondary rows.
secondary

Secondary row (start, links, end).
secondary-start

Left area of the secondary row.
links-secondary

Main link list area in the secondary row.
secondary-end

Right area of the secondary row.
tertiary

Optional bottom section (e.g. copyright, extra text).
CSS Property Description Default
--rh-footer-nojs-min-height

Minimum footer height when scripting is disabled

 —
--rh-footer-icon-color

Footer icon color override

 var(--rh-color-gray-40, #a3a3a3)
--rh-footer-icon-color-hover

Footer icon hover color override

 var(--rh-color-gray-30, #c7c7c7)
--rh-footer-border-color

Footer border color override

 var(--rh-color-border-subtle-on-dark, #707070)
--rh-footer-accent-color

Footer accent color override

 var(--rh-color-accent-brand-on-light, #ee0000)
--rh-footer-section-side-gap

Footer section horizontal margin override

 var(--rh-space-lg, 16px)
--pf-global--spacer--xl

Gap between promotional blocks in the secondary region

 32px
--rh-footer-links-gap

Vertical spacing between links in desktop columns

 var(--rh-space-lg, 16px)
--rh-footer-link-header-font-size

Font size for link-column headings. Overrides the --rh-font-size-body-text-sm token.

Footer link column header size override

 var(--rh-font-size-body-text-sm, 0.875rem)
Token Description Copy
--rh-font-family-body-text

Footer typeface

Body text font family
--rh-line-height-body-text

Footer line height

Line height for body text
--rh-color-gray-40

Footer icon default on dark

Subtle icon (hover state)
--rh-color-gray-30

Footer icon hover default on dark

Subtle borders (light theme)
--rh-color-border-subtle-on-dark

Footer border subtle on dark

Subtle border color (dark theme)
--rh-color-accent-brand-on-light

Footer accent brand on light

Brand red (light theme)
--rh-color-white

Footer text color

Universal footer accordion surface

Lightest surface (light theme) or primary text (dark theme)
--rh-size-icon-04

Footer logo width

40px icon box
--rh-font-weight-body-text-regular

Footer body text weight

Regular font weight
--rh-font-family-heading

Footer typeface

Heading font family
--rh-line-height-heading

Footer line height

Line height for headings
--rh-length-xl

24px length token
--rh-length-3xs

Debug mode outline width

2px length token
--rh-space-xs

4px spacer
--rh-font-family-code

Code font family
--rh-font-size-code-xs

12px font size
--rh-length-4xs

Footer height

1px length token
--rh-color-surface-darker

Footer background

Footer background

Secondary surface (dark theme)
--rh-color-surface-darkest

Footer background

Primary surface (dark theme)
--rh-color-text-secondary

Footer text color
--rh-space-md

Primary global links row gap

Secondary global links row gap

8px spacer
--rh-font-size-body-text-xs

Footer text size

12px font size
--rh-space-xl

Footer universal inline gap

Primary global links column gap

Secondary global links column gap

Footer content gap

24px spacer
--rh-font-size-body-text-lg

18px font size
--rh-space-lg

Footer section horizontal margin

Footer content gap

Desktop link column row gap

16px spacer
--rh-font-weight-heading-medium

Footer font weight

Medium font weight for headings
--rh-font-size-body-text-sm

Footer link column header size

14px font size
--rh-color-text-primary

Footer text color
--rh-space-2xl

Footer section block padding

Footer content gap

Footer content gap

Footer universal block gap

Desktop link column inline gap

Footer main padding block-start at viewport >= md

32px spacer
--rh-space-4xl

Footer main padding block-end at viewport >= md

64px spacer
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify