Layout

Page header

A page header informs a user of the section of the product they are currently in. It includes a breadcrumb and optional tabs.

Charmeleon title

Simple description for the title

1
import {BasicHeader} from '@coveord/plasma-react';
2
3
export default () => (
4
<BasicHeader
5
title={{
6
text: 'Charmeleon title',
7
}}
8
description="Simple description for the title"
9
tabs={[
10
{groupId: 'example1', id: 'tab1', title: 'Digimon'},
11
{groupId: 'example1', id: 'tab2', title: 'Beyblade'},
12
{groupId: 'example1', id: 'tab3', title: 'Pokemon'},
13
]}
14
/>
15
);

Props

NameTypeDefaultDescription
titlerequiredITitleProps
The title of the header
actionsIContentProps[]
Action buttons displayed in the right portion of the header
childrenReactNode
classesstring[]
Additional CSS classes to set on the HeaderWrapper element
descriptionReactNode
Text that appears above the tabs in the header wrapper
hasBorderBottombooleantrue
Whether the header displays a border on the bottom
hasPaddingbooleantrue
Whether the header has padding
tabsITabProps[]
Array of tabs, see Tab Component for details

Examples

Loading

1
import {BasicHeaderLoading} from '@coveord/plasma-react';
2
3
export default () => <BasicHeaderLoading />;

No guidelines exist for BasicHeader yet.

Create guidelines