Layout

Section

View source

Section title

Section description.

Look at my cool mod
Children
1
import {Section} from '@coveord/plasma-react';
2


3
export default () => (
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
);

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
export default () => (
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
);
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
export default () => (
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
);

No guidelines exist for Section yet.

Create guidelines