Tarjeta (card)

Una superficie que agrupa contenido relacionado. Usa <article> cuando la tarjeta es contenido autónomo y un <div> en los demás casos. Sin JavaScript.

CSS: incluido en ivolt.css; suelto en css/components/card.css.

Una tarjeta con cuerpo y piefixtures/card/basic.htmlAbrir sola

<article class="iv-card" style="max-width: 24rem">
  <div class="iv-card__body">
    <h3 class="iv-card__title">Editorial catalogue</h3>
    <p class="iv-u-text-muted iv-u-m-0">Cards, filters and a detail page built from the same primitives.</p>
  </div>
  <div class="iv-card__footer">
    <a class="iv-button iv-button--ghost iv-button--sm" href="#recipes">Preview</a>
    <a class="iv-button iv-button--primary iv-button--sm" href="#recipes">Open recipe</a>
  </div>
</article>

Medio, plano y acciones en el pie

Medio, plano y acciones en el piefixtures/card/media.htmlAbrir sola

<div class="iv-grid iv-u-gap-4 iv-u-grid-cols-1 iv-u-md-grid-cols-3">
  <article class="iv-card">
    <div class="iv-card__media" aria-hidden="true"></div>
    <div class="iv-card__body">
      <h3 class="iv-card__title">Quarterly review</h3>
      <p class="iv-u-m-0">Placeholder media (16:9). Real images use an <code>&lt;img&gt;</code> inside the media block.</p>
    </div>
  </article>
  <article class="iv-card iv-card--flat">
    <div class="iv-card__body">
      <h3 class="iv-card__title">Flat card</h3>
      <p class="iv-u-m-0">No shadow, border only. Suits dense layouts and dark surfaces.</p>
    </div>
  </article>
  <article class="iv-card">
    <div class="iv-card__body">
      <h3 class="iv-card__title">Footer actions</h3>
      <p class="iv-u-m-0">Actions align to the end of the footer.</p>
    </div>
    <div class="iv-card__footer">
      <button class="iv-button iv-button--primary iv-button--sm" type="button">Action</button>
    </div>
  </article>
</div>

Con fotografías

Imágenes reales, bordes que se iluminan al acercar el puntero y elevación al pasar sobre ellas.

Tarjetas con fotografíasfixtures/card/photo.htmlAbrir sola

<div class="iv-grid iv-grid--auto" style="--iv-grid-min: 16rem">
  <article class="iv-card iv-edge-near iv-elevate">
    <figure class="iv-card__media"><img src="/photos/p1059.jpg" width="1280" height="800" alt="A workshop table with tools and a leather apron" loading="lazy"></figure>
    <div class="iv-card__body"><h3 class="iv-card__title">Workshop notes</h3><p>Photograph by Clark Street Mercantile on Unsplash. Sample copy: cards with real media, proximity-lit edges and a lift on hover.</p></div>
    <footer class="iv-card__footer"><a class="iv-button iv-button--secondary iv-button--sm" href="#card-photo-note">Read more</a></footer>
  </article>
  <article class="iv-card iv-edge-near iv-elevate">
    <figure class="iv-card__media"><img src="/photos/p1074.jpg" width="1280" height="800" alt="A lion resting in dry grass" loading="lazy"></figure>
    <div class="iv-card__body"><h3 class="iv-card__title">Field guide</h3><p>Photograph by Samuel Scrimshaw on Unsplash. Media keeps its aspect ratio and the card never exceeds its column.</p></div>
    <footer class="iv-card__footer"><a class="iv-button iv-button--secondary iv-button--sm" href="#card-photo-note">Read more</a></footer>
  </article>
  <article class="iv-card iv-edge-near iv-elevate">
    <figure class="iv-card__media"><img src="/photos/p1084.jpg" width="1280" height="800" alt="Icebergs and dark water under a low sky" loading="lazy"></figure>
    <div class="iv-card__body"><h3 class="iv-card__title">Cold coast</h3><p>Photograph by Jay Ruzesky on Unsplash. Alt text describes the picture; decorative images would use an empty alt.</p></div>
    <footer class="iv-card__footer"><a class="iv-button iv-button--secondary iv-button--sm" href="#card-photo-note">Read more</a></footer>
  </article>
</div>
<p id="card-photo-note" class="iv-u-text-sm iv-u-text-muted iv-u-m-0" style="margin-block-start: var(--iv-space-3)">The links only jump to this note.</p>

.iv-root {
  --iv-grid-min: 16rem;
}

Anatomía

Clase	Función
`iv-card`	Superficie con borde, radio y sombra; columna flex.
`iv-card__media`	Área 16:9; una `<img>` dentro se recorta con `object-fit: cover`.
`iv-card__body`	Contenido con relleno que crece hasta llenar la tarjeta.
`iv-card__title`	Título dentro del cuerpo (elige el nivel que corresponda a la página).
`iv-card__footer`	Acciones alineadas al final.
`iv-card--flat`	Sin sombra.

Elevación

Una tarjeta descansa sobre --iv-shadow-ambient, la elevación en reposo común añadida en la v0.6: un solo token que ya lleva el filo que necesita un tema oscuro y la caída suave que pide uno claro. Bajo el puntero sube a --iv-shadow-2; la elevación vive dentro de @media (hover: hover), así que una pantalla táctil nunca se queda con el estado pegado, y es solo un cambio de sombra, sin desplazamiento que mueva la maqueta.

Dos locales públicos lo ajustan en una línea: --iv-card-shadow para la elevación en reposo y --iv-card-shadow-hover para la del puntero. Pon cualquiera de los dos a none para anularla: es justo lo que hace iv-card--flat. Junto a --iv-card-bg, --iv-card-radius y --iv-card-padding, eso es toda la superficie del componente.

Errores frecuentes

Convertir toda la tarjeta en un enlace con controles interactivos dentro. Enlaza el título.
Saltarse niveles de título dentro de las tarjetas.

Todos los componentes de contenido