Patterns

Web native. Accessible. Future-proof.

Airframe primitives with almost zero JavaScript.

63 patterns · blocks · blueprints

Classes on markup. No runtime. Each card opens the docs for that pattern.

Start here

Open button Open card

Button

Variants, sizes, loading spinner.

Card

Card layouts and variants.

Foundations

Base styling for content and layout primitives.

Divider

Styled hr, including vertical aria-orientation.

af-divider

Images

Responsive images and figure defaults.

img

Link

Link defaults and visited/hover tokens.

af-link

Lists

List defaults and af-list.

af-list

Section & Surface

Structural containers for spacing and backgrounds.

af-section

Typography

Semantic headings, text roles, blockquote.

af-text-h1

Buttons

Action patterns with a shared af-btn grammar.

Button

Variants, sizes, loading spinner.

af-btn

Button Group

Grouped buttons with connected styling.

af-btn-group

Icon Button

Icon-only buttons.

af-btn-icon

Link Button

Links styled as buttons.

af-btn

Badges & Status

Status indicators, tags, and loading placeholders.

Avatar

User profile images and initials.

af-avatar

Badge

Small status indicators.

af-badge

Chip

Tags, filters, and removable items.

af-chip

Icon Box

Icon container for feature cards.

af-icon-box

Pill

Compact labeled chips for tags and meta.

af-pill

Skeleton

Content placeholders.

af-skeleton

Spinner

Loading indicators.

af-spinner

Forms

Accessible fields, controls, and validation.

Checkbox

Checkbox inputs.

af-checkbox

Classless Form

Automatic styling with form.af-form.

af-form

Field

Label, control, and help text as one unit.

af-field

File Input

File upload inputs and dropzones.

af-file-input

Form Layout

Fieldsets, inline fields, and grid.

af-field-inline

Input

Text, email, password, and the rest.

af-input

Input Group

Prefix, suffix, and in-field actions.

af-input-group

Label

Styled labels, semantic-first.

af-label

Radio

Radio button groups.

af-radio

Range

Slider inputs.

af-range

Select

Dropdown selects.

af-select

Switch

Toggle switches.

role="switch"

Textarea

Multi-line text, including auto-grow.

af-textarea

Validation

Errors, help text, required fields.

af-is-error

Navigation

Site chrome, tabs, breadcrumbs, and pagination.

Breadcrumbs

Breadcrumb navigation.

af-breadcrumbs

Dropdown Menu

Dropdown menus.

af-dropdown-menu

Menu List

Menu and list navigation.

af-menu-list

Nav Collapse

Collapsible navigation sections.

af-nav-collapse

Navbar

Main navigation bar.

af-navbar

Nav Pills

Settings and section nav, filled and responsive.

af-nav-pills

Pagination

Page navigation controls.

af-pagination

Side Navigation

Sidebar navigation.

af-side-nav

Table of Contents

In-page navigation for long-form content.

af-toc

Tabs

In-page panels: tablist, tab, tabpanel.

af-tabs

Content & Messaging

Cards, alerts, KPIs, and status surfaces.

Alert

Alert messages.

af-alert

Banner

Site-wide banner messages.

af-banner

Callout

Subtle alert variant.

af-callout

Card

Card layouts and variants.

af-card

Empty State

Empty collection and first-run displays.

af-empty-state

KPI

Key performance indicator tiles.

af-kpi

Meter

Meter elements for measurements.

af-meter

Progress

Progress bars.

af-progress

Toast

Toast notifications.

af-toast

Tooltip

CSS-only tooltips using aria-label.

af-tooltip

Data Display

Tables, lists, timelines, and structured records.

Accordion

Collapsible content sections.

af-accordion

Action Row

Title and hint left, control right.

af-action-row

Code Block

Code snippet displays.

af-code-block

Description List

Key-value pairs.

af-dl

List Group

Selectable list items.

af-list-group

Steps

Multi-step progress trackers.

af-steps

Table

Tables for tabular data.

af-table

Timeline

Chronological event displays.

af-timeline

Overlays

Dialogs, drawers, backdrops, and page loaders.

Backdrop

Full-screen overlay backdrop.

af-backdrop

Dialog

Modal dialogs using native dialog.

af-dialog

Drawer

Side drawer panels.

af-drawer

Page Loader

Full-page and auth loaders.

af-page-loader

Need a whole section instead?

Patterns are the parts. Heroes, pricing tables and sign-in cards live in blocks. Complete screens — landing, dashboard, inbox — live in the blueprints.

Blocks Blueprints