Container

Responsive content wrapper for alignment and padding within sections

Accessibility

Semantics

  • Container is a layout utility only – it does not add semantic meaning.
  • Use semantic HTML (e.g., <section>, <article>, <main>) for the content it wraps.

Reading Order

  • Content inside the Container should follow a logical DOM order for accessibility.

Responsiveness

  • Ensure Container widths adapt at breakpoints without cutting off or overlapping content.
  • Maintain adequate padding on small screens to avoid edge-to-edge text.

Contrast

  • Container doesn’t add backgrounds by itself, but ensures content within has adequate contrast against the Section background.