# Article · MIAN

A long-read layout: headline, byline, a comfortable reading column, wide figures, drop cap and pull quotes.

- Id: `article` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/article
- Use for: blog post, long read, case study text, editorial article, essay, news story.
- On a page: content · prominence high · density medium. Usually before: story-card.
- Alternatives: docs-layout.
- Avoid: Lines wider than about 75 characters; ads inside the text.

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-article`: The <article>, a container for its own layout.
- `mn-article-head`: Headline block: eyebrow, mn-display or mn-title, intro, meta.
- `mn-article-meta · mn-article-byline`: Date, reading time and the author with avatar.
- `mn-article-body`: The reading column (42rem). Combine with mn-prose.
- `mn-article-wide`: A figure that breaks out wider than the text.
- `mn-dropcap · mn-pullquote`: Drop cap for the first paragraph; a large pull quote.

## Accessibility

- Use <article> with one heading at its top; put the date in <time datetime="…">.
- Keep lines between 60 and 75 characters: mn-article-body does this at 1.125rem.
- A pull quote repeats text from the article, so mark it aria-hidden="true" to avoid reading it twice.

## Examples

### Article

```html
<article class="mn-article mn-section mn-section-sm"><div class="mn-container">
  <header class="mn-article-head"><p class="mn-eyebrow">Essay · Craft</p><h1 class="mn-title">What a noodle maker knows about interfaces</h1>
    <div class="mn-article-byline"><span class="mn-avatar mn-avatar-sm">IS</span><span><strong>Ilinca Sava</strong><small><time datetime="2026-09-21">21 September 2026</time> · 9 min read</small></span></div></header>
  <div class="mn-article-body mn-prose" style="margin-top:2rem">
    <p class="mn-dropcap">A bowl of lamian starts as one lump of dough. Stretched, folded and stretched again, it doubles with every pull, two strands, four, eight, until there are hundreds.</p>
    <figure class="mn-article-wide"><div class="mn-media" style="--ratio:21/9"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --></div><figcaption class="mn-caption">Fig. 1: The path of a single strand through eight folds.</figcaption></figure>
    <p>The dough never changes. The hands do.</p>
    <blockquote class="mn-pullquote" aria-hidden="true">The dough never changes. The hands do.</blockquote>
  </div>
</div></article>
```

## Source

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