Container

PreviousNext

A flexible layout container with responsive width constraints, padding, and background options

A layout component with responsive width constraints, vertical padding, and background options.

Standard Container

Default max-width (max-w-7xl), centered with responsive horizontal padding.

Dashboard

This content is constrained to a maximum width of 1280px (7xl) and centered on the page with responsive horizontal padding.

Card 1
Card 2
Card 3

Narrow Variant

Narrower max-width (max-w-3xl) for reading-optimized layouts.

The Art of Typography

Published on January 30, 2026

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line spacing, and letter spacing.

Good typography establishes a visual hierarchy to guide readers through content. It creates a seamless reading experience that feels natural and unobtrusive. The narrow container width ensures optimal line length for comfortable reading, typically 50-75 characters per line.

Key Principles

Typography should serve the content, never overshadow it. Every decision about fonts, spacing, and layout should prioritize the reader's experience and comprehension.

Full Mobile Variant

Edge-to-edge on mobile, constrained on desktop.

Welcome to Our Platform

Edge-to-edge on mobile, beautifully constrained on desktop

Section Header

Use the title and description props to create organized sections with built-in headers. The Title component is automatically integrated with proper spacing.

Featured Products

Check out our latest offerings and bestsellers

Product One

Amazing features and benefits

Product Two

Incredible value proposition

Product Three

Outstanding performance

Padding Variants

Control vertical spacing with the padding prop. Horizontal padding is handled automatically by the variant.

No padding (py-0)

Small padding (py-4)

Medium padding (py-8) - Default

Large padding (py-12)

Extra large padding (py-16)

Background Variants

Choose from multiple background styles to create visual hierarchy and separation.

Transparent background (default)

Card background - uses design system bg-card token

Accent background - subtle emphasis

Dark background with white text

Full Width Variant

Full Width Section

This container spans edge-to-edge. Notice how we can nest a max-width wrapper inside for controlled content width.

Two-Column Layouts

Create responsive two-column layouts with different ratios. Columns stack vertically on mobile and display side-by-side on desktop.

Equal Columns (1:1)

Left Column

This column takes up 50% of the width on desktop screens. Perfect for balanced layouts.

Right Column

This column also takes up 50% of the width, creating a balanced two-column layout.

Narrow Left, Wide Right (1:2)

Sidebar

  • Navigation Item 1
  • Navigation Item 2
  • Navigation Item 3

Main Content

This column takes up twice the width of the left column (2/3 of total width). Perfect for content-focused layouts with a sidebar.

The narrow left column can contain filters, navigation, or supplementary information while the main content gets the emphasis.

Wide Left, Narrow Right (2:1)

Featured Article

This column takes up twice the width of the right column (2/3 of total width). Perfect for article layouts with supplementary content on the side.

The main content gets the majority of the space while the smaller right column can show related links, author info, or advertisements.

Related

  • Related Article 1
  • Related Article 2
  • Related Article 3

Semantic HTML

Use the as prop to render the container as different semantic HTML elements for better accessibility and SEO.

Rendered as <section>

Rendered as <article>

Rendered as <main>

Props

PropTypeDefaultDescription
childrenReactNode-Content to render inside container (used for single-column layouts)
variant"default" | "narrow" | "fullMobile" | "full""default"Width constraint style
padding"none" | "sm" | "md" | "lg" | "xl""md"Vertical padding only (py-*) - horizontal padding is handled by variant
background"none" | "card" | "accent" | "dark" | "image""none"Background style
backgroundImageUrlstring-Background image URL (only used when background="image")
titlestring-Optional section title rendered with Title component
descriptionstring-Optional section description (rendered as subtitle in Title)
onClick() => void-Click handler - makes container a button element with keyboard support
as"div" | "section" | "article" | "main""div"HTML element to render (overridden to "button" when onClick is provided)
columns"1:1" | "1:2" | "2:1"-Two-column layout ratio (requires leftColumn and rightColumn props)
leftColumnReactNode-Content for left column (only used when columns is set)
rightColumnReactNode-Content for right column (only used when columns is set)
classNamestring-Additional CSS classes merged with variant styles

Variant Details

Width Constraints

  • default: max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 - Standard dashboard/app layout (1280px max)
  • narrow: max-w-3xl mx-auto px-4 sm:px-6 - Reading-optimized width (768px max)
  • fullMobile: w-full md:max-w-7xl md:mx-auto md:px-8 - Full-width on mobile, constrained on desktop
  • full: w-full - Always edge-to-edge

Padding Scale

  • none: py-0 - No vertical padding
  • sm: py-4 - 16px vertical padding
  • md: py-8 - 32px vertical padding (default)
  • lg: py-12 - 48px vertical padding
  • xl: py-16 - 64px vertical padding