Split layout

Also known as

CSS Flexbox, Responsive Layout

Similar to

Contains

Flex layout

Resources

View source code

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.

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

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.

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.

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.

Spinner

Stack layout