Footer
On this page
On this page
Overview
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.
Edit element properties
.visually-hidden {
border: 0;
clip: rect(0, 0, 0, 0);
block-size: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
inline-size: 1px;
}
rh-select {
margin-inline-start: auto;
inline-size: fit-content;
}
rh-footer-block p {
margin-block: 0 var(--rh-space-2xl, 32px);
}
rh-footer-block ul {
padding-inline-start: 0;
margin-block: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--rh-space-md, 8px) var(--rh-space-2xl, 32px);
}
rh-footer-block p a {
color:
var(--rh-color-interactive-primary-default,
light-dark(
var(--rh-color-interactive-primary-default-on-light, #0066cc),
var(--rh-color-interactive-primary-default-on-dark, #92c5f9)
)) !important;
text-decoration: underline;
text-decoration-thickness: var(--rh-border-width-sm, 1px);
text-decoration-style: dashed;
text-underline-offset: max(5px, 0.28em);
}
rh-footer-block p a:hover {
text-decoration-color: inherit;
text-underline-offset: max(6px, 0.33em);
}
rh-footer-block ul a {
color:
var(--rh-color-text-primary,
light-dark(
var(--rh-color-text-primary-on-light, #151515),
var(--rh-color-text-primary-on-dark, #ffffff)
));
display: inline-block;
font-size: var(--rh-font-size-body-text-sm, 0.875rem);
padding-block: var(--rh-space-xs, 4px);
text-decoration: none;
transition-timing-function: ease;
transition-property: text-underline-offset, color, text-decoration-color;
transition-duration: 0.3s;
}
rh-footer-block ul a:is(:hover, :focus, :focus-visible) {
color:
var(--rh-color-text-primary,
light-dark(
var(--rh-color-text-primary-on-light, #151515),
var(--rh-color-text-primary-on-dark, #ffffff)
));
text-decoration:
underline
var(--rh-border-width-sm, 1px)
dashed;
text-decoration-color: inherit;
text-underline-offset: max(5px, 0.28em);
}import '@rhds/elements/rh-footer/rh-footer.js';
import '@rhds/elements/rh-select/rh-select.js';<rh-footer data-analytics-region="page-footer">
<div slot="header-secondary">
<label class="visually-hidden" for="select-language">Choose page language:</label>
<rh-select id="select-language">
<rh-option value="English">English</rh-option>
<rh-option value="French">French</rh-option>
<rh-option value="Spanish">Spanish</rh-option>
</rh-select>
</div>
<h3 slot="links" data-analytics-text="Platforms">Platforms</h3>
<ul slot="links">
<li><a href="https://redhat.com/en/technologies/cloud-computing/openshift/lightspeed" data-analytics-category="Footer|Platforms" data-analytics-text="Red Hat AI">Red Hat AI</a></li>
<li><a href="https://redhat.com/en/technologies/linux-platforms/enterprise-linux" data-analytics-category="Footer|Platforms" 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|Platforms" 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|Platforms" data-analytics-text="Red Hat Ansible Automation Platform">Red Hat Ansible Automation Platform</a></li>
<li><a href="https://redhat.com/en/technologies/all-products" data-analytics-category="Footer|Platforms" 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://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://sso.redhat.com" data-analytics-category="Footer|Tools" data-analytics-text="My account">My account</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="http://redhat.force.com/finder/" data-analytics-category="Footer|Tools" data-analytics-text="Find a partner">Find a partner</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="https://docs.redhat.com/" data-analytics-category="Footer|Tools" data-analytics-text="Documentation">Documentation</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://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://console.redhat.com/" data-analytics-category="Footer|Try buy sell" 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/contact" data-analytics-category="Footer|Communicate" data-analytics-text="Contact sales">Contact sales</a></li>
<li><a href="https://redhat.com/en/services/support" data-analytics-category="Footer|Communicate" data-analytics-text="Contact customer service">Contact customer service</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>Red Hat is an open hybrid cloud technology leader, delivering a consistent, comprehensive foundation for transformative IT and artificial intelligence (AI) applications in the enterprise. As a <a href="https://redhat.com/en/about/company">trusted adviser to the Fortune 500</a>, Red Hat offers cloud, developer, Linux, automation, and application platform technologies, as well as <a href="https://redhat.com/en/about/our-culture/awards">award-winning</a> services.</p>
<ul>
<li><a href="https://redhat.com/en/about/company" data-analytics-category="Footer|About Red Hat" data-analytics-text="Our company">Our company</a></li>
<li><a href="https://redhat.com/en/about/newsroom" data-analytics-category="Footer|About Red Hat" data-analytics-text="Newsroom">Newsroom</a></li>
<li><a href="https://redhat.com/en/about/development-model" data-analytics-category="Footer|About Red Hat" data-analytics-text="How we work">How we work</a></li>
<li><a href="https://redhat.com/en/about/open-source" data-analytics-category="Footer|About Red Hat" data-analytics-text="Open source commitments">Open source commitments</a></li>
<li><a href="https://redhat.com/en/success-stories" data-analytics-category="Footer|About Red Hat" data-analytics-text="Customer success stories">Customer success stories</a></li>
<li><a href="https://redhat.com/en/about/social-responsibility" data-analytics-category="Footer|About Red Hat" data-analytics-text="Our social impact">Our social impact</a></li>
<li><a href="https://redhat.com/en/about/analyst-relations" data-analytics-category="Footer|About Red Hat" data-analytics-text="Analyst relations">Analyst relations</a></li>
<li><a href="https://redhat.com/en/jobs" data-analytics-category="Footer|About Red Hat" data-analytics-text="Jobs">Jobs</a></li>
</ul>
</rh-footer-block>
<!-- Universal Footer -->
<rh-footer-universal slot="universal">
<h3 slot="links-primary" data-analytics-text="Red Hat corporate links" hidden="">Red Hat corporate 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>
<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">Digital accessibility</a></li>
<li><a href="#" data-analytics-category="Footer|Red Hat legal and privacy links" data-analytics-text="Cookie preferences">Cookie preferences</a></li>
</ul>
<rh-footer-copyright slot="tertiary">© 2026 Red Hat</rh-footer-copyright>
<rh-footer-links slot="tertiary" role="list" accessible-label="Red Hat social media links">
<rh-footer-social-link 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 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 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 icon="x" href="https://twitter.com/RedHat" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="X/Twitter" accessible-label="X/Twitter"></rh-footer-social-link>
<rh-footer-social-link icon="instagram" href="https://www.instagram.com/redhat" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="Instagram" accessible-label="Instagram"></rh-footer-social-link>
</rh-footer-links>
</rh-footer-universal>
</rh-footer>
<link rel="stylesheet" href="../rh-footer-lightdom.css">
<link rel="stylesheet" href="../rh-footer-lightdom-undefined.css">
<link rel="stylesheet" href="../rh-footer-universal-lightdom.css">
<link rel="stylesheet" href="../rh-footer-universal-lightdom-undefined.css">import { Footer } from "@rhds/elements/react/rh-footer/rh-footer.js";
import { FooterBlock } from "@rhds/elements/react/rh-footer-block/rh-footer-block.js";
import { FooterCopyright } from "@rhds/elements/react/rh-footer-copyright/rh-footer-copyright.js";
import { FooterLinks } from "@rhds/elements/react/rh-footer-links/rh-footer-links.js";
import { FooterSocialLink } from "@rhds/elements/react/rh-footer-social-link/rh-footer-social-link.js";
import { FooterUniversal } from "@rhds/elements/react/rh-footer-universal/rh-footer-universal.js";
import { Option } from "@rhds/elements/react/rh-option/rh-option.js";
import { Select } from "@rhds/elements/react/rh-select/rh-select.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Footer data-analytics-region="page-footer">
<div slot="header-secondary">
<label className="visually-hidden" htmlFor="select-language">Choose page language:</label>
<Select id="select-language">
<Option value="English">English</Option>
<Option value="French">French</Option>
<Option value="Spanish">Spanish</Option>
</Select>
</div>
<h3 slot="links" data-analytics-text="Platforms">Platforms</h3>
<ul slot="links">
<li>
<a href="https://redhat.com/en/technologies/cloud-computing/openshift/lightspeed" data-analytics-category="Footer|Platforms" data-analytics-text="Red Hat AI">Red Hat AI</a>
</li>
<li>
<a href="https://redhat.com/en/technologies/linux-platforms/enterprise-linux" data-analytics-category="Footer|Platforms" 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|Platforms" 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|Platforms" data-analytics-text="Red Hat Ansible Automation Platform">Red Hat Ansible Automation Platform</a>
</li>
<li>
<a href="https://redhat.com/en/technologies/all-products" data-analytics-category="Footer|Platforms" 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://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://sso.redhat.com" data-analytics-category="Footer|Tools" data-analytics-text="My account">My account</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="http://redhat.force.com/finder/" data-analytics-category="Footer|Tools" data-analytics-text="Find a partner">Find a partner</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="https://docs.redhat.com/" data-analytics-category="Footer|Tools" data-analytics-text="Documentation">Documentation</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://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://console.redhat.com/" data-analytics-category="Footer|Try buy sell" 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/contact" data-analytics-category="Footer|Communicate" data-analytics-text="Contact sales">Contact sales</a>
</li>
<li>
<a href="https://redhat.com/en/services/support" data-analytics-category="Footer|Communicate" data-analytics-text="Contact customer service">Contact customer service</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>
<FooterBlock slot="main-secondary">
<h3 slot="header" data-analytics-text="About Red Hat">About Red Hat</h3>
<p>
Red Hat is an open hybrid cloud technology leader, delivering a consistent, comprehensive foundation for transformative IT and artificial intelligence (AI) applications in the enterprise. As a
<a href="https://redhat.com/en/about/company">trusted adviser to the Fortune 500</a>
, Red Hat offers cloud, developer, Linux, automation, and application platform technologies, as well as
<a href="https://redhat.com/en/about/our-culture/awards">award-winning</a>
services.
</p>
<ul>
<li>
<a href="https://redhat.com/en/about/company" data-analytics-category="Footer|About Red Hat" data-analytics-text="Our company">Our company</a>
</li>
<li>
<a href="https://redhat.com/en/about/newsroom" data-analytics-category="Footer|About Red Hat" data-analytics-text="Newsroom">Newsroom</a>
</li>
<li>
<a href="https://redhat.com/en/about/development-model" data-analytics-category="Footer|About Red Hat" data-analytics-text="How we work">How we work</a>
</li>
<li>
<a href="https://redhat.com/en/about/open-source" data-analytics-category="Footer|About Red Hat" data-analytics-text="Open source commitments">Open source commitments</a>
</li>
<li>
<a href="https://redhat.com/en/success-stories" data-analytics-category="Footer|About Red Hat" data-analytics-text="Customer success stories">Customer success stories</a>
</li>
<li>
<a href="https://redhat.com/en/about/social-responsibility" data-analytics-category="Footer|About Red Hat" data-analytics-text="Our social impact">Our social impact</a>
</li>
<li>
<a href="https://redhat.com/en/about/analyst-relations" data-analytics-category="Footer|About Red Hat" data-analytics-text="Analyst relations">Analyst relations</a>
</li>
<li>
<a href="https://redhat.com/en/jobs" data-analytics-category="Footer|About Red Hat" data-analytics-text="Jobs">Jobs</a>
</li>
</ul>
</FooterBlock>
<FooterUniversal slot="universal">
<h3 slot="links-primary" data-analytics-text="Red Hat corporate links" hidden>Red Hat corporate 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>
<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">Digital accessibility</a>
</li>
<li>
<a href="#" data-analytics-category="Footer|Red Hat legal and privacy links" data-analytics-text="Cookie preferences">Cookie preferences</a>
</li>
</ul>
<FooterCopyright slot="tertiary">© 2026 Red Hat</FooterCopyright>
<FooterLinks slot="tertiary" role="list" accessible-label="Red Hat social media links">
<FooterSocialLink 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" />
<FooterSocialLink 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" />
<FooterSocialLink 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" />
<FooterSocialLink icon="x" href="https://twitter.com/RedHat" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="X/Twitter" accessible-label="X/Twitter" />
<FooterSocialLink icon="instagram" href="https://www.instagram.com/redhat" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="Instagram" accessible-label="Instagram" />
</FooterLinks>
</FooterUniversal>
</Footer>
<link rel="stylesheet" href="../rh-footer-lightdom.css" />
<link rel="stylesheet" href="../rh-footer-lightdom-undefined.css" />
<link rel="stylesheet" href="../rh-footer-universal-lightdom.css" />
<link rel="stylesheet" href="../rh-footer-universal-lightdom-undefined.css" />
);Accessible name for the default social links list (slot="social-links").
Applied as accessible-label on the inner <rh-footer-links>. Localize
surrounding words; keep "Red Hat" except in Simplified Chinese (红帽).
Override only when the accounts are not corporate Red Hat. Has no effect
when authors replace header-secondary or put social links in the
universal tertiary slot. Defaults to 'Red Hat social media links'.
Sets color palette, which affects the footer's styles and descendants'
color scheme. Overrides parent color context. Accepts all six palettes.
Surfaces collapse via light-dark(): domain header/main use lighter
(light) / darker (dark); universal uses lightest (light) / darkest (dark).
Defaults to undefined (inherits from parent; light on a bare page).
Apply color-palette="darkest" to keep a dark footer.
Sets the href for the logo link. Applies whether or not the logo slot
is overridden. Avoid changing this value except for a locale-specific
redhat.com homepage (e.g. https://www.redhat.com/ja). Defaults to
'https://www.redhat.com/en'.
Optional accessible name for the logo link. When set, applied as
aria-label on the wrapping <a> and overrides slotted text, SVG
<title>, or img alt. Leave unset so the slotted mark or the
default SVG title names the link. Defaults to ''.
Status
What do these mean?
- Figma library:
-
Ready - RH Elements:
-
Ready - RH Shared Libs:
-
Ready
When to use
- Organize secondary content or legal information that does not fit anywhere else
- Give users persistent access to secondary content outside of the navigation
Status checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| RH Elements |
|
Component is available in RH Elements |
| RH Shared Libs |
|
Component is available in RH Shared Libs |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
