Container

Content outside an AppShell, such as a band in a bleed shell, that must start at the same x as the page.

import { Body, Card, Container } from "@hackcove/ui";

<Container as="section" aria-label="Billing">
  <Card title="Plan">
    <Body>Team, billed monthly.</Body>
  </Card>
</Container>

import { Body, Card, Container } from "@hackcove/ui";

<Container as="section" aria-label="Billing">
  <Container>
    <Card title="Plan">
      <Body>Team, billed monthly.</Body>
    </Card>
  </Container>
</Container>

• Container is the only place the page width (max-w-6xl) and side padding are defined; a header, a page and a footer inside one start at the same x.
• AppShell already wraps its header, main and footer in one. Use Container only for a part of a bleed shell that spans the page, so its content still keeps the edge.
• Never nest a Container in a Container: the padding doubles.
• as picks the element: div (default), main, header, footer, section or nav. A section or nav needs an aria-label.
• Space inside it with a Stack; a Container has no vertical padding or gap of its own.

• A Container adds no role: a div is not a landmark. as picks main, header, footer, section or nav when the part should be one.
• aria-* and data-* go on the rendered element.