Skip to content
EspañolEnglish
All components (204)

Container

Layout · Container · .amset-container

What it is and when to use it

Centres the content horizontally and gives it a maximum reading width, with side padding so the text does not touch the edge of the screen.

When to use it

  • The body of a page or a section: so a line of text does not stretch to the 1,900 px of a wide monitor.
  • width picks the maximum width: sm (32 rem), md (48 rem), lg (64 rem, the default) or xl (80 rem). full sets no limit and only adds the side padding.
  • bare removes the side padding, for when the outside already adds it (a Card, another container).
  • as renders the right element: as="main" turns it into the main region of the page without wrapping it in another div.

When not to

  • The application shell, with header and side menu: AppShell.
  • Centring something small inside a space, also vertically: Center.
  • Separating the blocks inside: Stack does that; the container only sets the width.

Keyboard: it does not take part: it only lays out.

Accessibility: it adds no role: whatever role it has comes from the element in as. Below its maximum width it takes 100 % of the space, so on a phone it does not force sideways scrolling.

Fine-tuning: the widths, --amset-container-sm … --amset-container-xl; the one applied, --amset-container-width; and the side padding, --amset-container-padding (0px with bare).

What it looks like

A block of text with a limited width so it reads comfortably.

<Container width="sm">
  <Text>A block of text with a limited width.</Text>
</Container>

Props

Import it with import { Container } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
childrenrequiredReactNode—
as"article" | "aside" | "div" | "footer" | "header" | "main" | "nav" | "section" | "span"—
barebooleanNo side padding, for when what is outside already provides it.
classNamestringMerged with the library classes; it does not replace them.
styleCSSProperties—
width"sm" | "md" | "lg" | "xl" | "full"Maximum width of the content. `full` does not limit it, it only adds the side padding.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

VariableDefault
--amset-container-sm32rem
--amset-container-md48rem
--amset-container-lg64rem
--amset-container-xl80rem
--amset-container-widthvar(--amset-container-lg)
--amset-container-paddingvar(--amset-space-4)

How to change it

.amset-container {
  --amset-container-sm: ...;
  --amset-container-md: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: