Explainer component kitchen sink
Every shared explainer component on one page, so I can compare them without hunting through old entries.
Opening seven files is a lousy way to check a design
Fable pulled the repeated layout from the first explainers into a handful of shared components. I wanted one page where I could see them together, try them at different widths, and decide whether they still belong in the shared layer.
This page is that test. The Container, Label, PageTitle and Prose above are already part of it.
The shared parts
Fable found eight things worth naming. Everything else stayed in the explainer that needed it, including one-off diagrams and page-specific layouts.
- Container
- Centres the page and adds the side gutters.
- PageTitle
- Renders the large heading and keeps each word together.
- Label
- Small monospace text for entry types and section kickers.
- Section
- Pairs a kicker and heading with the usual vertical spacing.
- SectionTitle
- Provides the same heading. The surrounding layout is up to the page.
- Prose
- Caps the line length and offers base, large and extra-large text.
- Steps / Step
- Turns an ordered list into numbered columns or rows.
- Figure
- Wraps an illustration and, when needed, its caption.
How the three prose sizes differ
The size changes, but the typeface, colour and maximum line length don’t. That keeps an opening paragraph and a quiet note recognisably part of the same page.
Use this when a paragraph needs to carry more weight than the body copy around it.
Most of an explainer should look like this. It’s large enough to read comfortably without every paragraph announcing itself.
This suits a caveat or follow-up detail that matters but isn’t the main point.
Don’t make a component after seeing something once
This is an actual sequence, so numbering helps. Swapping the middle steps would change the advice rather than merely rearranging four equal ideas.
- Build the pageSolve the explainer in front of you.
- Spot the repeatWait until the same layout job appears again.
- Pull it outName the job rather than copying a pile of CSS.
- Try to break itUse it somewhere awkward, such as this page.
What Figure does and what it leaves alone
Figure provides a real figure element and a consistent caption. It doesn’t choose the border, background, padding or artwork. Those decisions belong to the explainer.
Use the pieces when Section doesn’t fit
This coloured block is built directly from Label, SectionTitle and Prose. The heading structure stays intact, even though this section doesn’t match the others.