Back to Demo Hub

Spacing & Layout

Container widths, responsive padding, breakpoints, and section spacing

Container

.containermax-width: 1280px, mx-auto, px-6
max-w-7xl mx-autoTailwind equivalent (1280px)

max-w-7xl (1280px)

Content Area

Responsive Padding

Horizontal padding scales with viewport width. Used on all section wrappers.

BreakpointWidthPadding XClass
Mobile< 768px24px (1.5rem)px-6
Tablet768px+48px (3rem)md:px-12
Desktop1024px+80px (5rem)lg:px-20

Section Spacing

.sectionpadding: 5rem 0 (80px vertical)
py-12 md:py-16 lg:py-20TwoTab sections (48/64/80px)
h-[calc(100vh-5rem)]Hero sections (full height minus header)

Breakpoints

sm640px
md768px
lg1024px
xl1280px

Aspect Ratios

Responsive aspect ratios used in TwoTab image containers.

16:9

Mobile default for all TwoTab images

4:3

Desktop for TwoTabImageText/Link

3:4

Desktop for TwoTabStats (portrait)

Grid Patterns

2-Column (TwoTab sections)

Image
Content

3-Column (IconBoxGrid, cards)

Col 1
Col 2
Col 3

2x2 Grid (TwoTabStats)

Stat 1
Stat 2
Stat 3
Stat 4

Full-width vs Boxed

Full-width Sections

  • Header / Footer
  • All Hero variants
  • CTA sections (some variants)
  • LogoScroll

Boxed Sections (max-w-7xl)

  • All TwoTab variants
  • Stats, Testimonials, FAQ
  • IconBoxGrid, IconBoxScroll
  • All new sections (Data Display, Cards, etc.)