Footer
On this page
Importing
Add rh-footer to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-footer/rh-footer.js';
</script>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
<meta itemprop="description" content="Full website footer with logo, social links, navigation columns, promotional blocks, and universal footer section.">
<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>rh-footer
Provides navigation, social icons, and legal content at the bottom
of a page. Columns collapse into an accordion on small viewports.
MUST contain <rh-footer-universal> in the universal slot.
SHOULD add headings before each <ul> for aria-labelledby.
MUST NOT wrap in <footer> — sets ARIA contentinfo role via
ElementInternals. Tab moves focus; Enter/Space expands accordions.
Slots
| Slot Name | Summary | Description |
|---|---|---|
|
Visually-hidden heading announced by screen readers to identify the footer landmark. Expects inline text. Defaults to "Red Hat footer". |
||
|
Overrides the entire footer layout. AVOID using; it replaces all default regions including ARIA landmarks. Expects block-level elements. |
||
|
Overrides header-primary, header-secondary, logo, and social-links slots. Expects block-level elements. |
||
|
Primary footer header content. Overrides the logo slot. Expects block-level elements such as an anchor wrapping an image. |
||
|
Main page or product logo. Expects an anchor wrapping an |
||
|
Secondary footer header content. Overrides the social-links slot. Expects block-level elements. |
||
|
Social media icon links. Expects |
||
|
Overrides the main-primary and main-secondary slots. Expects block-level elements. |
||
|
Main footer region displayed as a columnar grid. Expects block-level elements. |
||
|
Prose or promotional content such as |
||
|
MUST contain an |
Attributes
None
Methods
| Method Name | Description |
|---|---|
|
|
Get any |
Events
None
CSS Shadow Parts
| Part Name | Summary | Description |
|---|---|---|
|
|
main footer container, containing all footer content. |
|
|
|
footer header, typically containing main logo and social links |
|
|
|
primary footer header content, e.g. main logo |
|
|
|
main page or product logo container |
|
|
|
secondary footer header content, e.g. social links |
|
|
|
social links container |
|
|
|
main content container. |
|
|
|
main content container. |
|
|
|
container for main footer links |
|
|
|
container for main footer links |
|
|
|
container for prose or promotional content |
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--rh-footer-icon-color |
Fill color for social-link icons.
Overrides the |
var(--rh-color-gray-40, #a3a3a3)
|
--rh-footer-icon-color-hover |
Fill color for social-link icons on hover or focus.
Overrides the |
var(--rh-color-gray-30, #c7c7c7)
|
--rh-footer-border-color |
Color of horizontal rule borders between footer sections.
Overrides the |
var(--rh-color-border-subtle-on-dark, #707070)
|
--rh-footer-accent-color |
Brand accent color used for decorative highlights.
Overrides the |
var(--rh-color-accent-brand-on-light, #ee0000)
|
--rh-footer-section-side-gap |
Inline padding on each footer section.
Overrides the |
var(--rh-space-lg, 16px)
|
--pf-global--spacer--xl |
Gap between promotional blocks in the secondary region |
32px
|
--rh-footer-links-gap |
Vertical gap between link items in a column.
Overrides the |
var(--rh-space-lg, 16px)
|
--rh-footer-link-header-font-size |
Font size for link-column headings.
Overrides the |
var(--rh-font-size-body-text-sm, 0.875rem)
|
Deprecated CSS Custom Properties
| 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 |
Design Tokens
| Token | Description | Copy |
|---|---|---|
--rh-font-family-body-text
|
Body text font family |
|
--rh-line-height-body-text
|
Line height for body text |
|
--rh-color-gray-40
|
Subtle icon (hover state) |
|
--rh-color-gray-30
|
Subtle borders (light theme) |
|
--rh-color-border-subtle-on-dark
|
Subtle border color (dark theme) |
|
--rh-color-accent-brand-on-light
|
Brand red (light theme) |
|
--rh-color-white
|
Lightest surface (light theme) or primary text (dark theme) |
|
--rh-size-icon-04
|
40px icon box |
|
--rh-font-weight-body-text-regular
|
Regular font weight |
|
--rh-font-family-heading
|
Heading font family |
|
--rh-line-height-heading
|
Line height for headings |
|
--rh-length-xl
|
24px length token |
|
--rh-length-3xs
|
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
|
1px length token |
|
--rh-color-surface-darker
|
Secondary surface (dark theme) |
|
--rh-color-surface-darkest
|
Primary surface (dark theme) |
|
--rh-color-text-secondary
|
Secondary text color for legal and copyright content in the universal footer. |
|
--rh-space-md
|
8px spacer |
|
--rh-font-size-body-text-xs
|
12px font size |
|
--rh-space-xl
|
24px spacer |
|
--rh-font-size-body-text-lg
|
18px font size |
|
--rh-space-lg
|
16px spacer |
|
--rh-font-weight-heading-medium
|
Medium font weight for headings |
|
--rh-font-size-body-text-sm
|
14px font size |
|
--rh-color-text-primary
|
Primary text color for link-column headings.
Uses the |
|
--rh-space-2xl
|
32px spacer |
|
--rh-space-4xl
|
64px spacer |
|
rh-footer-block
Slots
| Slot Name | Summary | Description |
|---|---|---|
|
undefined |
Attributes
None
Methods
None
Events
None
CSS Shadow Parts
| Part Name | Summary | Description |
|---|---|---|
|
|
||
|
|
||
|
|
CSS Custom Properties
None
Design Tokens
| Token | Description | Copy |
|---|---|---|
--rh-space-2xl
|
32px spacer |
|
--rh-font-weight-heading-medium
|
Medium font weight for headings |
|
--rh-font-size-body-text-sm
|
14px font size |
|
--rh-space-lg
|
16px spacer |
|
--rh-color-text-primary-on-dark
|
Primary text color for dark theme |
|
--rh-color-text-secondary-on-dark
|
Secondary text color for dark theme |
|
--rh-font-family-body-text
|
Body text font family |
|
--rh-font-weight-body-text-regular
|
Regular font weight |
|
rh-footer-copyright
Slots
| Slot Name | Summary | Description |
|---|---|---|
|
undefined |
Attributes
None
Methods
None
Events
None
CSS Shadow Parts
None
CSS Custom Properties
None
Design Tokens
None
rh-footer-links
Slots
| Slot Name | Summary | Description |
|---|---|---|
|
undefined |
Attributes
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
|
|
headerHidden |
Cause the header slot to be visually hidden.
Setting this to true will not affect |
|
|
Methods
| Method Name | Description |
|---|---|
|
|
Events
None
CSS Shadow Parts
| Part Name | Summary | Description |
|---|---|---|
|
|
||
|
|
CSS Custom Properties
None
Design Tokens
None
rh-footer-social-link
Social media links for Red Hat Footer
Slots
| Slot Name | Summary | Description |
|---|---|---|
|
Optional icon for social link. Use only when suitable icon is unavailable with |
Attributes
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
|
|
icon |
Icon for this social link e.g. |
|
|
|
|
href |
Social link address |
|
|
|
|
accessibleLabel |
Textual label for the social link e.g. "Instagram" |
|
|
Methods
None
Events
None
CSS Shadow Parts
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--rh-footer--social-icon--size |
var(--rh-size-icon-02, 24px)
|
Design Tokens
| Token | Description | Copy |
|---|---|---|
--rh-size-icon-02
|
24px icon box |
|
rh-footer-universal
Abbreviated footer for content shared across all Red Hat sites. Use
standalone or inside <rh-footer>. MUST NOT be wrapped in a native
<footer> — when standalone, sets the ARIA contentinfo landmark
role via ElementInternals. SHOULD include a heading slot for screen
readers. Tab moves focus between links. No special keyboard
interaction beyond standard link navigation.
Slots
| Slot Name | Summary | Description |
|---|---|---|
|
Visually-hidden heading announced by screen readers to identify the footer landmark. Expects inline text. Defaults to "Red Hat footer". |
||
|
Replaces the default layout. AVOID using; it removes all built-in ARIA structure. Expects block-level elements. |
||
|
Logo or brand mark. Expects an anchor wrapping an |
||
|
Content for the primary row. Expects block-level elements using the primary-start, links-primary, and primary-end slots. |
||
|
Optional content at the start of the primary row. Expects block-level elements. |
||
|
Primary links (e.g. About, Contact). Expects a heading and |
||
|
Optional content at the end of the primary row (e.g. |
||
|
Content for the secondary row. Expects block-level elements using the secondary-start, links-secondary, and secondary-end slots. |
||
|
Optional content at the start of the secondary row. Expects block-level elements. |
||
|
Secondary links (e.g. Privacy, Terms). Expects a heading and |
||
|
Optional content at the end of the secondary row. Expects block-level elements. |
||
|
Tertiary content below primary and secondary rows. Expects block-level elements. |
Attributes
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
|
|
colorPalette |
Color palette for the footer surface and text. Use design-system values (e.g. light, darker). Should contrast with adjacent layout; avoid matching a dark universal footer to a dark nav bar. |
|
|
Methods
None
Events
None
CSS Shadow Parts
| Part Name | Summary | Description |
|---|---|---|
|
|
Wrapper for the universal footer content (logo, primary, secondary, tertiary). |
|
|
|
Wrapper for the universal footer content (logo, primary, secondary, tertiary). |
|
|
|
Container for the logo slot. |
|
|
|
Link wrapping the logo; defaults to redhat.com. |
|
|
|
Logo image or SVG element. |
|
|
|
Primary row (start, links, end). |
|
|
|
Left area of the primary row. |
|
|
|
Main link list area in the primary row. |
|
|
|
Right area of the primary row. |
|
|
|
Spacer between primary and secondary rows. |
|
|
|
Secondary row (start, links, end). |
|
|
|
Left area of the secondary row. |
|
|
|
Main link list area in the secondary row. |
|
|
|
Right area of the secondary row. |
|
|
|
Optional bottom section (e.g. copyright, extra text). |
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--rh-footer-icon-color |
Fill color for social-link icons.
Overrides the |
var(--rh-color-gray-40, #a3a3a3)
|
--rh-footer-icon-color-hover |
Fill color for social-link icons on hover or focus.
Overrides the |
var(--rh-color-gray-30, #c7c7c7)
|
--rh-footer-border-color |
Color of horizontal rule borders between footer sections.
Overrides the |
var(--rh-color-border-subtle-on-dark, #707070)
|
--rh-footer-accent-color |
Brand accent color used for decorative highlights.
Overrides the |
var(--rh-color-accent-brand-on-light, #ee0000)
|
--rh-footer-section-side-gap |
Inline padding on each footer section.
Overrides the |
var(--rh-space-lg, 16px)
|
--pf-global--spacer--xl |
Gap between promotional blocks in the secondary region |
32px
|
--rh-footer-links-gap |
Vertical gap between link items in a column.
Overrides the |
var(--rh-space-lg, 16px)
|
--rh-footer-link-header-font-size |
Font size for link-column headings.
Overrides the |
var(--rh-font-size-body-text-sm, 0.875rem)
|
Deprecated CSS Custom Properties
| 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 |
Design Tokens
| Token | Description | Copy |
|---|---|---|
--rh-font-family-body-text
|
Body text font family |
|
--rh-line-height-body-text
|
Line height for body text |
|
--rh-color-gray-40
|
Subtle icon (hover state) |
|
--rh-color-gray-30
|
Subtle borders (light theme) |
|
--rh-color-border-subtle-on-dark
|
Subtle border color (dark theme) |
|
--rh-color-accent-brand-on-light
|
Brand red (light theme) |
|
--rh-color-white
|
Lightest surface (light theme) or primary text (dark theme) |
|
--rh-size-icon-04
|
40px icon box |
|
--rh-font-weight-body-text-regular
|
Regular font weight |
|
--rh-font-family-heading
|
Heading font family |
|
--rh-line-height-heading
|
Line height for headings |
|
--rh-length-xl
|
24px length token |
|
--rh-length-3xs
|
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
|
1px length token |
|
--rh-color-surface-darker
|
Secondary surface (dark theme) |
|
--rh-color-surface-darkest
|
Primary surface (dark theme) |
|
--rh-color-text-secondary
|
Secondary text color for legal and copyright content in the universal footer. |
|
--rh-space-md
|
8px spacer |
|
--rh-font-size-body-text-xs
|
12px font size |
|
--rh-space-xl
|
24px spacer |
|
--rh-font-size-body-text-lg
|
18px font size |
|
--rh-space-lg
|
16px spacer |
|
--rh-font-weight-heading-medium
|
Medium font weight for headings |
|
--rh-font-size-body-text-sm
|
14px font size |
|
--rh-color-text-primary
|
Primary text color for link-column headings.
Uses the |
|
--rh-space-2xl
|
32px spacer |
|
--rh-space-4xl
|
64px spacer |
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
