# Card · MIAN

A surface for grouped content: header, body, footer, media and actions.

- Id: `card` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/card
- Use for: card, content box, panel, settings card, summary card.
- Avoid: Cards only to create visual separation. Use whitespace and rules; cards are for objects (a plan, a product, a message).

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-card`: The surface.
- `mn-card-header · mn-card-title · mn-card-description`: Header parts.
- `mn-card-body · mn-card-footer · mn-card-footer-bordered`: Body and footer.
- `mn-card-media · mn-card-actions`: Top image · header actions.
- `mn-card-flat · mn-card-ghost · mn-card-interactive`: No shadow · no border · hover lift.

## Accessibility

- For a fully clickable card, make the card an <a> (or put one link in the title and stretch it), never nest interactive controls inside a link.

## Examples

### Form card

```html
<div class="mn-card" style="max-width:24rem">
  <div class="mn-card-header">
    <h3 class="mn-card-title">Create project</h3>
    <p class="mn-card-description">Deploy your new project in one click.</p>
  </div>
  <div class="mn-card-body mn-form">
    <div class="mn-field"><label class="mn-label" for="cp-n">Name</label><input class="mn-input" id="cp-n" placeholder="My project"></div>
    <div class="mn-field"><label class="mn-label" for="cp-f">Framework</label><select class="mn-select" id="cp-f"><option>Astro</option><option>Laravel</option></select></div>
  </div>
  <div class="mn-card-footer" style="justify-content:space-between"><button class="mn-btn mn-btn-outline">Cancel</button><button class="mn-btn">Deploy</button></div>
</div>
```

### Media card

```html
<article class="mn-card" style="max-width:20rem">
  <div class="mn-card-media" style="background:linear-gradient(135deg, var(--mn-primary), var(--mn-accent))"></div>
  <div class="mn-card-header">
    <div class="mn-row"><span class="mn-badge mn-badge-soft">Guide</span><span class="mn-muted mn-small">6 min read</span></div>
    <h3 class="mn-card-title">Choosing a noodle for your product</h3>
  </div>
  <div class="mn-card-body mn-muted">Twelve design systems, one component set. How to pick the one that fits your brand.</div>
</article>
```

### With actions

```html
<div class="mn-card" style="max-width:26rem">
  <div class="mn-card-header">
    <div><h3 class="mn-card-title">Notifications</h3><p class="mn-card-description">You have 3 unread messages.</p></div>
    <div class="mn-card-actions"><button class="mn-btn mn-btn-ghost mn-btn-icon mn-btn-sm" aria-label="Settings"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --></button></div>
  </div>
  <div class="mn-card-body">Your call has been confirmed for 14:00 tomorrow.</div>
  <div class="mn-card-footer mn-card-footer-bordered"><button class="mn-btn mn-btn-block"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg> Mark all as read</button></div>
</div>
```

## Source

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