# Social post · MIAN

A post in a feed: author, time, text, media and like / reply / repost / share actions with counts.

- Id: `post` · Category: Data display · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/post
- Use for: social post, feed item, like and share, status update.

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">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

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

## Examples

### Post

```html
<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"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --></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>
```

## Source

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