Skip to main content

Container

Overview​

Container centers content horizontally and constrains its maximum width by breakpoint. Use it to keep page content readable on large screens.

Live demoInteractive
Constrained content

Anatomy​

  • Root: The width-constrained wrapper.
  • Content: Child content inside the container.

Usage​

import { Container } from '@grasdouble/lufa_design-system';

export function Page() {
  return (
    <Container>
      <h1>Page Title</h1>
      <p>Content is centered and constrained.</p>
    </Container>
  );
}

Props​

PropTypeDefaultDescription
asElementType'div'The HTML element to render.
fluidbooleanfalseIf true, takes 100% width.
size'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'-Max-width constraint.
childrenReactNode-The content to render.

Accessibility​

Use semantic landmarks with as (e.g., main, section) to improve navigation for assistive technologies.

Theming & Tokens​

size maps to breakpoint tokens. Container itself does not add color tokens; use Box props on children when needed.

Do / Don’t​

Do

Wrap top-level page sections to keep line lengths readable.

Don’t

Avoid nesting many containers—use one primary container per page section.