# Story card · MIAN

Articles and posts in a grid or as a lead story: image, kicker, headline, excerpt and byline, the headline is the link.

- Id: `story-card` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/story-card
- Use for: blog index, articles grid, news list, latest posts, magazine front page, case studies list.
- On a page: catalogue · prominence medium · density medium.
- Alternatives: work-grid, product-card.
- Avoid: Every story the same size, make the lead story larger.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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.

## Examples

### Stories

```html
<ul class="mn-stories">
  <li class="mn-story"><div class="mn-media" style="--ratio:3/2"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --></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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/story-card/source