PolarisLayout and structure
Layout is the arrangement of elements on a page. A good layout helps merchants understand and find information to complete their goals. To learn more, visit the Layout documentation.
Layout primitives
All layouts and spacing should be handled using layout primitives. This keeps our components simple, flexible and composable.
Box
Box is the most primitive layout component. It’s a way to access Polaris design tokens.
Vertical stack
Use to display children vertically and horizontally with full width by default. Based on CSS Flexbox.
Horizontal stack
Use to display children horizontally in a row. Based on CSS Flexbox.
Horizontal grid
Use to lay out children horizontally with equal gap between columns. Based on CSS Grid.
Bleed
Applies negative margin to allow content to bleed out into the surrounding layout.
Tip
Layout primitives allow you to specify values for different screen sizes. Check out the layout primitives for information on how responsive props apply to each component.
Layout compositions
Layout compositions are built with layout primitives. Use these components to build common layouts in the admin with the help of sensible defaults.
Card
Cards are used to group similar concepts and tasks together for merchants to scan, read, and get things done. It displays content in a familiar and recognizable style.
Callout card
Callout cards are used to encourage merchants to take an action related to a new feature or opportunity. They are most commonly displayed in the sales channels section of Shopify.
Media card
Media cards provide a consistent layout to present visual information to merchants. Visual media is used to provide additional context to the written information it's paired with.
Empty state
Empty states are used when a list, table, or chart has no items or data to show. This is an opportunity to provide explanation or guidance to help merchants progress. The empty state component is intended for use when a full page in the admin is empty, and not for individual elements or areas in the interface.
Page
Use to build the outer wrapper of a page, including the page title and associated actions.