Layout

Layout items in a vertical stack

Layout items in a horizontal stack

Layout items in a column grid

Adds one-off spacing around a component

A progressive disclosure pattern

Wraps content in a card layout, with optional header and footer

Divides rows horizontally up to 12 parts

Draws a separator

Indicates absence of any data to display and guides user to take action

Opens a full page overlay to switch context to specific operations

Contains rows to create page structures

Be an item in an ordered or unordered list of textual elements

Allows any components to be at the bottom of a ListItem

Splits content into items, with optional icons for visual support

Allows you to add inputs to the far right of ListItem, and below on mobile

Splits content into items, with optional icons for visual support

Show content over the page in a restricted lightbox context

Separates parts of complex workflows inside blocks that overlay the page

Makes easy to build multi-step modals

Displays a detailed view with multiple tabs

Presents long text

Present ordered text elements as a numbered list

Initiates every page UI structure

Provides additional structure inside blocks

Groups and indents a subset of field children

Visually indicates status

List unordered text elements as bullet points

Creates structure around content such as tables, lists or key metrics