Ilinca Sava@ilinca
Spent a month on a stool at a noodle counter. The cook decides once how far apart his hands go, and every strand follows. Best design system I have ever seen.
Social post
A post in a feed: author, time, text, media and like / reply / repost / share actions with counts.
Post
<article class="mn-card mn-post" style="max-width:34rem" aria-label="Post by Ilinca Sava">
<span class="mn-avatar" aria-hidden="true">IS</span>
<p class="mn-post-head"><strong>Ilinca Sava</strong><span>@ilinca</span><span aria-hidden="true">·</span><time datetime="2026-09-25T08:40">2 h</time></p>
<p class="mn-post-body">Spent a month on a stool at a noodle counter. The cook decides once how far apart his hands go, and every strand follows. Best design system I have ever seen.</p>
<div class="mn-media" style="--ratio:16/9"><svg viewBox="0 0 600 360" preserveAspectRatio="xMidYMid slice" role="img" aria-label="A running route drawn over a street grid" 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>
<div class="mn-post-actions">
<button class="mn-post-action" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a8 8 0 0 1-11.5 7.2L4 20l.9-4.6A8 8 0 1 1 21 12Z"/></svg><span class="mn-sr-only">Reply, </span><span>14</span></button>
<button class="mn-post-action" type="button" data-kind="repost" aria-pressed="false" data-mn-count="31"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m17 2 4 4-4 4"/><path d="M3 11V9a3 3 0 0 1 3-3h15M7 22l-4-4 4-4"/><path d="M21 13v2a3 3 0 0 1-3 3H3"/></svg><span class="mn-sr-only">Repost, </span><span>31</span></button>
<button class="mn-post-action" type="button" aria-pressed="true" data-mn-count="127"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.6-9 9-9 9Z"/></svg><span class="mn-sr-only">Like, </span><span>128</span></button>
<button class="mn-post-action" type="button" aria-label="Share"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M16 6l-4-4-4 4M12 2v13"/></svg></button>
</div>
</article>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/post.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-post | The post. Add mn-card for the noodle’s surface. |
| mn-post-head | Name, handle and <time>. |
| mn-post-body | The text. |
| mn-post-actions | The action row. |
| mn-post-action | An action button. aria-pressed makes it a toggle (like, repost); data-mn-count keeps its number in step; data-kind="repost" colours it green. |
Accessibility
- Wrap each post in <article> with an accessible name (the author).
- Toggles use aria-pressed; a visually hidden word before the count gives each a full name, e.g. “Like, 128”.