App Footer

Updated in v7.0.0

A footer that appears on every screen to display supplementary information and links.

The App Footer is a universal component designed to provide essential links and content at the bottom of the application.

Usage

When to use

On every screen of an application where universal links or content are required.

Order of content

While the Ember component allows flexibility in the ordering of links and content, we recommend the following structure for a consistent visual appearance across applications:

StatusLink
LegalLinks
Additional links
Plain text items (or metadata, such as version numbers)
Copyright

Example of the recommended order of content within the App Footer

Status link

The StatusLink is used to communicate the application status via a third-party service or tool (such as statuspage.io). If needed, the status can be customized to suit the specific product needs.

Example of status link options

Legal links

A set of standard legal links are provided by default. These are recommended for customer-facing products, but can be turned on/off within the component as needed.

Example of the App Footer with legal links only

Additional links

Additional links can be added as necessary. Common examples may include linking to a changelog, GitHub, etc.

Example of the App Footer with additional links

Plain text items

Plain text content can be added after the links. This is often used for displaying the version number or other metadata related to the product.

Example of the App Footer with plain text list items

Extra content blocks

Extra content blocks are available before the list of links and before the copyright.

Example of where additional content can go in the App Footer

The extra content block can be used to add quick interactions that change the whole application, e.g., a theme switcher.

Example of what additional content can go in the App Footer

Don’t

Avoid adding information that's critical to the user's journey in the App Footer.

Example of what additional content should not go in the App Footer

Themes

The App Footer supports both Light and Dark theme options. The dark theme can be used when there is a need for a footer on a dark background, e.g., a loading screen, but it should be used sparingly.

Example of the App Footer in a dark theme

Responsiveness

In Figma, we support two size variants, Large and Small, to help illustrate how the component will respond to different viewport sizes. In code, the component is responsive.

Large

The Large size accounts for most larger viewport sizes and, depending on the number of links and additional content, will display elements in a single row or wrap as the viewport size is reduced.

Please note, this screenshot is reduced in size to fit within the content container of the website.

Example of the App Footer at a large screen size

Small

Example of the App Footer at a small screen size

How to use this component

The AppFooter is used to display a brief list of useful links and information relevant to an entire application.

Basic invocation with recommended content

The AppFooter contains only a copyright by default. The provided LegalLinks child component is recommended for inclusion in application footers for our cloud products such as HCP and TFC.

.hbs .gts

<Hds::AppFooter as |AF|>
  <AF.LegalLinks />
</Hds::AppFooter>

StatusLink

Add the StatusLink to display information on the health of your application. Pass a predefined status name or use individual arguments to set text, statusIcon, iconColor to create a custom status type. Pass a custom href value to point to a custom URL.

.hbs .gts

<Hds::AppFooter as |AF|>
  <AF.StatusLink @status="operational" />
</Hds::AppFooter>

Link

You can add custom links in addition to or instead of including LegalLinks.

.hbs .gts

<Hds::AppFooter as |AF|>
  <AF.Link @href="https://cloud.hashicorp.com/docs/changelog">
    Changelog
  </AF.Link>
</Hds::AppFooter>

Item

Item components can be used to include meta text or other non-link content.

.hbs .gts

<Hds::AppFooter as |AF|>
  <AF.Item>
    <Hds::Text::Body @tag="span" @size="100">v.2.0</Hds::Text::Body>
  </AF.Item>
  <AF.Item>
    <Hds::Text::Body @tag="span" @size="100">Vault</Hds::Text::Body>
  </AF.Item>
  <AF.Item>
    <Hds::Text::Body @tag="span" @size="100">API: 1.0</Hds::Text::Body>
  </AF.Item>
</Hds::AppFooter>

ExtraBefore & ExtraAfter

Custom content can be added either before or after the AppFooter main content. The layout of this content is inline with other content by default.

.hbs .gts

<Hds::AppFooter as |AF|>
  <AF.ExtraBefore>
    <Doc::Placeholder
      @text="Extra Content Before"
      @height="2em"
      @width="fit-content"
      class="doc-app-footer-demo-placeholder"
    />
  </AF.ExtraBefore>
  <AF.LegalLinks />
  <AF.ExtraAfter>
    <Doc::Placeholder
      @text="Extra Content After"
      @height="2em"
      @width="fit-content"
      class="doc-app-footer-demo-placeholder"
    />
  </AF.ExtraAfter>
</Hds::AppFooter>

Custom layout

Add your own styles to customize the layout of the extra content areas.

.hbs .gts

<Hds::AppFooter as |AF|>
  <AF.ExtraBefore>
    <div class="doc-app-footer-demo-custom-content-layout">
      <Doc::Placeholder
        @text="Extra Content Before"
        @height="2em"
        @width="fit-content"
        class="doc-app-footer-demo-placeholder"
      />
    </div>
  </AF.ExtraBefore>
  <AF.LegalLinks />
  <AF.ExtraAfter>
    <div class="doc-app-footer-demo-custom-content-layout">
      <Doc::Placeholder
        @text="Extra Content After"
        @height="2em"
        @width="fit-content"
        class="doc-app-footer-demo-placeholder"
      />
    </div>
  </AF.ExtraAfter>
</Hds::AppFooter>

Theme

Both a light and a dark theme are included.

.hbs .gts

<div class="doc-app-footer-demo-dark-background">
  <Hds::AppFooter @theme="dark" as |AF|>
    <AF.StatusLink @status="operational" />
    <AF.LegalLinks />
  </Hds::AppFooter>
</div>

Component API

AppFooter

The base AppFooter component includes a copyright notice. It also wraps and contains the AppFooter::StatusLink, AppFooter::LegalLinks, AppFooter::Link, and AppFooter::Item child components as well as ExtraBefore and ExtraAfter yielded components.

<[AF].ExtraBefore> yielded component

A generic container yielded as contextual component. Its content is injected before the <ul> list of links and items.

<[AF].StatusLink> yielded component

"https://status.hashicorp.com" (default)

The yielded AppFooter::StatusLink contextual component (see below).

<[AF].LegalLinks> yielded component

The yielded AppFooter::LegalLinks contextual component (see below).

<[AF].Link> yielded component

The yielded AppFooter::Link contextual component (see below).

<[AF].Item> yielded component

The yielded AppFooter::Item contextual component (see below). Used for custom non-link content.

<[AF].ExtraAfter> yielded component

A generic container yielded as contextual component. Its content is injected after the <ul> list of links and items.

theme string

light (default)
dark

Set the overall theme used by the component and its children.

ariaLabel string

"Footer items" (default)

Accepts a string. The ariaLabel value is applied to the list of AppFooter content.

copyrightYear string

currentYear (default)

Pass a custom year value for the Copyright instead of the default current year value.

…attributes

This component supports use of ...attributes.

Contextual components

[AF].StatusLink

The AppFooter::StatusLink component, yielded as contextual component.

status string

operational
degraded
maintenance
outage

Passing one of the defined values sets the associated text, statusIcon, and statusIconColor. Either status or text must be passed or an error will be thrown.

statusIcon string

Pass a custom icon name.

statusIconColor string

Pass a custom icon color. Accepts any valid CSS color value.

text string

Pass a custom text value.

href

Pass a custom href for the link. (URL parameter that’s passed down to the <a> element.)

isHrefExternal boolean

Controls whether or not the <a> link is external. When left undefined or explicitly set to true it adds the target="_blank" and rel="noopener noreferrer" attributes to the <a> tag (for security reasons).

route/models/model/query/current-when/replace

Parameters that are passed down as arguments to the <LinkTo>/<LinkToExternal> components.

isRouteExternal boolean

false (default)

Controls if the “LinkTo” is external to the Ember engine, in which case it will use a <LinkToExternal> for the @route.

…attributes

This component supports use of ...attributes.

[AF].LegalLinks

The AppFooter::LegalLinks component, yielded as contextual component.

hrefForSupport string

"https://www.hashicorp.com/support" (default)

Override the default href value with a custom url value.

hrefForTerms string

"https://www.hashicorp.com/terms-of-service" (default)

Override the default href value with a custom url value.

Note: As this links to the ToS of the website, you should overwrite this value with the ToS most relevant to your product application.

hrefForPrivacy string

"https://www.hashicorp.com/privacy" (default)

Override the default href value with a custom url value.

hrefForSecurity string

"https://www.hashicorp.com/security" (default)

Override the default href value with a custom url value.

hrefForAccessibility string

"https://www.hashicorp.com/accessibility" (default)

Override the default href value with a custom url value.

ariaLabel string

"Legal links" (default)

Accepts a string. The ariaLabel value is applied to the nested list of included legal links.

…attributes

This component supports use of ...attributes.

[AF].Link

The AppFooter::Link component, yielded as contextual component.

yield

Elements passed as children are yielded as inner content of an <a> HTML element.

href

URL parameter that’s passed down to the <a> element.

isHrefExternal boolean

route/models/model/query/current-when/replace

Parameters that are passed down as arguments to the <LinkTo>/<LinkToExternal> components.

isRouteExternal boolean

false (default)

Controls if the “LinkTo” is external to the Ember engine, in which case it will use a <LinkToExternal> for the @route.

icon string

Use this parameter to show an icon. Any icon name is acceptable.

iconPosition enum

leading
trailing (default)

Positions the icon before or after the text.

…attributes

This component supports use of ...attributes.

[AF].Item

The AppFooter::Item component, yielded as contextual component. Used for custom non-link content.

yield

Elements passed as children are yielded as inner content of an <li> HTML element.

…attributes

This component supports use of ...attributes.

Anatomy

Anatomy of AppFooter

Element	Usage
Extra content before	Optional
Status link	Optional
Legal links	Optional, but recommended for consumer-facing apps
Links	Optional
Items	Optional
Extra content after	Optional
Copyright	Required

States

Links

Link interactive states

Status link

StatusLink interactive states

Conformance rating

Conformant

When used as recommended, there should not be any WCAG conformance issues with this component.

Applicable WCAG Success Criteria

This section is for reference only. This component intends to conform to the following WCAG Success Criteria:

1.1.1 Non-text Content (Level A):
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
1.3.1 Info and Relationships (Level A):
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
1.3.2 Meaningful Sequence (Level A):
When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
1.4.1 Use of Color (Level A):
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
1.4.10 Reflow (Level AA):
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions.
1.4.3 Minimum Contrast (Level AA):
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
1.4.4 Resize Text (Level AA):
Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
2.1.1 Keyboard (Level A):
All functionality of the content is operable through a keyboard interface.
2.1.2 No Keyboard Trap (Level A):
If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface.
2.4.3 Focus Order (Level A):
If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
2.4.7 Focus Visible (Level AA):
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
3.2.3 Consistent Navigation (Level AA):
Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated.
4.1.2 Name, Role, Value (Level A):
For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

Support

If any accessibility issues have been found within this component, let us know by submitting an issue.

7.0.0

Changed the component CSS custom property prefix from --hds-* to --hds-var-*.

hds-app-footer-status-icon-color → hds-var-app-footer-status-icon-color

6.6.0

Removed unused @color property from [AF].Link contextual component

6.3.0

Exported THEMES constant.

6.2.1

Switched usage of inline styles with ember-style-modifier.

6.1.1

Translated strings for AppFooterStatusLink status value types

6.1.0

Removed usage of hdsLinkToModels and hdsLinkToQuery helpers, instead forward the arguments to HdsLinkInline.

Translated strings for AppFooter ariaLabel and AppFooterLegalLinks ariaLabel

Converted component to gts format.

4.24.1

Updated company name in copyright text

4.22.0

Translated template strings

On this page:

App Footer

Usage

When to use

Order of content

Status link

Legal links

Additional links

Plain text items

Extra content blocks

Themes

Responsiveness

Large

Small

How to use this component

Basic invocation with recommended content

StatusLink

Link

Item

ExtraBefore & ExtraAfter

Custom layout

Theme

Component API

AppFooter

Contextual components

[AF].StatusLink

[AF].LegalLinks

[AF].Link

[AF].Item

Anatomy

States

Links

Status link

Conformance rating

Applicable WCAG Success Criteria

Support

7.0.0

6.6.0

6.3.0

6.2.1

6.1.1

6.1.0

4.24.1

4.22.0

Related