Red Hat design system

Overview Style Guidelines Code Demos Accessibility

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

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

Installation

Learn more about how to install on our getting started docs.

Red Hat CDN

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

Import Map Example

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

NPM

npm install @rhds/elements

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

JSPM

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

Import Map Example

<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-footer/rh-footer.js": "./elements/rh-footer/rh-footer.js"
  },
  "scopes": {
    "./": {
      "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.2/development/index.js",
      "@patternfly/pfe-core": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/core.js",
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/core.js",
      "@rhds/elements/lib/context/headings/controller.js": "./lib/context/headings/controller.js",
      "@rhds/elements/": "./elements/",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/css/",
      "@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/js/media.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-html/directives/if-defined.js": "https://ga.jspm.io/npm:lit-html@3.2.0/development/directives/if-defined.js",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    },
    "https://ga.jspm.io/": {
      "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.2/development/index.js",
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "@patternfly/pfe-core/controllers/property-observer-controller.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/controllers/property-observer-controller.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    }
  }
}
</script>

Lightdom CSS

This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.

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

Note

Replace /path/to/ with path to the CSS file, whether local or CDN.

Slot Name	Description
`base`	Overrides everything. Do not use.
`header`	Overrides `header-*`, `logo`, `social-links`
`header-primary`	primary footer header content, e.g. main logo. Overrides `logo`
`header-secondary`	secondary footer header content, e.g. social links. Overrides `social-links`
`heading`	text that describes the footer section to assistive tecchnology. Contains default text "Red Hat footer".
`logo`	main page or product logo. Defaults to Red Hat corporate logo
`social-links`	social media links (icons). Contains a default set of links
`main`	main footer content. Overrides `main-*`
`main-primary`	main footer region. typically a columnar grid
`links`	main footer links
`main-secondary`	typically contains prose or promotional content
`universal`	must contain `<rh-footer-universal>`

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

Method Name	Description
`updateAccessibility()`	Get any `<ul>`s that are in the designated link slots and synchronously update each list and header if we need to.

None

Part Name	Description
`base`	main footer element, containing all footer content
`header`	footer header, typically containing main logo and social links
`header-primary`	primary footer header content, e.g. main logo
`header-secondary`	secondary footer header content, e.g. social links
`logo`	main page or product logo container
`social-links`	social links container `<rh-footer-links>`
`main`	main content container.
`main-primary`	container for main footer links
`links`	container for main footer links
`links-accordion-header`	mobile links accordion header element
`links-accordion-panel`	mobile links panel container element
`main-secondary`	container fro prose or promotional content

CSS Property	Description	Default
`--rh-footer-icon-color`		`#8a8d90`
`--rh-footer-icon-color-hover`		`#b8bbbe`
`--rh-footer-border-color`		`#6a6e73`
`--rh-footer-accent-color`		`#e00`
`--rh-footer-section-side-gap`		`16px`
`--rh-footer-links-gap`		`8px`
`--rh-footer-link-header-font-size`		`0.875em`
`--rh-footer-nojs-min-height`		`750px`

Token	Copy
`--rh-color-accent-brand-on-light`
`--rh-color-border-subtle-on-dark`
`--rh-color-gray-30`
`--rh-color-gray-40`
`--rh-color-interactive-primary-default-on-dark`
`--rh-color-interactive-primary-hover-on-dark`
`--rh-color-surface-darker`
`--rh-color-surface-darkest`
`--rh-color-text-primary-on-dark`
`--rh-color-text-secondary-on-dark`
`--rh-color-white`
`--rh-font-family-body-text`
`--rh-font-family-code`
`--rh-font-family-heading`
`--rh-font-size-body-text-lg`
`--rh-font-size-body-text-sm`
`--rh-font-size-body-text-xs`
`--rh-font-size-code-xs`
`--rh-font-weight-body-text-regular`
`--rh-font-weight-heading-medium`
`--rh-length-3xs`
`--rh-length-4xs`
`--rh-length-xl`
`--rh-line-height-body-text`
`--rh-line-height-heading`
`--rh-size-icon-04`
`--rh-space-2xl`
`--rh-space-4xl`
`--rh-space-lg`
`--rh-space-md`
`--rh-space-xl`
`--rh-space-xs`

Slot Name	Description
`heading`	text that describes the footer section to assistive tecchnology. Contains default text "Red Hat footer".
`logo`
`logo-image`
`primary`
`primary-start`
`primary-end`
`secondary`
`secondary-start`
`secondary-end`
`links-primary`
`links-secondary`
`tertiary`

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

None

Part Name	Description
`base`
`base`
`logo`
`logo-image`
`primary`
`primary-start`
`primary-end`
`secondary`
`secondary-start`
`secondary-end`
`links-primary`
`links-secondary`
`tertiary`

None

Token	Copy
`--rh-color-text-primary-on-dark`
`--rh-color-text-secondary-on-dark`
`--rh-font-family-body-text`
`--rh-font-size-body-text-sm`
`--rh-font-weight-body-text-regular`
`--rh-font-weight-heading-medium`
`--rh-space-2xl`
`--rh-space-lg`

None

Attribute	DOM Property	Description	Type	Default
`header-hidden`	`headerHidden`	Cause the header slot to be visually hidden. Setting this to true will not affect `aria-labelledby`.	`boolean`	`false`

Method Name	Description
`updateAccessibility()`

None

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

None

Token	Copy
`--rh-size-icon-02`

Edit this page on GitHub

Footer

Installation

Lightdom CSS

Note

rh-footer

rh-footer-universal

rh-footer-block

rh-footer-copyright

rh-footer-links

Other libraries

Feedback

Red Hat legal and privacy links

Red Hat legal and privacy links

Footer

Installation

Lightdom CSS

Note

rh-footer

rh-footer-universal

rh-footer-block

rh-footer-copyright

rh-footer-links

rh-footer-social-link

Other libraries

Feedback

Related elements or patterns

Red Hat legal and privacy links

Red Hat legal and privacy links