PRIMITIVES

Container

Centred max-width column with responsive horizontal padding. The default page wrapper for Damo UI documents.

Import

import { Container } from 'damo-ui'

Basic usage

Page heading

Body content lives inside a centred max-width column.

1<Container>
2  <h1>Page heading</h1>
3  <p>Body content lives inside a centred max-width column.</p>
4</Container>

Size variants

Six size steps mirror Tailwind's screen-* breakpoints, plus a full option for full-bleed sections.

1<Container size="md">…</Container>
2<Container size="lg">…</Container>
3<Container size="2xl">…</Container>

Unpadded

Disable padding when the children already manage their own gutters or for full-bleed hero banners.

1<Container size="full" padded={false}>
2  <FullBleedHero />
3</Container>

Props

Container props
PropTypeDefaultDescription
size'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full''lg'Maximum width breakpoint. full removes the max-width entirely (useful for full-bleed banners that still want centred padding).
paddedbooleantrueWhen true, applies responsive horizontal padding (px-4 md:px-6 lg:px-8).
classNamestring—Tailwind classes are merged on top of the defaults.

Accessibility

  • Layout primitive — renders as a plain <div>. Forward role (e.g. role="main", role="region") and aria-label when the container marks a semantic landmark.
  • No built-in interactive behaviour; all keyboard and focus management is the responsibility of the children.
← BoxAspectRatio →