Skip to main content Red Hat Design System logo Contribute on Github

Footer

Overview Style Guidelines Code Demos Accessibility

Installation

Red Hat CDN

CDN Prerelease

We are currently working on our CDN, which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat associate and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

In the meantime, install this component using npm

The recommended way to load RHDS is via the Red Hat Digital Experience CDN, and using an import map.

If you have full control over the page you are using, add an import map to the <head>, pointing to the CDN, or update any existing import map. If you are not responsible for the page's <head>, request that the page owner makes the change on your behalf.

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

Once the import map is established, you can load the element with the following module, containing a bare module specifier:

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

Note that Modules may be placed in the <head>: since they are deferred by default, they will not block rendering.

Lightdom CSS

Lightdom CSS is required for this element to ensure a reduced Cumulative Layout Shift (CLS) experience before the element has fully initialized.

<link rel="stylesheet" href="https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@1.1.0/rh-footer/rh-footer-lightdom.css">
 NPM

Install RHDS using your team's preferred NPM package manager, e.g.

npm install @rhds/elements

Once that's been accomplished, you will need to use a bundler to resolve the bare module specifiers and optionally optimize the package for your site's particular use case and needs. Comprehensive guides to bundling are beyond the scope of this page; read more about bundlers on their websites:

Lightdom CSS

Lightdom CSS is required for this element to ensure a reduced Cumulative Layout Shift (CLS) experience before the element has fully initialized.

<link rel="stylesheet" href="/path/to/@rhds/elements/elements/rh-footer/rh-footer-lightdom.css">

Replace /path/to in the href attribute with the installation path to the rh-footer directory in your project.

 JSPM

Public CDNs

JSPM and other public CDNs should not be used on corporate domains. Use them for development purposes only!

Add an import map to the <head>, pointing to the CDN, or update any existing import map.

<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://jspm.dev/@rhds/elements/",
      "@patternfly/elements/": "https://jspm.dev/@patternfly/elements/"
    }
  }
</script>

Once the import map is established, you can load the element with the following module, containing a bare module specifier:

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

Note that Modules may be placed in the <head>: since they are deferred by default, they will not block rendering.

Lightdom CSS

Lightdom CSS is required for this element to ensure a reduced Cumulative Layout Shift (CLS) experience before the element has fully initialized.

<link rel="stylesheet" href="https://jspm.dev/@rhds/elements@1.1.0/elements/rh-footer/rh-footer-lightdom.css">
Slots 12 1
Slot Name Description
base

Overrides everything. Do not use.
header

Overrides header-*, logo, social-links
header-primary

primary footer header content, e.g. main logo. Overrides logo
header-secondary

secondary footer header content, e.g. social links. Overrides social-links
heading

text that describes the footer section to assistive tecchnology. Contains default text "Red Hat footer".
logo

main page or product logo. Defaults to Red Hat corporate logo
social-links

social media links (icons). Contains a default set of links
main

main footer content. Overrides main-*
main-primary

main footer region. typically a columnar grid
links

main footer links
main-secondary

typically contains prose or promotional content
universal

must contain <rh-footer-universal>
Deprecated Slots

Slot Name Description
global

must contain <rh-footer-universal>

Note: global is deprecated.

  • use universal
Attributes 1
DOM Property Description Type Default
colorPalette 
ColorPalette
 
'darker'
Methods 1
Method Name Description
updateAccessibility()

Get any <ul>s that are in the designated link slots and synchronously update each list and header if we need to.
Events 0

None

 CSS Shadow Parts 12
Part Name Description
base

main footer element, containing all footer content
header

footer header, typically containing main logo and social links
header-primary

primary footer header content, e.g. main logo
header-secondary

secondary footer header content, e.g. social links
logo

main page or product logo container
social-links

social links container <rh-footer-links>
main

main content container.
main-primary

container for main footer links
links

container for main footer links
links-accordion-header

mobile links accordion header element
links-accordion-panel

mobile links panel container element
main-secondary

container fro prose or promotional content
CSS Custom Properties 8
CSS Property Description Default
--rh-footer-icon-color #8a8d90
--rh-footer-icon-color-hover #b8bbbe
--rh-footer-border-color #6a6e73
--rh-footer-accent-color #e00
--rh-footer-section-side-gap 16px
--rh-footer-links-gap 8px
--rh-footer-link-header-font-size 0.875em
--rh-footer-nojs-min-height 750px
Design Tokens 0

None

Slots 12
Slot Name Description
heading

text that describes the footer section to assistive tecchnology. Contains default text "Red Hat footer".
logo
logo-image
primary
primary-start
primary-end
secondary
secondary-start
secondary-end
links-primary
links-secondary
tertiary
Attributes 1
DOM Property Description Type Default
colorPalette 
ColorPalette
 
'darker'
Methods 0

None

 Events 0

None

 CSS Shadow Parts 13
Part Name Description
base
base
logo
logo-image
primary
primary-start
primary-end
secondary
secondary-start
secondary-end
links-primary
links-secondary
tertiary
CSS Custom Properties 0

None

 Design Tokens 0

None

Slots 0

None

 Attributes 0

None

 Methods 0

None

 Events 0

None

 CSS Shadow Parts 0

None

 CSS Custom Properties 0

None

 Design Tokens 0

None

Slots 0

None

 Attributes 0

None

 Methods 0

None

 Events 0

None

 CSS Shadow Parts 0

None

 CSS Custom Properties 0

None

 Design Tokens 0

None

Slots 0

None

 Attributes 1
DOM Property Description Type Default
headerHidden

Cause the header slot to be visually hidden. Setting this to true will not affect aria-labelledby.

 
boolean
 
false
Methods 1
Method Name Description
updateAccessibility()
Events 0

None

 CSS Shadow Parts 0

None

 CSS Custom Properties 0

None

 Design Tokens 0

None

Slots 0

None

 Attributes 1
DOM Property Description Type Default
icon 
string | undefined
 
unknown
Methods 0

None

 Events 0

None

 CSS Shadow Parts 0

None

 CSS Custom Properties 0

None

 Design Tokens 0

None
© 2021-2024 Red Hat, Inc. Deploys by Netlify