Long reference pages become unreadable when everything is open at once. This pattern lets a reader scan the headings and open only what they need — useful for FAQs, documentation and specifications.
A theme that reads like a book, not a dashboard
Most site themes give you the same flat, sans-serif look. This one is set in a serif, on a warm ground, with a column system that rearranges itself depending on what each page actually contains.
Everything on this page is the theme — no custom CSS was written for the demo. Change the colours in one file and the whole site follows: buttons, links, borders, focus rings, hover states.
The layout decides for itself
This page has a sidebar on the left and a column on the right, so it is laid out in three columns. Remove the sidebar and it becomes two. Remove both and the content centres itself at a comfortable reading width. You write no media queries to make that happen — the stylesheet detects which regions a page fills and responds.
How it works
The layout uses the CSS :has() selector to check whether a page has provided a sidebar or a right-hand column, then picks the grid to match. It degrades to a single column on narrow screens, and the sidebar stops being sticky where that would be annoying.
Components, not just colours
Cards
For grouping related things. They sit on the page rather than shouting, and they line up on a shared baseline.
Tables
Readable by default, with a hover state, and they scroll sideways on a phone rather than breaking the page.
Callouts
For the paragraph that matters more than the ones around it, without resorting to bold red text.
A callout. Use it for the thing a reader must not miss — a prerequisite, a warning, or the one sentence that explains everything else on the page.
A table
| Plan | Monthly | Includes |
|---|---|---|
| Essential | £30 | Monitoring, backups, small changes |
| Standard | £75 | The above, plus an hour of work each month |
| Full | £150 | Everything, plus priority response |
Buttons and tags
Introductory Intermediate Advanced