Typography

Text sizes and font weights for consistent typography across your application.

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-xs

<h1 class="text-4xl font-bold">Heading</h1>
<p class="text-gray-600">Paragraph text</p>
<p class="text-sm">Small text</p>

Grid System

Responsive grid layouts with automatic column sizing and gap control.

3 Columns:

1

2

3

2 Columns:

1

2

4 Columns:

1

2

3

4

<div class="grid grid-cols-3 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

Jumbo / Hero

Large banner sections for important announcements and page headers.

Default Jumbo

A hero section for announcements

Primary Jumbo

With custom background color

<div class="jumbo jumbo-lg">
  <div class="jumbo-content">
    <h1 class="jumbo-title">Title</h1>
    <p class="jumbo-subtitle">Subtitle</p>
  </div>
</div>

Cards

Content containers with optional headers, footers, and interactive states.

Basic Card

Simple card with padding and border.

Interactive Card

Hover for shadow effect.

Card with Header

Separate header section.

<div class="card card-interactive">
  <div class="card-body">
    <h3 class="card-title">Title</h3>
    <p>Content</p>
  </div>
</div>

Spacing Utilities

Margin and padding utilities for consistent spacing throughout your layout.

p-* padding, m-* margin

px-* horizontal, py-* vertical

mt-* top, mb-* bottom, ml-* left, mr-* right

Scale: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24

<div class="p-4 mb-6">
  Padding 1rem, margin-bottom 1.5rem
</div>

<div class="px-4 py-2">
  Horizontal padding 1rem
  Vertical padding 0.5rem
</div>

Images

The <what-image> component handles aspect ratios and object-fit to prevent distortion.

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

<!-- Basic usage -->
<what-image src="/photo.jpg" alt="Photo"/>

<!-- Square with cover (no distortion) -->
<what-image
  src="/photo.jpg"
  fit="cover"
  ratio="aspect-square"
  rounded="rounded"/>

<!-- 16:9 with contain -->
<what-image
  src="/photo.jpg"
  fit="contain"
  ratio="aspect-video"/>

<!-- Props: src, alt, fit, ratio,
  rounded, width, height -->
<!-- fit: cover|contain|fill|none -->

Layout & Typography