Usage
Footer provides a band of space below the main content for supporting information or actions. Place its content in the default slot — commonly a Button Group of actions.
import "@nordhealth/components/lib/Footer"
Examples
Basic
A footer with a group of actions in the default slot.
With additional content
Combine supporting text with actions in the same footer.
Size
Set size="s" for a more compact footer.
RTL
Footers follow the document or container direction. Toggle the direction to see the layout mirror.
Accessibility
- Footer is a layout container with no implicit landmark role. Wrap it in a
<footer>element orrole="contentinfo"region when it represents page-level footer content so assistive technology can locate it. - Content follows source order, so arrange supporting text and actions in the order you want them read; the visual layout does not change the tab or reading order.
- Ensure interactive controls placed in the footer have accessible labels and remain reachable in a logical focus order relative to the main content above.
API reference
Footer
The footer is a block of designated space for providing additional information or actions that are positioned below the main content.
<nord-accordion></nord-accordion>Props
| 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) |
Design guidelinesFor designers
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
stickyFooterproperty 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:
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):
Avoid unnecessary words and articles in button labels, such as “the”, “an” or “a”: