Layout

Split Layout

A split layout organizes information in two vertical columns.
View source

Hello from the left!

Hello from the right!

1
import {SplitLayout} from '@coveord/plasma-react';
2


3
const Demo = () => (
4
    <SplitLayout
5
        leftChildren={<p className="p1">Hello from the left!</p>}
6
        rightChildren={<p className="p1">Hello from the right!</p>}
7
    />
8
);
9
export default Demo;

Props

NameTypeDefaultDescription
classNamestring | string[]
CSS classes to set on the split layout outer most element
leftChildrenReactNode
The content displayed on the left side
leftContainerClassNamestring | string[]
CSS classes to set on the left side container element
modsSplitLayoutMods | SplitLayoutMods[]
Visual modifiers to apply on the component
rightChildrenReactNode
The content displayed on the right side
rightContainerClassNamestring | string[]
CSS classes to set on the right side container element

Examples

Without a border

Hello from the left!

Hello from the right!

1
import {SplitLayout, SplitLayoutMods} from '@coveord/plasma-react';
2


3
const Demo = () => (
4
    <SplitLayout
5
        mods={SplitLayoutMods.noBorder}
6
        leftChildren={<p className="p1">Hello from the left!</p>}
7
        rightChildren={<p className="p1">Hello from the right!</p>}
8
    />
9
);
10
export default Demo;

No guidelines exist for SplitLayout yet.

Create guidelines