Hugo blog shortcodes: adding a visual component system to PaperMod

Ahnii! PaperMod is a clean, fast Hugo theme. What it doesn't give you out of the box is a component library: no callouts, no numbered steps, no before/after comparisons. If you write tutorials or technical posts, you end up compensating with blockquotes and bold text where purpose-built components would serve the reader better. This post covers all six shortcodes, the CSS behind them, and how to add the same components to your own PaperMod blog. All of it came together in a single Claude Code session. What we're building Six shortcodes, one CSS file: callout : highlighted aside with five severity types steps / step : auto-numbered procedure blocks pullquote : large-format quote for emphasis stats / stat : side-by-side metric tiles compare / before / after : side-by-side comparison panels cta : call-to-action box with a button All styles hook into PaperMod's CSS variables ( --primary , --entry , --border , etc.), so they adapt to dark and light mode automatically. File locations Hugo re