Copy-Paste Recipes
Ready-to-use patterns for common UI needs. Copy, paste, customize.
Auth Form
Section titled “Auth Form”<div class="af-container-xs">
<div class="af-stack af-gap-lg">
<h1>
Sign In
</h1>
<form class="af-stack">
<div class="af-field">
<label for="email" class="af-field__label">
Email
</label>
<input type="email" id="email" class="af-input" required>
</div>
<div class="af-field">
<label for="password" class="af-field__label">
Password
</label>
<input type="password" id="password" class="af-input" required>
</div>
<div class="af-inline af-justify-between">
<label class="af-field">
<input type="checkbox" class="af-checkbox">
<span>
Remember me
</span>
</label>
<a href="#" >
Forgot password?
</a>
</div>
<button type="submit" class="af-btn af-w-full">
Sign In
</button>
</form>
</div>
</div>Sign In
Heading with Subtitle
Section titled “Heading with Subtitle”Use <hgroup> to visually group a heading with its subtitle or tagline. Perfect for hero sections, page headers, and card titles.
<!-- Hero section -->
<hgroup>
<h1>
Airframe
</h1>
<p class="af-lead">
A structural UI system designed for humans and AI.
</p>
</hgroup>
<!-- Card title with subtitle -->
<div class="af-card">
<hgroup>
<h2 class="af-card__title">
Dashboard
</h2>
<p class="af-text-sm af-text-muted">
Last updated 2 hours ago
</p>
</hgroup>
<div class="af-card__body">
Content here
</div>
</div>
<!-- Page header -->
<hgroup>
<h1>
Settings
</h1>
<p>
Manage your account preferences and security settings.
</p>
</hgroup>Airframe
A structural UI system designed for humans and AI.
Dashboard
Last updated 2 hours ago
Content here
Settings
Manage your account preferences and security settings.
Note: <hgroup> provides visual grouping only. Browsers don’t implement its semantic outline behavior, so ensure your heading hierarchy remains correct for accessibility.
Settings Page
Section titled “Settings Page”Note: This example uses af-grid with column spans for an asymmetric layout (3/9 split). For equal-width columns, prefer af-grid af-grid-2 or af-grid af-grid-3.
<div class="af-container">
<div class="af-grid af-gap-xl">
<aside class="af-col-span-3@lg">
<nav class="af-stack af-gap-sm">
<a href="#" class="af-is-active">
Profile
</a>
<a href="#" >
Security
</a>
<a href="#" >
Notifications
</a>
</nav>
</aside>
<main class="af-col-span-9@lg">
<div class="af-stack af-gap-lg">
<h1>
Settings
</h1>
<div class="af-card">
<h2 class="af-card__title">
Profile
</h2>
<div class="af-card__body">
<form class="af-stack">
<div class="af-field">
<label for="name" class="af-field__label">
Name
</label>
<input type="text" id="name" class="af-input" value="John Doe">
</div>
<div class="af-field">
<label for="email" class="af-field__label">
Email
</label>
<input type="email" id="email" class="af-input" value="john@example.com">
</div>
<div class="af-inline af-justify-end">
<button type="submit" class="af-btn">
Save Changes
</button>
</div>
</form>
</div>
</div>
</div>
</main>
</div>
</div>Settings
Profile
Table Page
Section titled “Table Page”<div class="af-container">
<div class="af-stack af-gap-lg">
<div class="af-inline af-justify-between">
<h1>
Users
</h1>
<button class="af-btn">
Add User
</button>
</div>
<div class="af-card">
<div class="af-card__body">
<table class="af-table">
<thead>
<tr>
<th>
Name
</th>
<th>
Email
</th>
<th>
Role
</th>
<th>
Actions
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
John Doe
</td>
<td>
john@example.com
</td>
<td>
Admin
</td>
<td>
<div class="af-inline af-gap-sm">
<button class="af-btn af-is-sm">
Edit
</button>
<button class="af-btn af-is-sm af-is-danger">
Delete
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>Users
| Name | Role | Actions | |
|---|---|---|---|
| John Doe | john@example.com | Admin |
|
Empty State
Section titled “Empty State”<div class="af-empty-state">
<div class="af-empty-state-icon">
📭
</div>
<h3 class="af-empty-state-title">
No items yet
</h3>
<p>
Get started by creating your first item.
</p>
<button class="af-btn">
Create Item
</button>
</div>No items yet
Get started by creating your first item.
Dashboard Layout
Section titled “Dashboard Layout”Note: This uses af-grid with column counts for equal-width cards. Prefer this over af-cols-12 for card grids.
<div class="af-container">
<div class="af-stack af-gap-lg">
<header class="af-inline af-justify-between">
<h1>
Dashboard
</h1>
<div class="af-inline af-gap-sm">
<button class="af-btn af-is-secondary">
Export
</button>
<button class="af-btn">
New
</button>
</div>
</header>
<div class="af-grid-1 af-grid-2@md af-grid-4@lg af-gap-lg">
<div class="af-card">
<h3 class="af-card__title">
Users
</h3>
<div class="af-card__body">
<p class="af-text-h2">
1,234
</p>
<p class="af-text-sm">
+12% from last month
</p>
</div>
</div>
<div class="af-card">
<h3 class="af-card__title">
Revenue
</h3>
<div class="af-card__body">
<p class="af-text-h2">
$12,345
</p>
<p class="af-text-sm">
+8% from last month
</p>
</div>
</div>
<div class="af-card">
<h3 class="af-card__title">
Orders
</h3>
<div class="af-card__body">
<p class="af-text-h2">
567
</p>
<p class="af-text-sm">
+5% from last month
</p>
</div>
</div>
<div class="af-card">
<h3 class="af-card__title">
Growth
</h3>
<div class="af-card__body">
<p class="af-text-h2">
+23%
</p>
<p class="af-text-sm">
Overall growth rate
</p>
</div>
</div>
</div>
</div>
</div>Dashboard
Users
1,234
+12% from last month
Revenue
$12,345
+8% from last month
Orders
567
+5% from last month
Growth
+23%
Overall growth rate
Responsive Sidebar Layout
Section titled “Responsive Sidebar Layout”Note: This uses af-grid with column spans for an asymmetric layout (3/9 split). The grid auto-detects the 12-column system when children have af-col-span-* classes.
<div class="af-grid af-gap-0">
<!-- Sidebar -->
<aside class="af-col-span-3@lg af-drawer af-drawer-left">
<nav class="af-stack af-gap-sm af-p-lg">
<a href="#" class="af-is-active">
Dashboard
</a>
<a href="#" >
Settings
</a>
<a href="#" >
Profile
</a>
</nav>
</aside>
<!-- Main Content -->
<main class="af-col-span-9@lg af-p-xl">
<div class="af-stack af-gap-lg">
<h1>
Dashboard
</h1>
<div class="af-card">
<div class="af-card__body">
Main content here
</div>
</div>
</div>
</main>
</div>Dashboard
Main content here
React Recipes
Section titled “React Recipes”All recipes work identically in React - just use className instead of class:
<div className="af-stack af-gap-lg">
<h1>Dashboard</h1>
<div className="af-card">
<div className="af-card__body">Content</div>
</div>
</div>