Vibedex.io
Back to gallery
featuresIntermediate

Newspaper Features

Three-column editorial features layout with drop caps and rule dividers.

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 three-column newspaper features section with Tailwind: warm newsprint background (#fbf8f1), a centered header with mono uppercase metadata, a giant italic Playfair Display title, and an italic Fraunces subtitle. Below the header, a triple horizontal rule divider (3px main + two 1px lines flanking it). Three columns separated by hairline vertical rules; each column starts with a Playfair italic h2 and a Fraunces paragraph that begins with an oversized red drop cap (float-left, ~3.4rem). Reads as the section opener of a Sunday paper.

Code

html
<!--
  Source: Vibedex
  https://vibedex.io
  License: MIT
  Surfaced via https://vibedex.io/components/vbx-newspaper-features
-->
<section class="page"><header><div class="meta"><span>VOL. 24</span><span>·</span><span>SECTION B</span><span>·</span><span>FEATURES</span></div><h1>The Documentation</h1><p class="sub">Everything you build, considered.</p></header><div class="rule"></div><div class="cols"><article><h2>Composable</h2><p><span class="dc">B</span>uilt the way real teams ship — every component lives independently. Take what you need, leave what you don't.</p></article><article><h2>Documented</h2><p><span class="dc">E</span>very block ships with a Claude prompt and a working example. Not a single 'TBD' anywhere.</p></article><article><h2>Open</h2><p><span class="dc">T</span>he whole library is MIT-licensed. Fork it, sell it, mod it. We'll keep shipping.</p></article></div></section>