Component Showcase (Test Post)
Pillar: Layout Guardrails
This post exists purely as a stress test — every real component and vocabulary piece currently shipped, used in one place, on purpose. Not meant to be a real article. If you're reading this on the live site, it's safe to delete once it's served its purpose.
Callouts — all four variants
Info: neutral, supporting detail. This is the default callout tone.
Success: something confirmed working, a positive result.
Warning: worth pausing on, not necessarily wrong.
Danger: a real risk, a hard limit, something to take seriously.
Layout primitives: stack + wrap
A horizontal stack, three items, large gap:
Fast
Zero client JS by default.
Safe
Content can't execute anything.
Simple
Git is the database.
The same three cards in a wrap instead, so they reflow naturally rather than staying a fixed row:
Reflow One
Reflow Two
Reflow Three
Columns — fractional splits
Half and half:
Left half. Good for a two-column comparison or a text-plus-aside layout.
Right half. Same width, mirrored.
Two-fifths and three-fifths — an asymmetric split:
Narrower column — a sidebar-style note.
Wider column — the main point gets more room.
Carousel — horizontal scroll, no JS
Section width presets
The image above should break past the normal reading column. This paragraph is back to standard width.
Video embed
Code, two languages
def sanitize(html: str) -> str:
return allowlist.clean(html)function sanitize(html: string): string {
return allowlist.clean(html);
}Tables
| Tier | Writes directly? | Reviewed? |
|---|---|---|
| Content | Yes, an agent can | Allowlist-checked, not human-reviewed per edit |
| Style | Yes, within a fixed vocabulary | Same — validated, not per-edit reviewed |
| Execution | No, never | Always, every time, by a human |
Figure, figcaption, aside
Buttons
Primary button Secondary button
Plain lists, for completeness
- An unordered item with bold and italic text
- Another item with a plain link
- Ordered item one
- Ordered item two