Clutch

Overview

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.

API Reference

Box

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.

PropTypeDefaultDescription
tagselectdivAllows changing the default HTML tag for flexibility.

Flex

Flex is used for aligning content horizontally within a layout. Flex is a Box set to Flexbox by default.

PropTypeDefaultDescription
tagselectdivAllows changing the default HTML tag for flexibility.

Column

Column is used for aligning content vertically within a layout. Column is a Box set to Flexbox by default, with direction set to vertical.

PropTypeDefaultDescription
tagselectdivAllows changing the default HTML tag for flexibility.

Row

Row is used for aligning content horizontally within a layout. Row is a Box set to Flexbox by default, with direction set to horizontal.

PropTypeDefaultDescription
tagselectdivAllows changing the default HTML tag for flexibility.

Grid

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.

PropTypeDefaultDescription
tagselectdivAllows changing the default HTML tag for flexibility.

Container

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.

PropTypeDefaultDescription
tagselectdivAllows changing the default HTML tag for flexibility.

Styling

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.