Collection sections
The vocabulary a collection route is assembled from — every block, running, with the markup the real routes ship.
The vocabulary a route is assembled from. Every section below is a block you can drop into any route of any collection — that is what makes them worth having rather than being page-specific markup.
Each demo is the travel collection's own markup, called from its own builder. If a section only looks right inside one route, it is not a section yet.
Collection hero
A collection index has to say what it is before it starts listing. The art does the saying, so the copy can be short. It is decoration, so it is aria-hidden and it stops dead under reduced motion.
Every road, in order.
The lead sits under it.
.col-hero · .col-hero__art — the globe turns, the flight draws itself, the palm leans
Search and the call
People arrive at an index knowing roughly what they want, so search leads and browsing follows.
.col-search — one field, one button, on the hero surface
The meta strip
"How much is here" is the second question after "what is this", so the numbers sit directly under the hero copy.
.col-meta — add .col-meta-paper when it is not on the dark hero
Groups — the widest cut
Icon, name, count. Anything more and it competes with the places below it.
.col-groups · .col-group — press one; aria-pressed carries the state
Places — a picture, a name, a sentence
The same three parts every collection card has, in a travel-shaped body.
.col-places · .col-place — the art is a placeholder, not a photograph, so the demo never depends on one
Spots — the narrowest cut
The smallest shape, so thirty of them can sit in a row without the page becoming a grid nobody reads.
A series card
It shows the shape of the whole body of work: how many parts, over how long, and where it went.
The order — a series, laid out
The one thing a series has that a group does not is sequence, so it gets a spine. The rule stops at the last item rather than trailing into nothing.
.col-order — aria-current marks where the reader is
Post rows
The list every route ends with. A row rather than a card, because by this point the reader is scanning titles, not looking at pictures.
No posts match. Try clearing a filter.
.col-posts · .col-post-row
The facet sidebar
Checkboxes, because more than one can be true at once, and native inputs so the keyboard works for free.
Everywhere
.col-facets · .col-facet — or-within-a-facet: ticking beach and mountains means either, not both
Widgets — the rail beside a post
Every widget is the same object: a label, a body, sometimes a footer. Six of them read as one column rather than six competing boxes. A blog needs them most, but a course rail and a trip rail want the same shape — so they are shared.
.col-widget · .col-widget__title · .col-widget-accent for the one that is the point rather than a note
Numbered lists
Recent, popular, next. Numbers rather than bullets, because in these lists the order is the information.
.col-mini · .col-mini__item
Reading progress
The same idea as the navbar hairline: a line already on the page doing a second job, rather than a new piece of chrome.
.col-progress — drive --value from scroll
The stage — a post whose body is a video
The media leads and the rest of the series sits beside it, because the second question after "play this" is always "what is after it". Course needed it first; nothing in it knows about courses.
.col-stage · .col-stagebar — previous and next are the entire navigation of an ordered collection, so they get the width
The playlist
The syllabus, beside a player. It is .curriculum — the same modules, the same lesson rows, the same tick. All the modifier adds is a body that scrolls, because a contents list should not become a different component the moment it moves next to a video.
01Foundations4/4
02Layout1/4
03Type & rhythm0/3
.col-playlist — aria-current is the lesson you are on, [data-done] the ones you have watched, [data-locked] the ones you have not bought
The transcript
Timestamps down the left, so the column of times is scannable and the line the player is on can be marked without the text moving.
.col-transcript
Outcomes
What you will be able to do afterwards. A promise reads as a promise in a list and as marketing in a paragraph.
.col-checks · .col-check
The offer and the files
The one card on a page that is asking for something, so it is the one that carries the accent. Beside it, what comes with the thing — rows, because a download is an action and actions read as a list.
Resume
The strip at the top of an index for someone who has been here before. It outranks the hero's call to action, because "carry on" beats "start" for everyone it applies to and is invisible to everyone it does not.
Shortcuts and notes
A player has shortcuts whether or not it advertises them, and advertising them is cheaper than a help page. The note box keeps nothing — it is here because the shape of the page is wrong without somewhere to put a thought.
.col-keys uses the system's .kbd · .col-note
Next in series
The registry
Every section, where it is used, and whether it needs JavaScript. A section is only done when it works in both themes, at every width, and with the script blocked unless it is listed as needing it.
| Section | Used on |
|---|---|
.col-hero | index — no JS |
.col-search | index, group — no JS |
.col-meta | index, group, series — no JS |
.col-groups | index — no JS |
.col-places | index, group — no JS |
.col-spots | index, group, place — no JS |
.col-facets | index, group — needs JS |
.col-series | index, place — no JS |
.col-order | series — no JS |
.col-posts | everywhere — no JS |
.col-post | post — no JS |
.col-next | post, series — no JS |
.col-rail · .col-widget | post rails everywhere — no JS |
.col-mini | widgets — no JS |
.col-tags · .col-tag | post, index — no JS |
.col-toc | post — needs JS only for scrollspy |
.col-progress | post — needs JS |
.col-stage · .col-stagebar | post, when the body is a video — no JS |
.col-playlist | post — no JS |
.col-transcript | post — no JS |
.col-panel | post — needs JS, and stacks under its own headings without it |
.col-checks | series, place — no JS |
.col-offer | series — no JS |
.col-files | post, series — no JS |
.col-keys · .col-note | post — no JS |
.col-resume | index — no JS |
.col-map | planned |
.col-gallery | planned |
.col-figures | planned |