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.
The dough never changes. The hands do.
Essay · Craft
Article
A long-read layout: headline, byline, a comfortable reading column, wide figures, drop cap and pull quotes.
Article
<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"><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><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>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/article.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-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.