FooterDraft

The footer is a block of designated space for providing additional information or actions that are positioned below the main content.

Open in new window

View RTL

<nord-footer>
  <nord-button>Default</nord-button>
  <nord-button variant="primary">Primary</nord-button>
</nord-footer>

<nord-footer>
  <div class="footer-info">Additional footer content</div>
  <nord-button>Default</nord-button>
  <nord-button variant="primary">Primary</nord-button>
</nord-footer>

<style>
  .footer-info {
    color: var(--n-color-text-weaker);
    font-size: var(--n-font-size-s);
    min-width: calc(var(--n-space-xxl) * 2);
    flex: 1;
  }
</style>

<nord-footer size="s">
  <nord-button size="s">Default</nord-button>
  <nord-button size="s" variant="primary">Primary</nord-button>
</nord-footer>

Properties

Property	Attribute	Description	Type	Default
`size`	`size`	Controls the size of the footer component.	`"m" \| "s"`	`"m"`

Slots

Slot name	Description
Default slot	The footer content.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

Property	Description	Default
`--n-footer-padding-inline`	Controls the inline padding around the footer’s main slot, using spacing tokens.	`var(--n-space-l)`
`--n-footer-box-shadow`	Controls the box shadow of the footer, using box shadow tokens.	`var(--n-box-shadow-header)`
`--n-footer-background-color`	Controls the background color of the footer, using color tokens.	`var(--n-color-surface)`

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do #

Use the footer component to show actions for a stepped workflow.
Use the footer component to provide additional information or actions that are positioned below the main content.
The footer component can also be used within Nord to provide a layer of actions or information at the bottom of a component. It’s currently used internally in the modal and drawer components.
When using the footer component within the layout component, you can make the footer sticky by using the provided stickyFooter property of the layout component. View an example.

Don’t #

Don’t overcrowd the footer with too many actions or information.
Don’t nest the footer deeply and restrict its available space.
Don’t add large amounts of content or long paragraphs. Aim for actions that are short and concise.

Content guidelines #

Footer action labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:

Create client

Click here

When writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

My tasks

My Tasks

Avoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:

Add item

Add an item

Integration

For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.