# Hover card · MIAN

A preview card that appears when hovering or focusing a link, profiles, link previews, definitions.

- Id: `hover-card` · Category: Overlays · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/hover-card
- Use for: link preview, profile preview on hover, definition popup.

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

## Examples

### Profile preview

```html
<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>
```

## Source

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