Container

import { Button } from "@hel/ui/button"
import { Container } from "@hel/ui/container"
import { Flex } from "@hel/ui/flex"

When to use it#

Wrap a page, or a section of one, in a container when the content should read in a comfortable column no matter how wide the screen is. It centers itself, takes the full width up to a limit, and adds padding so the content never touches the edges.

It does not arrange what is inside. Use Stack to line things up in a column, Flex for a row, and Grid for tiles.

Import#

Copyimport { Container } from "@hel/ui/container"

Examples#

Full width bands, narrow content#

A common page layout has sections whose backgrounds run edge to edge while the text stays in a column. Put the background on the section and a container inside it. Use the same size in each section and the content lines up down the page.

import { Container } from "@hel/ui/container"
import { Heading } from "@hel/ui/heading"
import { Stack } from "@hel/ui/stack"

Sizes#

size sets the widest the container grows. Below that width it simply fills the space.

Use sm for reading and forms, md for settings pages, and lg or xl for dashboards and tables. full keeps the centering and padding but removes the cap, which is handy when a page is wide for one section only.

Padding#

padding is the space inside the container on both axes, taken from the spacing scale: none, px, 3xs up to 4xl. The default is xl (1rem). If a section needs different padding on one side, add a class with className.

Props#

as picks the HTML element, so a page can be a main and a block can be a section without an extra wrapper. A container takes every other prop of that element.