Cards

Contenedor base .cl-card con secciones opcionales .cl-card-head, .cl-card-body y .cl-card-foot.

Card básica

El contenedor aporta borde, radio y fondo. .cl-card-body agrega el padding estándar.

<div class="cl-card">
  <div class="cl-card-body">Contenido de la card.</div>
</div>

Con encabezado

.cl-card-head alinea el título con una meta o acción a la derecha.

<div class="cl-card">
  <div class="cl-card-head">
    <h3>Resumen económico</h3>
    <span class="cl-mono cl-muted">Vigente desde 1 ago 2024</span>
  </div>
  <div class="cl-card-body">Contenido de la card.</div>
</div>

Con pie

.cl-card-foot para metadatos o acciones al pie, separados por un borde superior.

<div class="cl-card">
  <div class="cl-card-head">
    <h3>Resumen económico</h3>
  </div>
  <div class="cl-card-body">Contenido de la card.</div>
  <div class="cl-card-foot">
    <span class="cl-muted">Actualizado 28 nov 2024</span>
    <button class="cl-btn cl-btn--secondary cl-btn--sm">Ver detalle</button>
  </div>
</div>

Padding directo

Cuando no hay head/body/foot, --padded aplica el padding directamente al contenedor.

<div class="cl-card cl-card--padded">Contenido con padding directo.</div>

Card de campos

Para páginas de detalle: .cl-field-grid dentro del body, con pares .cl-field-label / .cl-field-value.

<div class="cl-card">
  <div class="cl-card-head">
    <h3>Información general</h3>
    <button class="cl-btn cl-btn--ghost cl-btn--sm cl-btn--icon" aria-label="Editar"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h4l11-11-4-4L3 17z"/><path d="m14 6 4 4"/></svg></button>
  </div>
  <div class="cl-card-body cl-field-grid">
    <div><div class="cl-field-label">Nombre completo</div><div class="cl-field-value">Laura Vargas Méndez</div></div>
    <div><div class="cl-field-label">Código</div><div class="cl-field-value cl-mono">3-0511-0782</div></div>
    <div><div class="cl-field-label">Estado</div><div class="cl-field-value">Activo</div></div>
    <div><div class="cl-field-label">Email</div><div class="cl-field-value">laura.vargas@empresa.cr</div></div>
  </div>
</div>

Grid de cards

Componé dashboards con .cl-grid-2, .cl-grid-3 o .cl-grid-4.

<div class="cl-grid-3">
  <div class="cl-card"><div class="cl-card-body">Card 1</div></div>
  <div class="cl-card"><div class="cl-card-body">Card 2</div></div>
  <div class="cl-card"><div class="cl-card-body">Card 3</div></div>
</div>