09/Contenido

Card

Tarjeta plana con visual, etiqueta de estado, texto, meta y una flecha que aparece en hover.

Con visual

Si la card es un enlace, la flecha cb-card__go reemplaza a la etiqueta al pasar el mouse.

01Activo

Sistemas de gestión

Inventario, ventas y reportes adaptados a cómo opera tu negocio.

LaravelMySQL

HTML

<div class="max-w-[360px]">
  <a class="cb-card" href="#">
    <div class="cb-card__top"><span>01</span><span class="cb-tag cb-tag--live">Activo</span></div>
    <svg class="cb-card__go" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M7 17 17 7M8 7h9v9"/></svg>
    <div class="cb-card__visual"><div class="cb-viz cb-viz--rows"><i></i><i></i><i></i><i></i></div></div>
    <h3 class="cb-card__title">Sistemas de gestión</h3>
    <p class="cb-card__text">Inventario, ventas y reportes adaptados a cómo opera tu negocio.</p>
    <div class="cb-card__meta"><span>Laravel</span><span>MySQL</span></div>
  </a>
</div>

Visuales decorativos

Seis mini visuales listos: rows, bars, shop, phone, term y nodes. Todos usan los tokens de color.

cb-viz--rows

cb-viz--bars

cb-viz--shop

cb-viz--phone

HTML

<div class="cb-grid cb-grid--4 cb-grid--flush">
  <div class="cb-card cb-card--compact"><div class="cb-card__visual"><div class="cb-viz cb-viz--rows"><i></i><i></i><i></i><i></i></div></div><p class="cb-card__text">cb-viz--rows</p></div>
  <div class="cb-card cb-card--compact"><div class="cb-card__visual"><div class="cb-viz cb-viz--bars"><i style="height: 35%"></i><i style="height: 55%"></i><i style="height: 42%"></i><i style="height: 70%"></i><i class="is-accent" style="height: 92%"></i><i style="height: 60%"></i></div></div><p class="cb-card__text">cb-viz--bars</p></div>
  <div class="cb-card cb-card--compact"><div class="cb-card__visual"><div class="cb-viz cb-viz--shop"><i></i><i></i><i></i><i></i><i></i><i></i></div></div><p class="cb-card__text">cb-viz--shop</p></div>
  <div class="cb-card cb-card--compact"><div class="cb-card__visual"><div class="cb-viz cb-viz--phone"></div></div><p class="cb-card__text">cb-viz--phone</p></div>
</div>

Destacada y compacta

Plan recomendadoPopular

Profesional

El borde y el fondo cambian con el modificador --featured.

Compacta

Sin altura mínima de 300px.

HTML

<div class="grid gap-4 cb-md:grid-cols-2">
  <div class="cb-card cb-card--featured cb-card--compact">
    <div class="cb-card__top"><span>Plan recomendado</span><span class="cb-tag cb-tag--live">Popular</span></div>
    <h3 class="cb-card__title">Profesional</h3>
    <p class="cb-card__text">El borde y el fondo cambian con el modificador <code>--featured</code>.</p>
  </div>
  <div class="cb-card cb-card--compact">
    <h3 class="cb-card__title">Compacta</h3>
    <p class="cb-card__text">Sin altura mínima de 300px.</p>
  </div>
</div>

Clases y modificadores

Clase	Descripción
`.cb-card`	Tarjeta con borde de 1px, sin sombra. Si es `a` o `button` cambia de fondo en hover.
`.cb-card--featured`	Borde de acento y fondo elevado.
`.cb-card--compact`	Quita la altura mínima.
`.cb-card--hover`	Activa el hover en una card que no es enlace.
`.cb-card__top`	Fila superior con número y etiqueta.
`.cb-card__go`	Flecha ↗ que aparece en hover y foco.
`.cb-card__visual`	Caja de 110px para el visual.
`.cb-card__title`, `.cb-card__text`	Título y descripción.
`.cb-card__meta`	Etiquetas al pie, empujadas al fondo.
`.cb-viz--rows\|bars\|shop\|phone\|term\|nodes`	Visuales decorativos. En `bars`, `i.is-accent` resalta una barra.

Accesibilidad

Cuando toda la card es enlace, el texto del enlace es todo su contenido: mantén el título corto y claro.
Los visuales son decorativos; no necesitan texto alternativo.