Red Hat design system

Overview

Style

Guidelines

Code

Accessibility

Demos

Importing

Usage

rh-footer

rh-footer-block

rh-footer-copyright

rh-footer-links

rh-footer-social-link

rh-footer-universal

Importing

Usage

rh-footer

rh-footer-block

rh-footer-copyright

rh-footer-links

rh-footer-social-link

rh-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 & 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&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

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

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

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 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 Property	Description	Default
`--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)`

CSS Property	Description	Default	Reason
`--rh-footer-nojs-min-height`	Minimum height for the footer when JavaScript is disabled	—	target `rh-footer:not(:defined) directly

Token	Description	Copy
`--rh-font-family-body-text`	Body text font family	Full CSS Variable Permalink to this token
`--rh-line-height-body-text`	Line height for body text	Full CSS Variable Permalink to this token
`--rh-color-gray-40`	Subtle icon (hover state)	Full CSS Variable Permalink to this token
`--rh-color-gray-30`	Subtle borders (light theme)	Full CSS Variable Permalink to this token
`--rh-color-border-subtle-on-dark`	Subtle border color (dark theme)	Full CSS Variable Permalink to this token
`--rh-color-accent-brand-on-light`	Brand red (light theme)	Full CSS Variable Permalink to this token
`--rh-color-white`	Lightest surface (light theme) or primary text (dark theme)	Full CSS Variable Permalink to this token
`--rh-size-icon-04`	40px icon box	Full CSS Variable Permalink to this token
`--rh-font-weight-body-text-regular`	Regular font weight	Full CSS Variable Permalink to this token
`--rh-font-family-heading`	Heading font family	Full CSS Variable Permalink to this token
`--rh-line-height-heading`	Line height for headings	Full CSS Variable Permalink to this token
`--rh-length-xl`	24px length token	Full CSS Variable Permalink to this token
`--rh-length-3xs`	2px length token	Full CSS Variable Permalink to this token
`--rh-space-xs`	4px spacer	Full CSS Variable Permalink to this token
`--rh-font-family-code`	Code font family	Full CSS Variable Permalink to this token
`--rh-font-size-code-xs`	12px font size	Full CSS Variable Permalink to this token
`--rh-length-4xs`	1px length token	Full CSS Variable Permalink to this token
`--rh-color-surface-darker`	Secondary surface (dark theme)	Full CSS Variable Permalink to this token
`--rh-color-surface-darkest`	Primary surface (dark theme)	Full CSS Variable Permalink to this token
`--rh-color-text-secondary`		Full CSS Variable Permalink to this token
`--rh-space-md`	8px spacer	Full CSS Variable Permalink to this token
`--rh-font-size-body-text-xs`	12px font size	Full CSS Variable Permalink to this token
`--rh-space-xl`	24px spacer	Full CSS Variable Permalink to this token
`--rh-font-size-body-text-lg`	18px font size	Full CSS Variable Permalink to this token
`--rh-space-lg`	16px spacer	Full CSS Variable Permalink to this token
`--rh-font-weight-heading-medium`	Medium font weight for headings	Full CSS Variable Permalink to this token
`--rh-font-size-body-text-sm`	14px font size	Full CSS Variable Permalink to this token
`--rh-color-text-primary`		Full CSS Variable Permalink to this token
`--rh-space-2xl`	32px spacer	Full CSS Variable Permalink to this token
`--rh-space-4xl`	64px spacer	Full CSS Variable Permalink to this token

Slot Name	Summary	Description
`header`
`[default]`		undefined Note: [default] unnamed slots do not have a slot="name" attribute.

None

Part Name	Summary	Description
`base`
`header`
`content`

None

Token	Description	Copy
`--rh-space-2xl`	32px spacer	Full CSS Variable Permalink to this token
`--rh-font-weight-heading-medium`	Medium font weight for headings	Full CSS Variable Permalink to this token
`--rh-font-size-body-text-sm`	14px font size	Full CSS Variable Permalink to this token
`--rh-space-lg`	16px spacer	Full CSS Variable Permalink to this token
`--rh-color-text-primary-on-dark`	Primary text color for dark theme	Full CSS Variable Permalink to this token
`--rh-color-text-secondary-on-dark`	Secondary text color for dark theme	Full CSS Variable Permalink to this token
`--rh-font-family-body-text`	Body text font family	Full CSS Variable Permalink to this token
`--rh-font-weight-body-text-regular`	Regular font weight	Full CSS Variable Permalink to this token

Slot Name	Summary	Description
`[default]`		undefined Note: [default] unnamed slots do not have a slot="name" attribute.

None

Slot Name	Summary	Description
`header`
`panel`
`[default]`		undefined Note: [default] unnamed slots do not have a slot="name" attribute.

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`

Method Name	Description
`updateAccessibility()`

None

Part Name	Summary	Description
`header`
`default`

None

Social media links for Red Hat Footer

Slot Name	Summary	Description
`[default]`		Optional icon for social link. Use only when suitable icon is unavailable with `<rh-icon>` Note: [default] unnamed slots do not have a slot="name" attribute.

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`

None

CSS Property	Description	Default
`--rh-footer--social-icon--size`		`var(--rh-size-icon-02, 24px)`

Token	Description	Copy
`--rh-size-icon-02`	24px icon box	Full CSS Variable Permalink to this token

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

Attribute	DOM Property	Description	Type	Default
`color-palette`	`colorPalette`		`'light' \| 'lighter' \| 'lightest' \| 'dark' \| 'darker' \| 'darkest'`	`'darker'`

None

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 Property	Description	Default
`--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)`

CSS Property	Description	Default	Reason
`--rh-footer-nojs-min-height`	Minimum height for the footer when JavaScript is disabled	—	target `rh-footer:not(:defined) directly

Token	Description	Copy
`--rh-font-family-body-text`	Body text font family	Full CSS Variable Permalink to this token
`--rh-line-height-body-text`	Line height for body text	Full CSS Variable Permalink to this token
`--rh-color-gray-40`	Subtle icon (hover state)	Full CSS Variable Permalink to this token
`--rh-color-gray-30`	Subtle borders (light theme)	Full CSS Variable Permalink to this token
`--rh-color-border-subtle-on-dark`	Subtle border color (dark theme)	Full CSS Variable Permalink to this token
`--rh-color-accent-brand-on-light`	Brand red (light theme)	Full CSS Variable Permalink to this token
`--rh-color-white`	Lightest surface (light theme) or primary text (dark theme)	Full CSS Variable Permalink to this token
`--rh-size-icon-04`	40px icon box	Full CSS Variable Permalink to this token
`--rh-font-weight-body-text-regular`	Regular font weight	Full CSS Variable Permalink to this token
`--rh-font-family-heading`	Heading font family	Full CSS Variable Permalink to this token
`--rh-line-height-heading`	Line height for headings	Full CSS Variable Permalink to this token
`--rh-length-xl`	24px length token	Full CSS Variable Permalink to this token
`--rh-length-3xs`	2px length token	Full CSS Variable Permalink to this token
`--rh-space-xs`	4px spacer	Full CSS Variable Permalink to this token
`--rh-font-family-code`	Code font family	Full CSS Variable Permalink to this token
`--rh-font-size-code-xs`	12px font size	Full CSS Variable Permalink to this token
`--rh-length-4xs`	1px length token	Full CSS Variable Permalink to this token
`--rh-color-surface-darker`	Secondary surface (dark theme)	Full CSS Variable Permalink to this token
`--rh-color-surface-darkest`	Primary surface (dark theme)	Full CSS Variable Permalink to this token
`--rh-color-text-secondary`		Full CSS Variable Permalink to this token
`--rh-space-md`	8px spacer	Full CSS Variable Permalink to this token
`--rh-font-size-body-text-xs`	12px font size	Full CSS Variable Permalink to this token
`--rh-space-xl`	24px spacer	Full CSS Variable Permalink to this token
`--rh-font-size-body-text-lg`	18px font size	Full CSS Variable Permalink to this token
`--rh-space-lg`	16px spacer	Full CSS Variable Permalink to this token
`--rh-font-weight-heading-medium`	Medium font weight for headings	Full CSS Variable Permalink to this token
`--rh-font-size-body-text-sm`	14px font size	Full CSS Variable Permalink to this token
`--rh-color-text-primary`		Full CSS Variable Permalink to this token
`--rh-space-2xl`	32px spacer	Full CSS Variable Permalink to this token
`--rh-space-4xl`	64px spacer	Full CSS Variable Permalink to this token

Edit this page on GitHub

Footer

Note

Other libraries

Feedback

Related elements or patterns

Red Hat legal and privacy links

Red Hat legal and privacy links