Red Hat design system

Overview Style Guidelines Code Accessibility Demos

Installation
Usage
rh-footer-block
rh-footer-copyright
rh-footer-links
rh-footer-social-link
rh-footer-universal

Installation
Usage
rh-footer-block
rh-footer-copyright
rh-footer-links
rh-footer-social-link
rh-footer-universal

Installation

We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.

Red Hat CDN

<script type="importmap">
{
  "imports": {
    "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.1/elements/",
  }
}
</script>

Copy to Clipboard Wrap lines

NPM

npm install @rhds/elements

Copy to Clipboard Wrap lines

JSPM

<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-footer/rh-footer.js": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/rh-footer/rh-footer.js"
  },
  "scopes": {
    "https://ga.jspm.io/": {
      "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.8/dist/floating-ui.core.mjs",
      "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.12/dist/floating-ui.dom.mjs",
      "@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.mjs",
      "@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.dom.mjs",
      "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.3/development/index.js",
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "@patternfly/pfe-core": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@rhds/elements/lib/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/lib/",
      "@rhds/elements/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/elements/",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/icons/ui/": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/ui/",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/css/",
      "@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/js/media.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.1/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.1/development/",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.1/",
      "prism-esm": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/prism.js",
      "prism-esm/components/": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/components/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.8.1/tslib.es6.mjs"
    }
  }
}
</script>

Copy to Clipboard Wrap lines

Add it to your page with this import statement

<script type="module">
  import '@rhds/elements/rh-footer/rh-footer.js';
</script>

Copy to Clipboard Wrap lines

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"><a href="https://www.linkedin.com/company/red-hat" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="LinkedIn">LinkedIn</a></rh-footer-social-link>
  <rh-footer-social-link slot="social-links" icon="youtube"><a href="https://www.youtube.com/user/RedHatVideos" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="YouTube">YouTube</a></rh-footer-social-link>
  <rh-footer-social-link slot="social-links" icon="facebook"><a href="https://www.facebook.com/redhatinc" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="Facebook">Facebook</a></rh-footer-social-link>
  <rh-footer-social-link slot="social-links" icon="x"><a href="https://twitter.com/RedHat" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="Twitter">X/Twitter</a></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">© 2022 Red Hat, Inc.</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	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>`

Attribute	DOM Property	Description	Type	Default
`color-palette`	`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`	Full CSS Variable Permalink to this token
`--rh-color-border-subtle-on-dark`	Full CSS Variable Permalink to this token
`--rh-color-gray-30`	Full CSS Variable Permalink to this token
`--rh-color-gray-40`	Full CSS Variable Permalink to this token
`--rh-color-interactive-primary-default-on-dark`	Full CSS Variable Permalink to this token
`--rh-color-interactive-primary-hover-on-dark`	Full CSS Variable Permalink to this token
`--rh-color-surface-darker`	Full CSS Variable Permalink to this token
`--rh-color-surface-darkest`	Full CSS Variable Permalink to this token
`--rh-color-text-primary-on-dark`	Full CSS Variable Permalink to this token
`--rh-color-text-secondary-on-dark`	Full CSS Variable Permalink to this token
`--rh-color-white`	Full CSS Variable Permalink to this token
`--rh-font-family-body-text`	Full CSS Variable Permalink to this token
`--rh-font-family-code`	Full CSS Variable Permalink to this token
`--rh-font-family-heading`	Full CSS Variable Permalink to this token
`--rh-font-size-body-text-lg`	Full CSS Variable Permalink to this token
`--rh-font-size-body-text-sm`	Full CSS Variable Permalink to this token
`--rh-font-size-body-text-xs`	Full CSS Variable Permalink to this token
`--rh-font-size-code-xs`	Full CSS Variable Permalink to this token
`--rh-font-weight-body-text-regular`	Full CSS Variable Permalink to this token
`--rh-font-weight-heading-medium`	Full CSS Variable Permalink to this token
`--rh-length-3xs`	Full CSS Variable Permalink to this token
`--rh-length-4xs`	Full CSS Variable Permalink to this token
`--rh-length-xl`	Full CSS Variable Permalink to this token
`--rh-line-height-body-text`	Full CSS Variable Permalink to this token
`--rh-line-height-heading`	Full CSS Variable Permalink to this token
`--rh-size-icon-04`	Full CSS Variable Permalink to this token
`--rh-space-2xl`	Full CSS Variable Permalink to this token
`--rh-space-4xl`	Full CSS Variable Permalink to this token
`--rh-space-lg`	Full CSS Variable Permalink to this token
`--rh-space-md`	Full CSS Variable Permalink to this token
`--rh-space-xl`	Full CSS Variable Permalink to this token
`--rh-space-xs`	Full CSS Variable Permalink to this token

None

Token	Copy
`--rh-color-text-primary-on-dark`	Full CSS Variable Permalink to this token
`--rh-color-text-secondary-on-dark`	Full CSS Variable Permalink to this token
`--rh-font-family-body-text`	Full CSS Variable Permalink to this token
`--rh-font-size-body-text-sm`	Full CSS Variable Permalink to this token
`--rh-font-weight-body-text-regular`	Full CSS Variable Permalink to this token
`--rh-font-weight-heading-medium`	Full CSS Variable Permalink to this token
`--rh-space-2xl`	Full CSS Variable Permalink to this token
`--rh-space-lg`	Full CSS Variable Permalink to this token

None

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

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

None

Token	Copy
`--rh-size-icon-02`	Full CSS Variable Permalink to this token

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`

Attribute	DOM Property	Description	Type	Default
`color-palette`	`colorPalette`		`ColorPalette`	`'darker'`

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

Edit this page on GitHub

Footer

Installation

Lightdom CSS

Note

Usage

rh-footer

rh-footer-block

rh-footer-copyright

rh-footer-links

rh-footer-universal

Other libraries

Feedback

Red Hat legal and privacy links

Red Hat legal and privacy links

Footer

Installation

Lightdom CSS

Note

Usage

rh-footer

rh-footer-block

rh-footer-copyright

rh-footer-links

rh-footer-social-link

rh-footer-universal

Other libraries

Feedback

Related elements or patterns

Red Hat legal and privacy links

Red Hat legal and privacy links