Container

A container holds content at a readable maximum width and puts a gutter either side of it. It is the outermost thing a page's content usually needs, and it is deliberately one thing: no background, no vertical rhythm and no colour, so a Section can add those around it without the two fighting over the same properties.

It is also the element Page, PageContent, PageFooter and Section reuse when they are contained, which is why a page and a band hold their content to the same column without either of them stating a width of its own.

Usage

import { Container, Typography } from "@asheeui/web";

<Container size="md">
  <Typography role="body-md">
    INV-1041 covers the March retainer and is due on 31 March.
  </Typography>
</Container>;

A width is one of five tokens, and it is a maximum rather than a fixed size: the container fills its parent and stops at the cap, never exceeding either. full removes the cap, which is how a band states "no column here".

Width tokens

size resolves through the standard cascade, so a product that reads best at one measure states it once under components.container.size and every Container you write follows. The parts that build a container for you state its width themselves, components.page.containerSize, components.section.containerSize, which is why the two options are named differently.

The tokens step up through sm, md, lg and xl, and full removes the cap. A token narrower than the window caps the column; a token wider than it does not engage, which is what "maximum" means, the content shrinks with its parent instead of overflowing.

The gutter

The gutter is the one part of a container that is visible at every window width. It is a horizontal padding from the shared spacing scale, and it widens with the viewport, so content never touches the edge of a phone and never stretches to the edge of a desktop.

Turn gutter off when the parent already supplies the margin, a container inside a padded drawer, or a band that is meant to run edge to edge with its content flush against the window.

Centring and nesting

centered is on by default and is what puts the column in the middle of a wider window: a container is a block that fills its parent, so without it a capped column would sit at the start of the row. Turn it off when the container is nested inside one that already centres a narrower column: the outer container is then the statement, and the inner one repeating it adds a declaration that does nothing and hides which element is holding the column in place.

Nesting containers multiplies the gutters. That is occasionally what you want, a narrow reading column inside a band that has its own margin, but it is usually a sign that the outer element should be a Section that is not contained, holding one container. For how contained and containerSize pair on the elements that build a container for you, see Layout and spacing.

Props

size: "lg", gutter: true and centered: true are registered by the component, so components.container restates every container in the application at once. Nothing resolves from defaultVariant or defaultRadius: a container has no variant and no corners.

The prop is size here and containerSize on the parts that hold a container. The difference is deliberate: a container states its own width, while a page or a section states which width the container it builds should have.

Accessibility

• The element is a plain div with no role, so it changes nothing about how the content is announced. Use as when the container is the structural element itself, main, article, section, so the content is not wrapped twice.
• A maximum width is a reading measure: it keeps a line of text at a length the eye can return from, and it survives zoom, because the column shrinks with the window instead of holding a fixed pixel width.
• The gutter is padding, not margin, so it is inside the container's own box and nothing can overlap it; no content is removed or hidden at a narrow width.
• Wrapping content in a container does not reorder it, so the reading order and the tab order are the order you wrote.

The spacing scale, the width tokens and as are shared by every layout; see Layout and spacing.

Related