# 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...
```