Layout

Section

Section title

Section description.

Look at my cool mod
Children
1
import {Section} from '@coveord/plasma-react';
2
3
const Demo = () => (
4
<Section title="Section title" description="Section description.">
5
<Section level={2} mods={'mod-header-padding'} title="Look at my cool mod">
6
<div>Children</div>
7
</Section>
8
</Section>
9
);
10
export default Demo;

Props

NameTypeDefaultDescription
childrenReactNode
classNamestring
Additionnal CSS class to set on the Section
descriptionReactNode
The text or custom JSX content to the description of the Section
level1 | 2 | 31
Determines the level of importance of the section. Smaller number means bigger title, think of it as heading levels.
modsSectionMods | SectionMods[]
Visual modifiers to apply on the component
titleReactNode
The text or custom JSX content to the title of the Section

Examples

With Level option

This is a level 1 section

Section description.

This is a level 2 section

Section description.

This is a level 3 section

Section description.

1
import {Section} from '@coveord/plasma-react';
2
3
const Demo = () => (
4
<>
5
<Section title="This is a level 1 section" description="Section description." level={1} />
6
<Section title="This is a level 2 section" description="Section description." level={2} />
7
<Section title="This is a level 3 section" description="Section description." level={3} />
8
</>
9
);
10
export default Demo;
With Mods option

This is a level 1 section

Section description.

This is a level 2 section

Section description.

This is a level 3 section

Section description.

1
import {Section} from '@coveord/plasma-react';
2
3
const Demo = () => (
4
<>
5
<Section mods={'mod-header-padding'} title="This is a level 1 section" description="Section description." />
6
<Section
7
mods={'mod-form-top-bottom-padding'}
8
title="This is a level 2 section"
9
description="Section description."
10
/>
11
<Section mods={'material-card'} title="This is a level 3 section" description="Section description." />
12
</>
13
);
14
export default Demo;

No guidelines exist for Section yet.

Create guidelines