Layout & Typography

Source

Typography scale, grid system, hero sections, spacing utilities, and image handling.

Typography Scale

Heading 1 — text-5xl

Heading 2 — text-4xl

Heading 3 — text-3xl

Heading 4 — text-2xl

Heading 5 — text-xl

Heading 6 — text-lg

Body text — text-base (default)

Small text — text-sm

Extra small text — text-xs

Grid System

2 Columns

Column 1

Column 2

3 Columns

Column 1

Column 2

Column 3

4 Columns

Column 1

Column 2

Column 3

Column 4

Jumbo / Hero Sections

Default Jumbo

Welcome to the Platform

A hero section for announcements and landing pages

Primary Jumbo

Get Started Today

With a branded background color for emphasis

Learn More

Spacing Utilities

Padding

p-2

p-4

p-6

Margin Bottom

mb-2

mb-4

mb-6

Last element

Directional Padding

px-4 py-2

px-6 py-3

Image Component

Object-Fit Modes (wide image in square container)

cover (crops, no distortion)

contain (letterbox)

fill (stretches)

Aspect Ratios (tall image)

aspect-square

aspect-video (16:9)

contain + aspect-video

Source

Loading...