Split layout

Also known as

CSS Flexbox, Responsive Layout

Similar to

Contains

Resources

Support

SplitLayout displays items in two separate areas at opposite ends of a container. You can define the container in a vertical or horizontal orientation.

Best practices

When building a sub-section of a page using a split layout, it's important to use semantic HTML, which means using the correct HTML elements for their intended purpose as much as possible.

SplitLayout supports semantic HTML with the as prop. This renders the appropriate HTML instead of a plain div.

Previous Page
Spinner
Next Page
Stack layout