The Box primitives are used to structure and organize your layouts. Each one gives you a flexible foundation that you can easily modify to suit your needs. Options include Box, Flex, Column, Row, Grid, and Container, to insert them select the Box dropdown menu in the composition panel.
Box is unstyled by default, offering full customization through the Style Panel. It functions as a versatile building block for layouts and content organization. Use it whenever you need a simple container to start with and adjust it as needed.
| Prop | Type | Default | Description |
|---|---|---|---|
tag | select | div | Allows changing the default HTML tag for flexibility. |
Flex is used for aligning content horizontally within a layout. Flex is a Box set to Flexbox by default.
| Prop | Type | Default | Description |
|---|---|---|---|
tag | select | div | Allows changing the default HTML tag for flexibility. |
Column is used for aligning content vertically within a layout. Column is a Box set to Flexbox by default, with direction set to vertical.
| Prop | Type | Default | Description |
|---|---|---|---|
tag | select | div | Allows changing the default HTML tag for flexibility. |
Row is used for aligning content horizontally within a layout. Row is a Box set to Flexbox by default, with direction set to horizontal.
| Prop | Type | Default | Description |
|---|---|---|---|
tag | select | div | Allows changing the default HTML tag for flexibility. |
Grid is used for creating multi-column/ multi-row layouts. Grid is a Box set to CSS Grid by default, offering flexibility to configure any shape or form for content organization.
| Prop | Type | Default | Description |
|---|---|---|---|
tag | select | div | Allows changing the default HTML tag for flexibility. |
The Container Box is a responsive container designed to adapt based on the current viewport. It uses the container global style to ensure that content remains centered and fluid across different screen sizes, making it perfect for wrapping content that needs to stay within a consistent width.
| Prop | Type | Default | Description |
|---|---|---|---|
tag | select | div | Allows changing the default HTML tag for flexibility. |
All Box primitives can be fully customized through the Style Panel, Global Styles, and Selectors. Below is a quick example of styling options in Clutch.