Layout

Split Layout

A split layout organizes information in two vertical columns.

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