SectionContainer
Reusable section wrapper providing consistent vertical spacing and maximum width constraints for marketing page sections. Supports both fluid (clamp-based) and fixed (breakpoint-based) spacing strategies.
Live Preview
Widths
Width Variations
Three container widths for different content types
Narrow Container (max-w-4xl)
Perfect for blog posts, documentation, and long-form content where readability is key. The narrow width creates comfortable line lengths for extended reading.
Standard Container (max-w-6xl)
The default width for most marketing sections. Provides good balance between content density and readability.
Wide Container (max-w-7xl)
Ideal for hero sections, image galleries, and layouts that need more breathing room.
Spacing
Spacing Strategies
Choose between fixed breakpoint-based or fluid responsive spacing
Fixed Spacing
Uses breakpoint-based spacing (80px on mobile, 96px on desktop). The padding jumps at specific breakpoints for predictable layouts.
py-20 md:py-24Fluid Spacing
Uses CSS clamp() for smooth scaling between 64px and 96px. The padding scales smoothly with viewport width for a more refined experience.
clamp(4rem, 3rem + 4vw, 6rem)Real World
Hero Section
Wide container with fluid spacing and gradient background
Welcome to Launch77
Build better apps faster with our AI-powered platform
Features Section
Standard container with centered heading and feature grid
Why Choose Launch77
Everything you need to succeed
Fast Development
Ship in days, not months
Premium Quality
Enterprise-grade code
Secure by Default
Built-in best practices
CTA Section
Standard container with gradient background and centered CTA
Ready to Get Started?
Join thousands of developers building with Launch77
No credit card required • 14-day free trial
Usage Guidance
✓ When to Use
Wrap content sections to ensure consistent vertical spacing and max-width constraints across marketing pages. Use for features sections, content blocks, and any repeating page sections that need consistent layout.
✗ When NOT to Use
Don't use for full-bleed sections that need edge-to-edge content, highly custom layouts requiring specific spacing, hero sections with specialized layouts (use HeroCentered/HeroSplit), or non-marketing application pages.
Props
spacingwidthaschildrenclassNamestyleonClickonChange