Story card
Articles and posts in a grid or as a lead story: image, kicker, headline, excerpt and byline, the headline is the link.
Stories
<ul class="mn-stories">
<li class="mn-story"><div class="mn-media" style="--ratio:3/2"><svg viewBox="0 0 600 360" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Map: a 10.4 km loop" xmlns="http://www.w3.org/2000/svg">
<rect width="600" height="360" fill="var(--mn-surface-2)"/>
<g stroke="color-mix(in srgb, var(--mn-fg) 10%, transparent)" stroke-width="10">
<path d="M0 80h600M0 190h600M0 300h600M90 0v360M230 0v360M380 0v360M520 0v360"/>
</g>
<path d="M300 360c40-80 60-110 150-120" stroke="color-mix(in srgb, var(--mn-info) 45%, transparent)" stroke-width="22" fill="none" stroke-linecap="round"/>
<path d="M120 292c-30-60-20-140 40-176s150-40 206-10 120 70 112 132-70 84-150 70-116-8-150 14-44-10-58-30" fill="none" stroke="var(--mn-primary)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="120" cy="292" r="10" fill="var(--mn-bg)" stroke="var(--mn-primary)" stroke-width="5"/>
<circle cx="478" cy="246" r="7" fill="var(--mn-accent)"/></svg></div><p class="mn-eyebrow">Places</p><h3 class="mn-story-title"><a href="#">Ten kilometres of Bucharest at 6 a.m.</a></h3><p class="mn-story-excerpt">A running route through the city before the city starts.</p><p class="mn-story-meta">Mia Lund · <time datetime="2026-09-14">14 September</time> · 7 min</p></li>
<li class="mn-story"><div class="mn-media" style="--ratio:3/2"><svg viewBox="0 0 600 450" preserveAspectRatio="xMidYMid slice" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><rect width="600" height="450" fill="var(--mn-fg)"/><path d="M0 330 300 90l300 240Z" fill="var(--mn-accent)"/><circle cx="300" cy="300" r="40" fill="var(--mn-bg)"/></svg></div><p class="mn-eyebrow">Craft</p><h3 class="mn-story-title"><a href="#">The potter who throws the same bowl every day</a></h3><p class="mn-story-excerpt">Twenty years, one shape, and never the same bowl twice.</p><p class="mn-story-meta">Ana Popescu · <time datetime="2026-08-31">31 August</time> · 8 min</p></li>
</ul>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/story-card.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-stories | An auto-filling grid of stories (a <ul>), or use mn-cols for a fixed number of columns. |
| mn-story | One story: mn-media, mn-eyebrow (kicker), mn-story-title with a link, mn-story-excerpt, mn-story-meta. |
| mn-story-lead | A lead story with a much larger headline. |
Accessibility
- The headline link is stretched over the whole card, so each story is one link and one tab stop.
- Put the date in <time datetime="…">.
- Headline levels follow the page: <h2> for the lead, <h3> in a grid under a section heading.