title: Layout & Typography page: layout

Layout & Typography

Core layout utilities, typography styles, and structural components for building pages.

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:

2 Columns:

4 Columns:

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