Plasma Design System
Home
Brand
Design principles
Foundations
Iconography
Colors
TypeKit
Layout
Header
Table
Modal
ModalWizard
Prompt
Sticky footer
Form
Button
Code editor
Collection
Copy to Clipboard
Legacy documentation
Layout

Header

A page header informs a user of the section of the product they are currently in. It includes a breadcrumb and optional call to actions.
View source
One
/
Two
/
Three

Title

The header description
1
import {Anchor, Button, Header} from '@coveord/plasma-mantine';
2
3
const Demo = () => (
4
<Header description="The header description" borderBottom>
5
<Header.Breadcrumbs>
6
<Anchor>One</Anchor>
7
<Anchor>Two</Anchor>
8
<Anchor>Three</Anchor>
9
</Header.Breadcrumbs>
10
Title
11
<Header.DocAnchor href="https://about:blank" label="Tooltip text" />
12
<Header.Actions>
13
<Button>Primary</Button>
14
<Button variant="outline">Secondary</Button>
15
</Header.Actions>
16
</Header>
17
);
18
export default Demo;

Props

NameTypeDefaultDescription
childrenrequiredReactNode
The title of the header.
borderBottomboolean
Whether the header should have a border on the bottom
descriptionReactNode
The description text displayed inside the header underneath the title
variant"page" | "modal"'page'
Use the modal variant when displaying the header inside a modal

No guidelines exist for Header yet.

Create guidelines