Back to Layouts

Content-focused layouts with centered alignment for optimal readability

Container Width:
Current: 56rem

This demonstrates how content looks at different container widths. The optimal line length for reading is typically between 50-75 characters per line, which affects how we choose our max-width values.

Notice how the reading experience changes as you adjust the container width. Narrower containers create shorter lines that are easier to scan, while wider containers allow for more content density but may reduce readability.

Article Layout

Optimal reading experience with centered content

max-w-3xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Form Layout

Focused form experience with narrow container

max-w-md28rem
Dashboard Layout

Wide centered container for data visualization

max-w-6xl72rem

Total Users

12,847

Revenue

$24,590

Conversion

3.2%
Landing Page

Marketing content with centered sections

max-w-5xl

The complete toolkit for modern web development. Build faster, ship sooner, and delight your users with our powerful design system.

Mobile
• Full width with padding
• Stack elements vertically
• Increase line height
• Larger touch targets
px-4 md:px-8
Tablet
• Moderate max-width
• Balanced padding
• Two-column layouts
• Larger text sizes
max-w-2xl md:max-w-4xl
Desktop
• Full max-width
• Generous padding
• Multi-column layouts
• Dense information
max-w-6xl lg:px-12
Basic Centered Container
<div className="min-h-screen bg-muted py-12 px-4 sm:px-6 lg:px-8">
  <div className="max-w-4xl mx-auto">
    <div className="bg-white shadow rounded-lg p-6">
      <AnchorHeading as="h1" className="text-3xl font-bold text-gray-900 mb-4">
        Centered Content
      </AnchorHeading>
      <p className="text-muted-foreground">
        Your main content goes here...
      </p>
    </div>
  </div>
</div>
Multi-Section Centered Layout
<div className="min-h-screen bg-background">
  {/* Hero Section */}
  <section className="py-20 px-4 sm:px-6 lg:px-8">
    <div className="max-w-4xl mx-auto text-center">
      <AnchorHeading as="h1" className="text-5xl font-bold text-gray-900 mb-6">
        Welcome to Our Product
      </AnchorHeading>
      <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
        Centered hero content with constrained width for readability
      </p>
    </div>
  </section>
  
  {/* Features Section */}
  <section className="py-16 px-4 sm:px-6 lg:px-8 bg-muted">
    <div className="max-w-6xl mx-auto">
      <AnchorHeading as="h2" className="text-3xl font-bold text-center mb-12">Features</AnchorHeading>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        {/* Feature cards */}
      </div>
    </div>
  </section>
  
  {/* Article Section */}
  <section className="py-16 px-4 sm:px-6 lg:px-8">
    <div className="max-w-3xl mx-auto prose prose-lg">
      <AnchorHeading as="h2">About Our Mission</AnchorHeading>
      <p>Narrower container for optimal reading experience...</p>
    </div>
  </section>
</div>

Optimal Reading Experience

  • 50-75 characters per line for optimal readability
  • 1.5-1.6 line height for comfortable reading
  • 16px minimum font size for body text
  • 4.5:1 contrast ratio minimum for accessibility

Container Width Guidelines

max-w-md28rem
Forms, modals, narrow content
max-w-3xl48rem
Articles, blog posts, reading content
max-w-6xl72rem
Dashboards, marketing pages, wide layouts