Layout

Blocks

block container All block grids start with a wrapper of block-container that is display: flex with flex-wrap: wrap applied. Container modifiers, which affect all child blocks, allow auto-placement based on responsive breakpoints.

Learn More »

Flexbox

display Our flex utilities are easy to use and fairly comprehensive. The only property you need in place to start unlocking the power of flexbox is display: flex, or display: inline-flex if you have a need for it.

Learn More »

Max Width

Max Container The max-container adds a max-width to your content. The size is set to 1440px and is added to the :root with the --max-container custom property. You can change this size in your project by setting --max-container to a different value.

Learn More »