Split
Use case
The Split component is designed to create a split layout based on fraction
How to install
If you haven't already, install styled-components:
npm install styled-components
Then install the stack component
npm install @bedrock-layout/split
Basic usage
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga consequuntur corrupti beatae commodi vitae, perspiciatis totam provident architecto doloribus aperiam sapiente, incidunt nihil suscipit voluptatibus tempore est dolor! Iusto, vero.
Nulla luctus nisl nec dui auctor volutpat. Phasellus condimentum elementum enim in pharetra. Curabitur eget urna cursus, imperdiet leo eu, elementum leo. Proin laoreet eleifend nisl ut iaculis. Ut dictum est vitae rutrum elementum. Donec dictum ex ac nibh auctor semper. Phasellus sed rhoncus arcu, eu consectetur ipsum. Ut dictum a elit at sollicitudin. Quisque sed augue molestie, auctor purus quis, luctus ipsum. Donec ultrices vel nisi vehicula facilisis. Vestibulum cursus nisi tellus, sit amet sagittis nisl luctus ut.
Storybook
Checkout storybook for more details.
Properties
| Property | Type | Default |
|---|---|---|
| gutter | One of: none, xs, sm, md, lg, xl, xxl | lg |
| fractions | One of: auto-start, auto-end, 1/4, 1/3, 1/2, 2/3, 3/4 | 1/2 |