1. Foundations Container

Live Container Demo

Use the toolbar to switch between sizes and watch how the layout responds. The entire page is wrapped in the active container size.

labs-container [medium] (600px)

This is your content
It stays centered and respects the container's max-width constraint on desktop, fills 100% on mobile
Sample Button

About This Component

<labs-container> is a responsive width container component that centers content and provides consistent max-width constraints across different screen sizes. Perfect for building responsive layouts that work on all devices.

  • Responsive sizing: Small (400px), Medium (600px), Large (800px), Fill (100vw)
  • Mobile-first approach: Switches to 100vw with padding below 640px
  • Automatic centering: Content always centered horizontally
  • Consistent padding: Respects design system spacing tokens

Container Metrics

Current Size:
Medium (600px)
Max-width:
600px

Container Sizes

Each container size has a specific use case. Switch sizes in the toolbar to see them in action.

Small (400px)

Small Container
400px max-width

Use for: Narrow content layouts, blog posts, focused reading experiences

Medium (600px)

Medium Container
600px max-width (default)

Use for: Standard UI layouts, forms, cards, most applications

Large (800px)

Large Container
800px max-width

Use for: Content-rich pages, dashboards with sidebars

Fill (100vw)

Fill Container
100% viewport width

Use for: Full-page layouts, modal backgrounds, hero sections

Responsive Behavior

Desktop (> 640px)

Containers respect their max-width setting and stay centered on the page. Content uses the full container space for optimal readability.

Mobile (≤ 640px)

All containers switch to 100% viewport width with 1rem padding. This ensures touch-friendly layouts and proper spacing on small screens.