# Card / Tarjeta

> Container with header, content and actions.

Page: https://componentes-lovat.vercel.app/c/card/  
License: MIT · Design: coss ui (MIT) · card.tsx  
Requires: tokens.css, button, badge  
Context: ambos · Density: media · Tone: sobria

## Files

- Tokens (once): https://componentes-lovat.vercel.app/tokens.css
- Dependency `button`: https://componentes-lovat.vercel.app/r/button.json
- Dependency `badge`: https://componentes-lovat.vercel.app/r/badge.json
- HTML: https://componentes-lovat.vercel.app/raw/card/card.html
- CSS: https://componentes-lovat.vercel.app/raw/card/card.css
- Everything in one file: https://componentes-lovat.vercel.app/r/card.html

Dark theme: add class `dark` to `<html>`.

## When to use

- To group a summary with its actions.

## When not to use

- Wrapping everything in a link: link from the title.

## Accessibility

Roles: article

| Keys | Action |
|---|---|
| Tab | Moves through the actions |

- <article> with an h3 title.
- If the whole card must be clickable, the link sits on the title and stretches with ::after.

## Code

```html
<article class="c-card">
  <header class="c-card__header">
    <h3 class="c-card__title">Plan Pro</h3>
    <p class="c-card__description">Para equipos que publican cada semana.</p>
    <div class="c-card__action"><span class="c-badge c-badge--secondary">Popular</span></div>
  </header>
  <div class="c-card__panel">
    <p style="font-size:2rem;font-weight:600;letter-spacing:-.02em;line-height:1">S/ 49 <span style="font-size:.875rem;font-weight:400;color:var(--muted-foreground)">al mes</span></p>
  </div>
  <footer class="c-card__footer">
    <button class="c-btn c-btn--outline" type="button">Ver detalles</button>
    <button class="c-btn c-btn--primary" type="button">Elegir plan</button>
  </footer>
</article>
```

```css
/* card · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py desde card.tw.json. No editar a mano. Necesita tokens.css. */
.c-card{position:relative}
.c-card__action{grid-column-start:2;grid-row:span 2/span 2;grid-row-start:1}
.c-card{display:flex}
.c-card__footer{display:flex}
.c-card__header{display:grid}
.c-card__action{display:inline-flex}
.c-card__panel{flex:1}
.c-card__header{grid-auto-rows:min-content;grid-template-rows:auto auto}
.c-card{flex-direction:column}
.c-card__footer{align-items:center}
.c-card__header{align-items:flex-start;gap:calc(var(--spacing)*1.5)}
.c-card__action{align-self:flex-start;justify-self:flex-end}
.c-card{border-radius:var(--radius-2xl);border-style:var(--tw-border-style);border-width:1px;background-color:var(--card)}
.c-card__header{padding:calc(var(--spacing)*6)}
.c-card__panel{padding:calc(var(--spacing)*6)}
.c-card__footer{padding:calc(var(--spacing)*6)}
.c-card__title{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}
.c-card__description{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
.c-card__title{--tw-leading:1;line-height:1;--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}
.c-card{color:var(--card-foreground)}
.c-card__description{color:var(--muted-foreground)}
.c-card{--tw-shadow-alpha:5%;--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
@supports (color:lab(0% 0 0)){
.c-card{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,lab(0% 0 0/.05))}
}
.c-card:not(:is(.dark *)){background-clip:padding-box}
.c-card:before{content:var(--tw-content);pointer-events:none;content:var(--tw-content);position:absolute;content:var(--tw-content);inset:calc(var(--spacing)*0);content:var(--tw-content);border-radius:calc(var(--radius-2xl) - 1px);content:var(--tw-content);--tw-shadow:0 1px var(--tw-shadow-color,#0000000a)}
@supports (color:color-mix(in lab, red, red)){
.c-card:before{--tw-shadow:0 1px var(--tw-shadow-color,color-mix(in oklab,var(--color-black)4%,transparent))}
}
.c-card:before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-card:is(.dark *):before{content:var(--tw-content);--tw-shadow:0 -1px var(--tw-shadow-color,#ffffff0f)}
@supports (color:color-mix(in lab, red, red)){
.c-card:is(.dark *):before{--tw-shadow:0 -1px var(--tw-shadow-color,color-mix(in oklab,var(--color-white)6%,transparent))}
}
.c-card:is(.dark *):before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
/* propio */
.c-card{width:100%;max-width:24rem}
.c-card__header:has(>.c-card__action){grid-template-columns:1fr auto}
.c-card:has(>.c-card__panel)>.c-card__header{padding-bottom:1rem}
.c-card:has(>.c-card__header)>.c-card__panel{padding-top:0}
.c-card:has(>.c-card__footer)>.c-card__panel{padding-bottom:0}
.c-card:has(>.c-card__panel)>.c-card__footer{padding-top:1rem}
.c-card__footer{gap:.5rem;justify-content:flex-end}
.c-card__title a{color:inherit;text-decoration:none}
.c-card__title a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.c-card__title a:focus-visible{outline:none}
.c-card:has(.c-card__title a:focus-visible){box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--ring)}
```

## Credits

- coss ui (MIT) · card.tsx: https://coss.com/ui