Patterns Overview

Airframe includes 70+ CSS patterns organized into 8 categories. This page provides a quick reference to all available patterns.

Foundations

Base styling patterns for content and layout primitives.

• Divider - Styled <hr> element
• Images - Responsive images and figure defaults
• Links - Link defaults
• Lists - List defaults and .af-list
• Section & Surface - Structural containers for spacing and backgrounds
• Typography - Semantic headings, text roles, blockquote

Buttons, Badges & Status

Interactive elements for user actions and status indicators.

• Button - Primary button pattern with variants and states
• Button Group - Grouped buttons with connected styling
• Icon Button - Icon-only buttons
• Link Button - Links styled as buttons
• 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 - Grouped form controls
• 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

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

• Breadcrumbs - Breadcrumb navigation
• Dropdown Menu - Dropdown menus
• Menu List - Menu and list navigation
• Nav Collapse - Collapsible navigation sections
• Navbar - Main navigation bar
• Pagination - Page navigation controls
• Side Navigation - Sidebar navigation
• Table of Contents - In-page navigation for long-form content

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

Data Display

Patterns for displaying structured data and information.

• Accordion - Collapsible content sections
• 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

Media & Misc

Utility patterns and helpers.

• Print Styles - Print-specific styles and utilities
• Tooltip - CSS-only tooltips

Quick Links

Browse detailed documentation for each category:

• Badges & Chips - Status indicators and tags
• Buttons - Button patterns and variants
• Content & Messaging - Cards, alerts, callouts, and more
• Data Display - Tables, lists, and data components
• Forms - Complete form patterns
• Foundations - Typography, lists, images, links, dividers
• Misc - Tooltips, print styles, and utilities
• Navigation - Navigation components
• Overlays - Dialogs, drawers, and modals

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.