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

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

Splits content into items, with optional icons for visual support

Allows any components to be at the bottom of a ListItem

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

Displays a detailed view with multiple tabs

Presents long text

Makes easy to build multi-step modals

Present ordered text elements as a numbered list

Initiates every page UI structure

Provides additional structure inside blocks

Visually indicates status

Groups and indents a subset of field children

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

List unordered text elements as bullet points