Components
57 components for public websites, with working examples, HTML markup, and accessibility guidance.
Typography
Headings, paragraphs, labels, links and lists. The reading layer of every page.
Divider
A horizontal rule for separating content regions.
Heading
Page and section titles in four sizes, decoupled from heading level.
Label
Form labels with optional hint text, always visible and always attached.
Link
Underlined, high-contrast links that never rely on color alone.
List
Ordered, unordered and unstyled lists with readable spacing.
Paragraph
Body text with a readable measure, plus lead and small variants.
Validation message
Field-level error text tied to its input, marked by more than color.
Actions
Buttons, and the badges and tags that say what state something is in.
Badge
A small count attached to another element.
Button
A clear hierarchy of primary, secondary, quiet and danger actions, with a minimum 44px target.
Chip
Interactive filter pills — toggles or links, never mere decoration.
Skip link
The first focusable element on every page — jump straight to content.
Tag
Non-interactive labels for status and classification.
Toggle group
An exclusive choice presented as segmented buttons — radios underneath.
Forms
Everything a resident fills in, built on native controls.
Checkbox
Native checkboxes at a comfortable size, grouped in fieldsets.
Date picker
The native date input — deliberately.
Error summary
A focusable digest of everything wrong with a submitted form.
Field
The wrapper that composes label, hint, control and validation.
Fieldset
Groups related controls under one legend.
File upload
The native file input with an accessible, styled trigger.
Input
Single-line text entry, 44px tall, with clear borders and focus.
Radio
Native radio groups for one-of-several choices.
Search
A labeled search input with an always-visible submit button.
Select
The native dropdown, styled — because native is the accessible one.
Suggestion
Type-to-filter over a known list — an ARIA 1.2 combobox.
Switch
An instant on/off — a checkbox with switch semantics and a text state.
Textarea
Multi-line text entry that users can resize.
Textfield
Label + hint + input + validation, composed — the everyday form row.
Content
Alerts, cards, tables, and what a page shows while it waits.
Alert
Prominent inline messages — info, success, warning, danger.
Avatar
A person marker — initials or photo.
Avatar stack
Overlapping avatars summarizing a group.
Card
A bordered content container, usually in a grid of peers.
Details
Expand/collapse for secondary content — native, no JavaScript.
Figure
A content image with caption and credit — the image block's public face.
Icon
A curated set of Lucide icons, shipped as one SVG sprite and drawn in the current text colour.
Skeleton
A static placeholder for content that's still loading.
Spinner
An in-progress indicator, always paired with text.
Stat
A stat tile — one headline number with a label, in rows on dashboards.
Steps
Numbered vertical instructions for completing a task, such as paying a parking ticket.
Table
Data tables with captions, header scope, and an accessible scroll region.
Timeline
A vertical, dated sequence for project updates, milestones, and application history.
Navigation
How people move through a site: breadcrumbs, pagination, section navigation and menus.
Breadcrumbs
Where you are, and the path back up.
Dropdown
A disclosure menu of actions or links.
Link grid
A set of destinations laid out as cards rather than a stack of underlined sentences.
Pagination
Numbered page navigation with previous/next.
Subnav
Two-level accordion navigation beside the page content, with a compact section menu on mobile.
Overlays & feedback
Layered UI that never traps anyone.
Site patterns
The hero, header and mobile menu that frame every town site.
Container
The page measure — caps content width and centers it, with a narrow variant for reading-length pages.
Hero
The town masthead — identity, one-line welcome, search, and the tasks people actually came for.
Info strip
The one-line facts bar above the site header — address, phone, hours.
Mobile menu
Full-screen navigation for small viewports, built on the native dialog.
Page head
The interior-page title band — breadcrumbs, page title and lede on the panel surface.
Prose
The column an author's content lives in — reading text on a measure, photographs and tables allowed to use the whole page.
Site footer
The town footer — contact, hours and quick links in columns, with a meta line for provenance.
Site header
The persistent town header — identity, primary nav, search, skip link.