# Airframe Blocks > 28 page-section guides built only from Airframe CSS classes and plain HTML. Each block is a single page section to start from. Structure arranges. Patterns are pieces. Blocks are sections. Blueprints are complete screens. Paste the markup, then change it to suit the design. Same classes in React, Vue, Angular or a static file. Class grammar and tokens are documented at https://airframeui.com/docs. Browse these with previews at https://airframeui.com/blocks. Complete screen guides: https://airframeui.com/blueprints. ## Marketing Landing page sections — hero through closing call to action. ### Announcement banner Full-width bar for a launch, migration notice or maintenance window. af-banner carries the intent colour and its own bottom border, so it sits directly above the site header with nothing between them. Built from: [Banner](https://airframeui.com/docs/patterns/content/banner), [Link](https://airframeui.com/docs/patterns/base-elements/link) Source: https://airframeui.com/blocks#block-announcement-banner ```html
Airframe 1.0 is out. Cascade layers, container queries and 60+ patterns. Read the changelog
``` ### Marketing hero Centered hero with a pill announcement, fluid headline, supporting lead, and a paired primary + outline call to action. Built from: [Pill](https://airframeui.com/docs/patterns/badges-chips/pill), [Typography](https://airframeui.com/docs/typography), [Link button](https://airframeui.com/docs/patterns/button/link-button), [Section](https://airframeui.com/docs/patterns/base-elements/section-surface) Source: https://airframeui.com/blocks#block-marketing-hero ```html
New v0.2.0 on npm

The structure your framework is missing.

One stylesheet, no runtime. Paste this section into React, Vue, Angular or plain HTML and it renders the same.

Get started Browse patterns
``` ### Feature grid Three-up feature cards. Each card pairs a numbered icon box with a title and a one-line value proposition. Collapses to a single column below 768px. Built from: [Card](https://airframeui.com/docs/patterns/content/card), [Icon box](https://airframeui.com/docs/patterns/badges-chips/icon-box), [Grid](https://airframeui.com/docs/grid), [Section](https://airframeui.com/docs/patterns/base-elements/section-surface) Source: https://airframeui.com/blocks#block-feature-grid ```html

Why Airframe

Primitives that outlive your stack

No runtime

Classes on markup. No provider, no hydration, nothing to ship at runtime.

Accessible defaults

Focus rings, contrast and hit areas come from the tokens, not from a checklist.

Themed by tokens

Override a handful of custom properties and every pattern follows.

``` ### Pricing tiers Three-tier pricing grid with the middle plan emphasised by a primary border and a chip. Prices use af-stat-display; each card footer carries a full-width action. Built from: [Card](https://airframeui.com/docs/patterns/content/card), [Chip](https://airframeui.com/docs/patterns/badges-chips/chip), [Button](https://airframeui.com/docs/patterns/button/button), [Grid](https://airframeui.com/docs/grid) Source: https://airframeui.com/blocks#block-pricing-tiers ```html

Pricing

Plans that scale with the team

Starter

For side projects

$0

  • Up to 3 projects
  • Community support
  • 7-day history
Start free

Team

Most popular
For product teams

$29 / user / month

  • Unlimited projects
  • Shared environments
  • Priority support
Start 14-day trial

Enterprise

For regulated rollouts

Custom

  • SSO and audit log
  • Dedicated environment
  • Named support engineer
Talk to sales
``` ### Testimonials Two-up quote cards using figure and blockquote, with an avatar-led attribution footer. Swap the initials avatar for an image when you have one. Built from: [Card](https://airframeui.com/docs/patterns/content/card), [Avatar](https://airframeui.com/docs/patterns/badges-chips/avatar), [Typography](https://airframeui.com/docs/typography), [Grid](https://airframeui.com/docs/grid) Source: https://airframeui.com/blocks#block-testimonials ```html

Customers

What teams say after a week

We deleted 4,000 lines of utility classes and the design got more consistent, not less. The markup finally reads like the UI.
A. Rivera Platform lead
Two frameworks, one stylesheet. Our Angular admin and our React marketing site finally look like the same product.
J. Tanaka Design systems engineer
``` ### CTA banner Full-width closing call to action locked to the catalog dark canvas. af-force-dark remaps surfaces and text; af-bg-background paints that canvas. Buttons keep the live brand. Built from: [Section](https://airframeui.com/docs/patterns/base-elements/section-surface), [Button](https://airframeui.com/docs/patterns/button/button), [Typography](https://airframeui.com/docs/typography) Source: https://airframeui.com/blocks#block-cta-banner ```html

Build the thing. Ship the thing.

One stylesheet, every framework, nothing to configure. Start with the install and add patterns as you need them.

Get started Read the docs
``` ### Logo cloud Social-proof strip that sits between the hero and the feature grid. Wordmarks are plain list items here — drop in img elements with the same list structure when you have real logos. Built from: [Section](https://airframeui.com/docs/patterns/base-elements/section-surface), [Typography](https://airframeui.com/docs/typography), [Stack](https://airframeui.com/docs/structure) Source: https://airframeui.com/blocks#block-logo-cloud ```html

Trusted by teams at

``` ### FAQ accordion Five-question FAQ built on native details and summary, so it expands with zero JavaScript and stays keyboard accessible by default. Built from: [Accordion](https://airframeui.com/docs/patterns/data-display/accordion), [Section](https://airframeui.com/docs/patterns/base-elements/section-surface), [Stack](https://airframeui.com/docs/structure) Source: https://airframeui.com/blocks#block-faq-accordion ```html

FAQ

Common questions

Do I need a build step?

No. Import one stylesheet from npm or a CDN and start writing classes. There is no compiler, no config file and no purge step.

Which frameworks does it support?

All of them. Airframe is CSS plus markup conventions, so the same class strings work in React, Vue, Angular, Svelte, Rails or a static HTML file. React uses className instead of class.

Do I need Tailwind or an icon library?

Neither. Every block on this page uses only Airframe classes and plain HTML, so pasted markup renders the same without adding a single dependency.

How do I match our brand?

Override the design tokens. Setting a handful of custom properties such as --af-color-primary and --af-radius re-themes every pattern at once, with no rebuild.

Will it fight my existing CSS?

Airframe ships inside CSS cascade layers with low specificity, so your own rules win by default and you can adopt it one page at a time.

``` ### Newsletter signup Single-field email capture in a card. The input and button sit in a 12-column grid so they share a row from 640px up and stack on phones. Built from: [Card](https://airframeui.com/docs/patterns/content/card), [Field](https://airframeui.com/docs/patterns/forms/field), [Input](https://airframeui.com/docs/patterns/forms/input), [Button](https://airframeui.com/docs/patterns/button/button) Source: https://airframeui.com/blocks#block-newsletter-signup ```html

Release notes

One email per release. Nothing else.

Unsubscribe in one click. We never share your address.

``` ### Blog card grid Three-up article grid. Each card is an
whose title wraps the link, so the whole row of headings reads as a list of destinations rather than a wall of "read more". Built from: [Card](https://airframeui.com/docs/patterns/content/card), [Grid](https://airframeui.com/docs/grid), [Avatar](https://airframeui.com/docs/patterns/badges-chips/avatar), [Typography](https://airframeui.com/docs/typography) Source: https://airframeui.com/blocks#block-blog-card-grid ```html

Writing

From the blog

Engineering

Why we bet on cascade layers

Layers let a design system ship defaults your own CSS can override without a specificity war.

A. Rivera · 6 min read
Accessibility

Focus rings are a feature

What we changed after watching keyboard users try to check out on three real storefronts.

J. Tanaka · 9 min read
Product

Theming without a build step

Custom properties all the way down means a theme is a stylesheet, not a compile target.

M. Okafor · 4 min read
``` ### Article body Blog essay: chips and byline, a lead, a pull quote, and a code sample in the same measure as the prose. Built from: [Chip](https://airframeui.com/docs/patterns/badges-chips/chip), [Avatar](https://airframeui.com/docs/patterns/badges-chips/avatar), [Typography](https://airframeui.com/docs/typography), [Code block](https://airframeui.com/docs/patterns/data-display/code-block) Source: https://airframeui.com/blocks#block-article-body ```html
Engineering 6 min read

Why the board should look like the deploy

A. Rivera 12 March 2026

If a card says done and production still runs last Tuesday's build, the two systems do not share a clock.

If the board cannot point at the build, it is a mood board.

if (card.status === "done" && deploy.sha !== card.sha) {
  throw new Error("board is ahead of production");
}
``` ## Authentication Sign-in and account entry points. ### Sign-in card Narrow sign-in card with labelled email and password fields, a remember-me checkbox paired with a recovery link, and a full-width submit. Built from: [Card](https://airframeui.com/docs/patterns/content/card), [Field](https://airframeui.com/docs/patterns/forms/field), [Input](https://airframeui.com/docs/patterns/forms/input), [Checkbox](https://airframeui.com/docs/patterns/forms/checkbox), [Button](https://airframeui.com/docs/patterns/button/button), [Link](https://airframeui.com/docs/patterns/base-elements/link) Source: https://airframeui.com/blocks#block-auth-sign-in ```html

Sign in

Welcome back
Forgot password?

No account? Create one

``` ### Create account card Registration card with autocomplete tokens that let password managers do their job, a help line stating the password rule before submission, and a required terms checkbox. Built from: [Card](https://airframeui.com/docs/patterns/content/card), [Field](https://airframeui.com/docs/patterns/forms/field), [Input](https://airframeui.com/docs/patterns/forms/input), [Checkbox](https://airframeui.com/docs/patterns/forms/checkbox), [Button](https://airframeui.com/docs/patterns/button/button), [Link](https://airframeui.com/docs/patterns/base-elements/link) Source: https://airframeui.com/blocks#block-auth-sign-up ```html

Create your account

Free for 14 days, no card required

At least 12 characters.

Already have an account? Sign in

``` ## Application Dashboard and collection-view furniture. ### Page heading with actions The bar that opens almost every application screen: breadcrumb trail, h1, status and metadata, and the page-level actions. Current page is plain text with aria-current, not a link back to itself. Built from: [Breadcrumbs](https://airframeui.com/docs/patterns/navigation/breadcrumbs), [Badge](https://airframeui.com/docs/patterns/badges-chips/badge), [Button](https://airframeui.com/docs/patterns/button/button), [Stack](https://airframeui.com/docs/structure) Source: https://airframeui.com/blocks#block-page-heading ```html

Deployments

Live Sydney · updated 4 minutes ago by A. Rivera
``` ### Stats row Four-tile KPI row for a dashboard header. af-kpi already draws its own surface, so the tiles go straight into the grid rather than being wrapped in cards. Built from: [KPI](https://airframeui.com/docs/patterns/content/kpi), [Grid](https://airframeui.com/docs/grid), [Stack](https://airframeui.com/docs/structure) Source: https://airframeui.com/blocks#block-stats-row ```html

Overview

This month

Updated 12 minutes ago

Monthly active users
48,294
+12.4% vs last month
Sessions today
3,128
+5.2% vs average
Conversion rate
4.7%
-0.3% vs last week
Response time
182ms
-8.1% vs last week
``` ### Empty state panel Card-wrapped empty state for a collection view that has no rows yet. Pairs a primary action with a lower-commitment alternative. Built from: [Card](https://airframeui.com/docs/patterns/content/card), [Empty state](https://airframeui.com/docs/patterns/content/empty-state), [Button](https://airframeui.com/docs/patterns/button/button) Source: https://airframeui.com/blocks#block-empty-state-panel ```html

Projects

Everything you ship lives here

No projects yet

Create a project to start tracking deploys, environments and members.

``` ### Table with toolbar and pagination The workhorse collection view: card header as toolbar, a real with scope on every header cell, and pagination in the footer. af-table-responsive only scrolls the table, so the toolbar and pagination stay put. Built from: [Card](https://airframeui.com/docs/patterns/content/card), [Table](https://airframeui.com/docs/patterns/data-display/table), [Pagination](https://airframeui.com/docs/patterns/navigation/pagination), [Badge](https://airframeui.com/docs/patterns/badges-chips/badge), [Input](https://airframeui.com/docs/patterns/forms/input) Source: https://airframeui.com/blocks#block-data-table ```html

Members

24 people can access this workspace
Workspace members, sorted by name
Name Role Status Last active Actions
A. Rivera Admin Active 2 hours ago
J. Tanaka Editor Invited Never
M. Okafor Viewer Active Yesterday

Showing 1–3 of 24

``` ### Record list with row actions Stacked list where every row carries metadata and its own controls. af-action-row-group draws the dividers, so the rows need no borders of their own — and no interactive element ends up nested inside another. Built from: [Card](https://airframeui.com/docs/patterns/content/card), [Action row](https://airframeui.com/docs/patterns/data-display/action-row), [Button](https://airframeui.com/docs/patterns/button/button) Source: https://airframeui.com/blocks#block-record-list ```html

Pending invitations

Invited, but not signed up yet

j.tanaka@example.com

Editor · invited 3 days ago by A. Rivera

m.okafor@example.com

Viewer · invited yesterday by A. Rivera

s.mehta@example.com

Admin · invite expires in 2 days

``` ### Detail panel Record summary for a detail screen. A description list is the right element here: af-dl lays the pairs out in two columns while dt/dd keep the label-to-value relationship in the accessibility tree. Built from: [Card](https://airframeui.com/docs/patterns/content/card), [Description list](https://airframeui.com/docs/patterns/data-display/description-list), [Badge](https://airframeui.com/docs/patterns/badges-chips/badge), [Button](https://airframeui.com/docs/patterns/button/button) Source: https://airframeui.com/blocks#block-detail-panel ```html

Invoice INV-2043

Issued 12 March 2026
Awaiting payment
Customer
Delta
Billing email
ap@example.com
Plan
Team · 24 seats
Amount due
$696.00 AUD
Due date
26 March 2026
``` ### Confirmation dialog Destructive-action confirmation on the native element, so Escape, focus handling and the backdrop come from the browser — the two inline handlers are the whole integration. The preview is the same markup left open inside a positioned box, since an open non-modal dialog is absolutely positioned. Built from: [Dialog](https://airframeui.com/docs/patterns/overlays/dialog), [Button](https://airframeui.com/docs/patterns/button/button) Source: https://airframeui.com/blocks#block-confirm-dialog ```html

Delete Atlas?

Atlas and its 14 deployments will be removed permanently. Members lose access immediately and this cannot be undone.

 ``` ### Inbox list Selectable message rows. af-list-group draws the borders; nest a button in each li for the row action. The active item is the one currently open in the reading pane. Built from: [List group](https://airframeui.com/docs/patterns/data-display/list-group), [Badge](https://airframeui.com/docs/patterns/badges-chips/badge) Source: https://airframeui.com/blocks#block-inbox-list ```html ``` ### Kanban board Three columns in a horizontal row that scrolls on small screens. Each card carries a label chip and an assignee avatar — no drag library required for the layout. Built from: [Card](https://airframeui.com/docs/patterns/content/card), [Badge](https://airframeui.com/docs/patterns/badges-chips/badge), [Avatar](https://airframeui.com/docs/patterns/badges-chips/avatar) Source: https://airframeui.com/blocks#block-kanban-board ```html

Todo · 2

SSO notes on invite email

Docs

Sydney region runbook

Ops

In review · 1

Cache invalidation on tag

Bug

Done · 1

Ship Atlas 1.4

Release
``` ### Chat thread Incoming and outgoing bubbles in one column. Own messages align to the end and use the primary fill; the other person stays on the surface. Built from: [Avatar](https://airframeui.com/docs/patterns/badges-chips/avatar), [Input](https://airframeui.com/docs/patterns/forms/input), [Button](https://airframeui.com/docs/patterns/button/button) Source: https://airframeui.com/blocks#block-chat-thread ```html
J. Tanaka Online

Preview still serves yesterday's HTML when I move the tag.

Checking whether we purge by URL or by tag.

``` ## Forms Multi-field capture with real field semantics. ### Contact form Two-column contact section: an intro panel with a description list of contact details, and a card-wrapped form whose fields share a 12-column grid. Built from: [Card](https://airframeui.com/docs/patterns/content/card), [Field](https://airframeui.com/docs/patterns/forms/field), [Input](https://airframeui.com/docs/patterns/forms/input), [Select](https://airframeui.com/docs/patterns/forms/select), [Textarea](https://airframeui.com/docs/patterns/forms/textarea), [Description list](https://airframeui.com/docs/patterns/data-display/description-list) Source: https://airframeui.com/blocks#block-contact-form ```html

Contact

Talk to the team

Sales questions, technical help or partnerships. A real person answers every message.

Email
hello@example.com
Response time
One business day

Tell us a little about what you are building.

We reply within one business day.

``` ### Settings form with sections Long settings form split into fieldsets with legends, so each group announces itself. Text fields share a 12-column grid; the toggles use action rows, where every switch gets its label from the row title. Built from: [Card](https://airframeui.com/docs/patterns/content/card), [Form layout](https://airframeui.com/docs/patterns/forms/form-layout), [Field](https://airframeui.com/docs/patterns/forms/field), [Input](https://airframeui.com/docs/patterns/forms/input), [Select](https://airframeui.com/docs/patterns/forms/select), [Textarea](https://airframeui.com/docs/patterns/forms/textarea), [Action row](https://airframeui.com/docs/patterns/data-display/action-row), [Switch](https://airframeui.com/docs/patterns/forms/switch) Source: https://airframeui.com/blocks#block-settings-form ```html

Workspace settings

These apply to everyone in the workspace
Details

Shown to new members when they accept an invitation.

Notifications
``` ## Navigation Page chrome that closes a layout. ### Site header Skip link, then the header bar: brand, primary nav and a two-button account cluster. af-navbar drops its own horizontal padding when it wraps a container, so the header aligns with the page content below it. Built from: [Skip to content](https://airframeui.com/docs/patterns/navigation/skip), [Navbar](https://airframeui.com/docs/patterns/navigation/navbar), [Button](https://airframeui.com/docs/patterns/button/button), [Link](https://airframeui.com/docs/patterns/base-elements/link) Source: https://airframeui.com/blocks#block-site-header ```html Skip to content
``` ### Tabbed panel Tabs that switch panels with no JavaScript at all: a hidden radio per tab, labels as triggers, and :has() to reveal the matching panel. Every radio in a set shares a name, and that name has to be unique on the page. Built from: [Tabs](https://airframeui.com/docs/patterns/navigation/tabs), [Description list](https://airframeui.com/docs/patterns/data-display/description-list), [Typography](https://airframeui.com/docs/typography) Source: https://airframeui.com/blocks#block-tabbed-panel ```html
Commit
a91f4c2 · Fix cache invalidation
Duration
1m 48s
Region
Sydney

Build finished with 0 errors and 2 warnings. Full output is retained for 30 days.

Automatic deploys run on every push to main. Preview deploys are enabled for pull requests.

``` ### Site footer Four-column footer with a brand column and three link groups, closed by a copyright row. Each link group is a nav with its own accessible name. Built from: [Grid](https://airframeui.com/docs/grid), [Link](https://airframeui.com/docs/patterns/base-elements/link) Source: https://airframeui.com/blocks#block-site-footer ```html ```