heroIntermediate

Editorial Magazine Hero

Cream-paper editorial layout with oversized serif and a single red accent.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a magazine-cover style editorial hero with Tailwind: cream paper background (#fdf6e3), thin black masthead row at top with a DM Serif Display logotype on the left and a JetBrains Mono date/issue on the right. Below: a small red mono kicker, an oversized DM Serif Display headline (3 lines, one with an italic-red accent word), a Fraunces serif deck paragraph above a hairline border, and a byline + reading time + 'Continue reading' link with an underlined call-to-action. On the right, a vertical column of red-mono tags rotated 90 degrees. Quiet, dense, intentionally print-feeling.

Code

html

<!--
  Source: Vibedex
  https://vibedex.io
  License: MIT
  Surfaced via https://vibedex.io/components/vbx-editorial-hero
-->
<section class="hero"><nav><span class="mast">THE EDITION</span><span class="date">Vol. 24 · Mar 2026</span></nav><div class="copy"><span class="kicker">Issue №24 / Field notes</span><h1>How a small studio<br>built a <em>quiet</em> empire<br>without raising a dollar.</h1><p class="deck">Twelve people in a converted warehouse have shipped more design systems this decade than most agencies of a hundred. We sat down to find out how.</p><div class="foot"><span class="by">By <strong>Casey Morgan</strong></span><span class="sep">·</span><span class="read">14 min read</span><a class="cont" href="#">Continue reading <span>→</span></a></div></div><aside class="side"><span class="tag">FEATURE</span><span class="tag">DESIGN</span><span class="tag">CRAFT</span></aside></section>