cardsBeginnerhover
Magazine Editorial Card
Bold magazine-style article card with a deep teal panel and serif headline.
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-style editorial card with Tailwind: a deep-teal page background, the card itself is a 2-column horizontal layout. Left column: a warm gradient panel (cream → orange → rust) with an inset thin frame and a small JetBrains Mono 'VIBEDEX' watermark in the bottom-left, in deep teal. Right column: padded body with a top mono meta row (gold 'REPORT' + muted date), a DM Serif Display headline (3rem, italic accent word in amber), a Fraunces serif deck, and a footer row with byline + 'Read essay →' link. Hover lifts the card with a deep shadow.
Code
html
<!--
Source: Vibedex
https://vibedex.io
License: MIT
Surfaced via https://vibedex.io/components/vbx-magazine-card
-->
<div class="stage"><article class="card"><div class="img"></div><div class="body"><div class="meta"><span class="section">REPORT</span><span class="date">MAR 2026</span></div><h2>The end of the<br><em>infinite scroll.</em></h2><p>How a generation of designers fell out of love with the engagement metric — and what they're building instead.</p><div class="foot"><span class="by">By <strong>Robin Bell</strong></span><a class="more" href="#">Read essay →</a></div></div></article></div>