Components / layout

layout · @awesome-ds/react

Container

Centered max-width content shell.

Rules: rule.foundations.semantic-tokens

State matrix

idlerequired

Anatomy

  • centered width constraint
  • content slot
  • responsive gutters

Keyboard contract

Layout has no keyboard behavior and never clips focus indicators.

Screen-reader contract

Adds no role; landmark semantics belong to the caller.

Content rules

  • Use one primary reading width.
  • Allow intentional full-bleed children separately.

Public API

PropTyperequiredDescription
childrenReactNode—Constrained content
…nativeHTMLAttributes<HTMLDivElement>—Native div attributes

Adaptation contracts

RTL
Logical properties and DOM order determine layout and reading order.
High contrast
Never clip descendant outlines or depend on decorative surfaces for grouping.
Reduced motion
Responsive reflow is immediate and does not animate layout geometry.

Verification IDs

Container/max-width

Live

Live

Constrained width container.

Copyable example

import { Container } from "@awesome-ds/react";

<Container>…</Container>