Patterns Overview

Airframe ships 62 CSS patterns, plus typography roles grouped with the gallery. @airframeui/core/catalog is the source of truth. Base element styles (dividers, lists, links) and form helpers are documented here too.

A visual index of every group lives on the patterns gallery.

Base elements

Base styling patterns for content and layout primitives.

Divider - Styled <hr> / vertical aria-orientation
Images - Responsive images and figure defaults
Link - Link defaults
Lists - List defaults and .af-list
Section & Surface - Structural containers for spacing and backgrounds

Typography

Text roles and page type from typography.css. Full examples: Typography. Utilities: Typography utilities.

Text roles - Display, af-text-h*, body, caption, overline
Lead - Larger muted intro copy
Eyebrow - Uppercase section label (af-is-on-primary on brand)
Fluid & stats - Clamp headings and af-stat-display
Prose - Readable line length (af-prose, narrow, wide)
Blockquote - Native quote and af-blockquote

Buttons

Action patterns with a shared af-btn grammar.

Button - Variants (ghost, text-link), sizes, loading spinner
Button Group - Grouped buttons with connected styling
Icon Button - Icon-only buttons
Link Button - Links styled as buttons

Badges & Status

Status indicators, tags, and loading placeholders.

Avatar - User profile images
Badge - Small status indicators
Chip - Tags, filters, and removable items
Icon Box - Icon container for feature cards
Pill - Compact labeled chips for tags and meta
Skeleton - Content placeholders
Spinner - Loading indicators

Forms

Complete form patterns for building accessible, user-friendly forms.

Checkbox - Checkbox inputs
Classless Form - Automatic styling with form.af-form
Field - Form field structure with labels and help text
File Input - File upload inputs
Form Layout - Form structure and spacing
Input - Text inputs (text, email, password, etc.)
Input Group - Prefix, suffix, and in-field actions
Label - Styled labels (semantic-first)
Radio - Radio button groups
Range - Slider inputs
Select - Dropdown selects
Switch - Toggle switches
Textarea - Multi-line text inputs
Validation & Error States - Errors, help text, required fields

Navigation patterns for site navigation, tabs, breadcrumbs, and pagination.

Breadcrumbs - Breadcrumb navigation
Dropdown Menu - Action menu (native popover)
Menu List - Menu and list navigation
Nav Collapse - Mobile menu. Sheet under the bar, or af-is-overlay for a full-page panel.
Navbar - Main navigation bar
Nav Pills - Settings/section nav (filled, responsive)
Pagination - Page navigation controls
Side Navigation - Sidebar navigation
Skip to Content - Hidden until focused; first Tab jumps to main
Table of Contents - In-page navigation for long-form content
Tabs - In-page panels (tablist / tab / tabpanel)

Content & Messaging

Patterns for displaying content, messages, and status information.

Alert - Alert messages
Banner - Site-wide banner messages
Callout - Subtle alert variant
Card - Card layouts and variants
Empty State - Empty state displays
KPI - Key Performance Indicator displays
Meter - Meter elements for measurements
Progress - Progress bars
Toast - Toast notifications
Tooltip - CSS-only tooltips using aria-label

Data Display

Patterns for displaying structured data and information.

Accordion - Collapsible content sections
Action Row - Title + hint left, control right
Code Block - Code snippet displays
Description List - Key-value pairs
List Group - Selectable list items
Steps - Multi-step progress trackers
Table - Tables for tabular data
Timeline - Chronological event displays

Overlays

Overlay patterns for modal dialogs, backdrops, and drawers.

Backdrop - Full-screen overlay backdrop
Dialog - Modal dialogs using native <dialog> element
Drawer - Side drawer panels
Page Loader - Full-page / auth loader

Quick Links

Browse detailed documentation for each category:

Base elements - Lists, images, links, dividers, surfaces
Typography - Text roles, lead, eyebrow, prose, blockquote
Buttons - Button patterns and variants
Badges & Status - Status indicators and tags
Forms - Complete form patterns
Navigation - Navigation components
Content & Messaging - Cards, alerts, callouts, and more
Data Display - Tables, lists, and data components
Overlays - Dialogs, drawers, and modals

Print helpers (af-no-print, af-page-break*) live with the other utilities, on Print Utilities.

Getting Started

All patterns are available when you import the core CSS:

@import "@airframeui/core/core.css";

Each pattern uses semantic class names with the af- prefix. For example:

af-btn for buttons
af-card for cards
af-input for inputs
af-table for tables

See the Usage guide for more information on getting started with Airframe patterns.

Need a whole section? Start from Blocks, then change it. A complete screen? Start from Blueprints, then change that too. Structure arranges UI; patterns are the pieces.