Every block AWT includes, rendered by AWT. Each card links to the block’s own page: what it does, every setting it offers, and how it behaves in every state, light and dark. Child blocks (for example the items inside an accordion) are documented on their parent’s page.
Page structure
The sections and compositions a page is made of.
Inline set
A row of evenly spaced buttons, tags, icons, links or toggletips.
Inline set settings and states
Pricing tile
A selectable pricing tile with a plan name, price, description and button.
Pricing tile settings and states
Section
A container that keeps content at a readable width with even spacing.
Section settings and states
Statistic
A large number with a heading and optional description, for highlighting key figures.
Statistic settings and states
Site chrome
Header, navigation, footer: the shell around your content.
Color scheme toggle
A switch that lets visitors choose light or dark mode.
Color scheme toggle settings and states
Footer section
A column of footer links with an optional heading.
Footer section settings and states
Header action
An icon button for the header that opens a panel or a page.
Header action settings and states
Header brand
Your site name, with an optional logo and prefix, linked to your home page.
Header brand settings and states
Header global actions
A group of header buttons, such as search and the color scheme toggle.
Header global actions settings and states
Header navigation
A horizontal navigation menu for the header.
Header navigation settings and states
Forms
Inputs your visitors can actually use, labels and all.
Radio button group
A group of radio buttons with a shared label, so only one option can be chosen.
Radio button group settings and states
Text area
A multi-line text field with a label, helper text, and error, warning, and read-only states.
Text area settings and states
Text input
A single-line text field with a label and optional helper, error and warning text.
Text input settings and states
Navigation
Ways to move through a site and its content.
Breadcrumb
A breadcrumb trail showing where the current page sits in your site.
Breadcrumb settings and states
Feedback and overlays
Notifications, modals, tooltips: talking back to the visitor.
Tooltip
A short hint that appears when visitors hover over or focus text, an icon or a button.
Tooltip settings and statesData display
Tables, tags, and code, structured for everyone.
Data table
A data table with sortable columns, a sticky header and striped rows.
Data table settings and states
Tile group
A set of selectable tiles where visitors pick one, with a heading.
Tile group settings and statesContent
The everyday pieces of written content.
Code snippet
A code snippet with styling and a copy button: inline, single-line or multi-line.
Code snippet settings and states
