Footer Since v1.0.0

.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, &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://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" />
);

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 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;
}

import '@rhds/elements/rh-footer/rh-footer.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';

<rh-context-demo>
  <rh-footer data-analytics-region="page-footer">

    <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>
    </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>
    </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://www.redhat.com/en/store" data-analytics-category="Footer|Try buy sell" data-analytics-text="Red Hat Store">Red Hat Store</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>
    </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>
      </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>
      </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>
      </ul>
      <rh-footer-copyright slot="tertiary">© 2026 Red Hat</rh-footer-copyright>
      <rh-footer-links slot="tertiary" role="list">
        <rh-footer-social-link icon="linkedin" href="https://www.linkedin.com/company/red-hat" accessible-label="LinkedIn"></rh-footer-social-link>
        <rh-footer-social-link icon="youtube" href="https://www.youtube.com/user/RedHatVideos" accessible-label="YouTube"></rh-footer-social-link>
        <rh-footer-social-link icon="facebook" href="https://www.facebook.com/redhatinc" accessible-label="Facebook"></rh-footer-social-link>
        <rh-footer-social-link icon="x" href="https://twitter.com/RedHat" accessible-label="X/Twitter"></rh-footer-social-link>
      </rh-footer-links>
    </rh-footer-universal>
  </rh-footer>
</rh-context-demo>

<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 { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";
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";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ContextDemo>
    <Footer data-analytics-region="page-footer">
      <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>
      </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>
      </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>
      </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>
      </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>
        </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>
        </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>
        </ul>
        <FooterCopyright slot="tertiary">© 2026 Red Hat</FooterCopyright>
        <FooterLinks slot="tertiary" role="list">
<FooterSocialLink icon="linkedin" href="https://www.linkedin.com/company/red-hat" accessible-label="LinkedIn" />
<FooterSocialLink icon="youtube" href="https://www.youtube.com/user/RedHatVideos" accessible-label="YouTube" />
<FooterSocialLink icon="facebook" href="https://www.facebook.com/redhatinc" accessible-label="Facebook" />
<FooterSocialLink icon="x" href="https://twitter.com/RedHat" accessible-label="X/Twitter" />
        </FooterLinks>
      </FooterUniversal>
    </Footer>
  </ContextDemo>
  <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 '@rhds/elements/rh-footer/rh-footer-universal.js';
import '@rhds/elements/rh-footer/rh-footer-links.js';
import '@rhds/elements/rh-footer/rh-footer-social-link.js';

<rh-footer-universal color-palette="darkest">
  <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>

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