Usage
Header labels the currently viewed context and hosts its primary actions. Place the title (and any inline content) in the default slot, and put buttons, toggles or other controls in the end slot to align them to the trailing edge.
import "@nordhealth/components/lib/Header"
Examples
Title only
The simplest header is a heading in the default slot.
Actions
Use the end slot for primary actions aligned to the trailing edge.
Size
Set size="s" for a more compact header.
Filter and tooltip
Combine a filter control with a tooltip in the end slot to add contextual actions to the header.
RTL
Headers follow the document or container direction. Toggle the direction to see the layout mirror.
Accessibility
- Header is a layout container with no implicit landmark role. Put a real heading element (
<h1>,<h2>) in the default slot so the current context is exposed in the document outline. - The
endslot keeps actions in the normal tab order; the visual trailing-edge placement does not change source order, so verify the focus order reads logically. - Wrap the header in a labelled landmark (such as a
<header>element orrole="banner"region) when it represents page-level context, so assistive technology can navigate to it directly.
Templates
See this component composed into complete application views:
API reference
Header
The header is a block of designated space for labelling the currently viewed context as well as providing primary actions.
<nord-header></nord-header>Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
size | size | Controls the size of the header component. | 'm' | 's' | 'xs' | 'm' |
Slots
| Slot name | Description |
|---|---|
Default slot | The header content. |
end | Optional slot for buttons, toggles, etc. |
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-header-background-color | Background color of the header. | 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 header component to show a heading to describe the current view.
- Use the header component to hold primary actions.
- Use the header component at a visual high position at full width.
- Utilise the
n-truncateCSS helper to prevent long headings from wrapping.
Don’t
- Don’t overcrowd the header component with too many actions or information.
- Don’t nest the header component too deeply and restrict its available space.
- Don’t add large amounts of content or long headings. Aim for headings that are short and concise.
Content guidelines
The header component should be a containing element placed high on the page to present high level controls and to describe the page itself. It shouldn’t be overcrowded with controls or information.