01
Page shell
The four containers. Everything else sits inside them.
Invoices
Three overdue, two awaiting approval.
Markup
Layout
The containers a page is made of, and the controls that sit at the top of one.
02
Filter toolbar
Controls inside .row lay out horizontally.
Markup
Data
Numbers, tables, and the empty states a table falls into with nothing to show.
03
Stat row
Cards with a header and footer. Footers align across the row.
$48,200
$9,400
Markup
04
Table with statuses
Right-align numbers with align; totals go in tfoot.
| Invoice | Client | Amount | Status |
|---|---|---|---|
| INV-0231 | Acme | $4,200.00 | overdue |
| INV-0232 | Globex | $12,850.00 | paid |
| Total | $17,050.00 | ||
Markup
05
Pagination
Buttons and a progress bar, inline in a row.
Page 1 of 3
Markup
06
Empty state
A focused endpoint with the action that resolves it.
No invoices yet
Create one, or import from a CSV to get started.
Markup
Forms
Inputs with their labels, their required marks and their assistive-tech wiring intact.
07
Sign in
Required fields mark themselves.
Markup
08
Settings
Switches read as switches to assistive tech.
Markup
Feedback
Telling someone what happened, what is happening, and what is about to happen.
09
Alerts
One attribute retints the whole callout.
Markup
10
Confirm dialog
Opens and closes with no JavaScript at all.
Markup
11
Loading and progress
aria-busy spins; progress fills.
Markup
12
Activity timeline
An ordered list and <time>.
- Reminder sent —
- Invoice viewed —
- Issued —
Markup
Navigation
Moving between views, and the menus and shortcuts that get you there faster.
13
Tabs
ARIA supplies the semantics; a small controller supplies selection and arrow keys.
Summary panel
Line items panel
History panel
Markup
14
Account menu
A native popover, anchored to its button.
Markup
15
Keyboard shortcuts
A description list and <kbd>.
- /
- Search
- N
- New invoice
- Esc
- Close dialog
Markup
16
Pricing
Cards, one toned to mark the recommended plan.
$0
- 5 invoices
- 1 user
$19
- Unlimited
- 5 users
Markup