Card

.card agrupa contenido relacionado. El contenido va en card__body; la imagen, la cabecera y el pie son opcionales. Las cards no fijan su ancho: ubícalas en una grilla.

Básica

Tema

HTML
React

<div class="card">
  <div class="card__image">
    <img src="/ejemplos/imagen-1.svg" alt="" width="800" height="500">
  </div>
  <div class="card__body">
    <h3 class="card__title">Diseño web</h3>
    <p class="card__description">Sitios rápidos, accesibles y fáciles de administrar.</p>
  </div>
  <div class="card__footer">
    <a href="#" class="btn btn--primary btn--sm">Ver más</a>
  </div>
</div>
<div class="card">
  <div class="card__header">Destacado</div>
  <div class="card__body">
    <h3 class="card__title">Soporte mensual</h3>
    <p class="card__description">Actualizaciones, respaldos y monitoreo de tu sitio.</p>
  </div>
  <div class="card__footer">
    <a href="#" class="btn btn--outline-primary btn--sm">Cotizar</a>
  </div>
</div>

export default function CardBasica() {
  return (
    <>
      <div className="card">
        <div className="card__image">
          <img src="/ejemplos/imagen-1.svg" alt="" width="800" height="500" />
        </div>
        <div className="card__body">
          <h3 className="card__title">Diseño web</h3>
          <p className="card__description">Sitios rápidos, accesibles y fáciles de administrar.</p>
        </div>
        <div className="card__footer">
          <a href="#" className="btn btn--primary btn--sm">Ver más</a>
        </div>
      </div>
      <div className="card">
        <div className="card__header">Destacado</div>
        <div className="card__body">
          <h3 className="card__title">Soporte mensual</h3>
          <p className="card__description">Actualizaciones, respaldos y monitoreo de tu sitio.</p>
        </div>
        <div className="card__footer">
          <a href="#" className="btn btn--outline-primary btn--sm">Cotizar</a>
        </div>
      </div>
    </>
  );
}

Elevada

card--elevated cambia el borde por una sombra. card__icon muestra un ícono destacado.

Tema

HTML
React

<div class="card card--elevated">
  <div class="card__body">
    <div class="card__icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5h16v11H4zM8 20h8M12 16v4" /></svg>
    </div>
    <h3 class="card__title">Desarrollo a medida</h3>
    <p class="card__description">Aplicaciones web conectadas a tus sistemas.</p>
  </div>
</div>
<div class="card card--elevated">
  <div class="card__body">
    <div class="card__icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7z" /></svg>
    </div>
    <h3 class="card__title">Hosting seguro</h3>
    <p class="card__description">Certificado SSL, respaldos diarios y soporte local.</p>
  </div>
</div>

export default function CardElevada() {
  return (
    <>
      <div className="card card--elevated">
        <div className="card__body">
          <div className="card__icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M4 5h16v11H4zM8 20h8M12 16v4" /></svg>
          </div>
          <h3 className="card__title">Desarrollo a medida</h3>
          <p className="card__description">Aplicaciones web conectadas a tus sistemas.</p>
        </div>
      </div>
      <div className="card card--elevated">
        <div className="card__body">
          <div className="card__icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m12 3 8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7z" /></svg>
          </div>
          <h3 className="card__title">Hosting seguro</h3>
          <p className="card__description">Certificado SSL, respaldos diarios y soporte local.</p>
        </div>
      </div>
    </>
  );
}

Enlace

Para que toda la card sea un enlace, usa <a class="card card--link">: en hover el título toma el color primary y la imagen se acerca. card--plain quita fondo y borde, y redondea la imagen (tarjetas de blog). Un badge dentro de card__image se ubica sobre la imagen.

Tema

HTML
React

<a href="#" class="card card--plain card--link">
  <div class="card__image">
    <span class="badge badge--primary badge--solid">Noticia</span>
    <img src="/ejemplos/imagen-2.svg" alt="" width="800" height="500">
  </div>
  <div class="card__body">
    <div class="card__meta">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M16 3v4M8 3v4M3 10h18" /></svg>
      <time datetime="2026-10-20">20 oct 2026</time>
      <span aria-hidden="true">·</span>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>
      4 min
    </div>
    <h3 class="card__title">Cómo elegir un buen hosting</h3>
    <p class="card__description">Lo que conviene revisar antes de contratar.</p>
  </div>
</a>
<a href="#" class="card card--plain card--link">
  <div class="card__image">
    <img src="/ejemplos/imagen-3.svg" alt="" width="800" height="500">
  </div>
  <div class="card__body">
    <div class="card__meta">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M16 3v4M8 3v4M3 10h18" /></svg>
      <time datetime="2026-10-12">12 oct 2026</time>
    </div>
    <h3 class="card__title">Accesibilidad web en 5 pasos</h3>
    <p class="card__description">Mejoras simples que ayudan a todas las personas.</p>
  </div>
</a>

export default function CardEnlace() {
  return (
    <>
      <a href="#" className="card card--plain card--link">
        <div className="card__image">
          <span className="badge badge--primary badge--solid">Noticia</span>
          <img src="/ejemplos/imagen-2.svg" alt="" width="800" height="500" />
        </div>
        <div className="card__body">
          <div className="card__meta">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M16 3v4M8 3v4M3 10h18" /></svg>
            <time dateTime="2026-10-20">20 oct 2026</time>
            <span aria-hidden="true">·</span>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>
            4 min
          </div>
          <h3 className="card__title">Cómo elegir un buen hosting</h3>
          <p className="card__description">Lo que conviene revisar antes de contratar.</p>
        </div>
      </a>
      <a href="#" className="card card--plain card--link">
        <div className="card__image">
          <img src="/ejemplos/imagen-3.svg" alt="" width="800" height="500" />
        </div>
        <div className="card__body">
          <div className="card__meta">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M16 3v4M8 3v4M3 10h18" /></svg>
            <time dateTime="2026-10-12">12 oct 2026</time>
          </div>
          <h3 className="card__title">Accesibilidad web en 5 pasos</h3>
          <p className="card__description">Mejoras simples que ayudan a todas las personas.</p>
        </div>
      </a>
    </>
  );
}

Suave

card--soft usa el fondo de información y ubica el ícono en la esquina. Sirve para preguntas frecuentes y destacados.

Tema

HTML
React

<div class="card card--soft">
  <div class="card__icon">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6V14M12 17h.01" /></svg>
  </div>
  <div class="card__body">
    <h3 class="card__title">¿Qué incluye el plan?</h3>
    <p class="card__description">Diseño, desarrollo, hosting por un año y capacitación.</p>
  </div>
</div>
<div class="card card--soft">
  <div class="card__icon">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6V14M12 17h.01" /></svg>
  </div>
  <div class="card__body">
    <h3 class="card__title">¿Cuánto demora?</h3>
    <p class="card__description">Entre cuatro y seis semanas, según el alcance.</p>
  </div>
</div>

export default function CardSoft() {
  return (
    <>
      <div className="card card--soft">
        <div className="card__icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6V14M12 17h.01" /></svg>
        </div>
        <div className="card__body">
          <h3 className="card__title">¿Qué incluye el plan?</h3>
          <p className="card__description">Diseño, desarrollo, hosting por un año y capacitación.</p>
        </div>
      </div>
      <div className="card card--soft">
        <div className="card__icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6V14M12 17h.01" /></svg>
        </div>
        <div className="card__body">
          <h3 className="card__title">¿Cuánto demora?</h3>
          <p className="card__description">Entre cuatro y seis semanas, según el alcance.</p>
        </div>
      </div>
    </>
  );
}

Precios

card--pricing centra la cabecera y el pie. card__list separa las características y card__price destaca el valor.

Tema

HTML
React

<div class="card card--pricing">
  <div class="card__header">
    <h3 class="card__title">Plan Básico</h3>
    <small>Para comenzar una web</small>
  </div>
  <ul class="card__list">
    <li>Espacio web ilimitado</li>
    <li>Cuentas de correo ilimitadas</li>
    <li>Certificado SSL incluido</li>
  </ul>
  <div class="card__footer">
    <p class="card__price">$10.000 / mes</p>
    <a href="#" class="btn btn--outline-primary">Solicitar</a>
  </div>
</div>
<div class="card card--pricing">
  <div class="card__header">
    <h3 class="card__title">Plan Pro</h3>
    <small>Para sitios con más tráfico</small>
  </div>
  <ul class="card__list">
    <li>30 GB en SSD</li>
    <li>50 cuentas de correo</li>
    <li>Respaldos diarios</li>
  </ul>
  <div class="card__footer">
    <p class="card__price">$16.000 / mes</p>
    <a href="#" class="btn btn--primary">Solicitar</a>
  </div>
</div>

export default function CardPrecios() {
  return (
    <>
      <div className="card card--pricing">
        <div className="card__header">
          <h3 className="card__title">Plan Básico</h3>
          <small>Para comenzar una web</small>
        </div>
        <ul className="card__list">
          <li>Espacio web ilimitado</li>
          <li>Cuentas de correo ilimitadas</li>
          <li>Certificado SSL incluido</li>
        </ul>
        <div className="card__footer">
          <p className="card__price">$10.000 / mes</p>
          <a href="#" className="btn btn--outline-primary">Solicitar</a>
        </div>
      </div>
      <div className="card card--pricing">
        <div className="card__header">
          <h3 className="card__title">Plan Pro</h3>
          <small>Para sitios con más tráfico</small>
        </div>
        <ul className="card__list">
          <li>30 GB en SSD</li>
          <li>50 cuentas de correo</li>
          <li>Respaldos diarios</li>
        </ul>
        <div className="card__footer">
          <p className="card__price">$16.000 / mes</p>
          <a href="#" className="btn btn--primary">Solicitar</a>
        </div>
      </div>
    </>
  );
}

Accesibilidad

En card--link, todo el contenido es el texto del enlace: mantenlo breve y no pongas otros enlaces o botones dentro.
Las imágenes decorativas llevan alt=""; si aportan información, describe su contenido.
Mantén el orden de los títulos de la página (h2, h3…) aunque cambie el tamaño visual.

Clases

Clase	Uso
`card`	Base: fondo, borde y esquinas redondeadas.
`card__header`, `card__body`, `card__footer`	Cabecera, contenido y pie. El pie queda abajo aunque las cards de una fila tengan distinto alto.
`card__image`	Contenedor de la imagen.
`card__icon`	Ícono destacado en un círculo.
`card__meta`	Fecha, autor, tiempo de lectura.
`card__title`, `card__description`	Título y texto.
`card__list`, `card__price`	Lista de características y precio.
`card--elevated`	Con sombra.
`card--plain`	Sin fondo ni borde; imagen redondeada.
`card--link`	Toda la card es un enlace.
`card--soft`	Fondo suave e ícono en la esquina.
`card--pricing`	Planes y precios.

Variables

Variable	Valor por defecto	Uso
`--ds-card-bg`	`var(--ds-color-surface)`	Fondo.
`--ds-card-color`	`inherit`	Color del texto.
`--ds-card-border-color`	`var(--ds-color-border)`	Color del borde.
`--ds-card-border-width`	`1px`	Grosor del borde.
`--ds-card-radius`	`var(--ds-radius-lg)`	Radio de las esquinas.
`--ds-card-shadow`	`none`	Sombra.
`--ds-card-padding`	`var(--ds-space-4)`	Espacio interno de cuerpo, cabecera y pie.
`--ds-card-gap`	`0`	Separación entre las partes de la card.
`--ds-card-cap-bg`	`color-mix(in srgb, var(--ds-color-text) 6%, var(--ds-color-surface))`	Fondo de cabecera y pie.
`--ds-card-image-height`	`auto`	Alto de la imagen (auto = proporción original).
`--ds-card-image-radius`	`0`	Radio de la imagen.
`--ds-card-icon-size`	`3.5rem`	Tamaño del ícono destacado.
`--ds-card-icon-bg`	`var(--ds-color-primary)`	Fondo del ícono destacado.
`--ds-card-icon-color`	`var(--ds-color-primary-contrast)`	Color del ícono destacado.