Hover card
A preview card that appears when hovering or focusing a link, profiles, link previews, definitions.
Profile preview
Made by @btn-group
面
BTN GROUP SRL
Makers of MIAN: 54+ components and many noodles.
.
<p>Made by <span class="mn-hover-card"><a class="mn-link" href="#">@btn-group</a>
<span class="mn-hover-card-content mn-card"><span class="mn-card-body mn-row" style="align-items:flex-start;flex-wrap:nowrap;gap:.75rem;width:17rem">
<span class="mn-avatar">面</span>
<span><strong>BTN GROUP SRL</strong><br><span class="mn-muted">Makers of MIAN: 54+ components and many noodles.</span></span>
</span></span>
</span>.</p>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/hover-card.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-hover-card | Wrapper around the trigger and the card. |
| mn-hover-card-content | The card (combine with mn-card). |
| mn-hover-card-start | Align to the start instead of centring. |
Accessibility
- It appears on keyboard focus as well as hover, after a short delay on hover.
- Only put supplementary information in it, never the only way to reach something. The trigger must work on its own.