Header
The header is a block of designated space for labelling the currently viewed context as well as providing primary actions.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
size | size | Controls the size of the header component. | 'm' | 's' | 'm' |
Slots
| Slot name | Description |
|---|---|
Default slot | The header content. |
end | Optional slot for buttons, toggles, etc. |
This component has no CSS custom properties.
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.
[Menu] Dashboard [Account] [Log out]
[Menu] Use the cards below to view various information [Export] [Save] [Edit Profile] [Log out] [Preferences]
Integration
For integration guidelines, please see Web Components documentation .