10/Contenido

Grid de cards

Grilla con bordes compartidos: el contenedor dibuja arriba e izquierda y cada celda derecha y abajo.

Tres columnas

Pasa a dos columnas por debajo de 960px y a una por debajo de 600px.

01Activo

Gestión

Inventario y ventas.

Laravel

02Activo

Móvil

Apps para Android e iOS.

Kotlin

03Mensual

Soporte

Mejoras y atención directa.

SLA

HTML

<div class="cb-grid cb-grid--flush">
  <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">Gestión</h3>
    <p class="cb-card__text">Inventario y ventas.</p>
    <div class="cb-card__meta"><span>Laravel</span></div>
  </a>
  <a class="cb-card" href="#">
    <div class="cb-card__top"><span>02</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--phone"></div></div>
    <h3 class="cb-card__title">Móvil</h3>
    <p class="cb-card__text">Apps para Android e iOS.</p>
    <div class="cb-card__meta"><span>Kotlin</span></div>
  </a>
  <a class="cb-card" href="#">
    <div class="cb-card__top"><span>03</span><span class="cb-tag">Mensual</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--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>
    <h3 class="cb-card__title">Soporte</h3>
    <p class="cb-card__text">Mejoras y atención directa.</p>
    <div class="cb-card__meta"><span>SLA</span></div>
  </a>
</div>

Dos y cuatro columnas

Uno

cb-grid--2

Dos

cb-grid--2

HTML

<div class="cb-grid cb-grid--2 cb-grid--flush">
  <div class="cb-card cb-card--compact"><h3 class="cb-card__title">Uno</h3><p class="cb-card__text">cb-grid--2</p></div>
  <div class="cb-card cb-card--compact"><h3 class="cb-card__title">Dos</h3><p class="cb-card__text">cb-grid--2</p></div>
</div>
<div class="cb-grid cb-grid--4 mt-6">
  <div class="cb-card cb-card--compact"><p class="cb-card__text">1</p></div>
  <div class="cb-card cb-card--compact"><p class="cb-card__text">2</p></div>
  <div class="cb-card cb-card--compact"><p class="cb-card__text">3</p></div>
  <div class="cb-card cb-card--compact"><p class="cb-card__text">4</p></div>
</div>

Clases y modificadores

Clase	Descripción
`.cb-grid`	Tres columnas con bordes compartidos y 56px de margen superior.
`.cb-grid--2`, `.cb-grid--4`	Dos o cuatro columnas.
`.cb-grid--flush`	Quita el margen superior.

Accesibilidad

Si las cards forman una lista, puedes usar ul con la clase cb-grid y li como celdas.