Designloop

Beneficios

Rejilla de seis bloques numerados con título y texto, bajo una cabecera centrada.

Sección de beneficios de la landing, justo después de Cómo funciona.

Ejemplo

Primeros tres bloques, con los textos del diccionario en español de producción.

html · landing
<section class="section benefits" aria-labelledby="benefits-title">
  <div class="wrap">
    <div class="section-head is-center">
      <h2 id="benefits-title">Así trabajamos<br>con tu equipo</h2>
    </div>
    <ol class="benefit-grid">
      <li><span class="num">01</span><h3>Pensamos contigo</h3><p>Trabajamos de forma honesta. Si algo no nos convence, te lo decimos.</p></li>
      <li><span class="num">02</span><h3>Parte de tu equipo</h3><p>Trabajamos en tu repositorio, en Figma y Paper y con las herramientas de tu equipo, junto a las personas que ya tienes.</p></li>
      <li><span class="num">03</span><h3>Design Engineering</h3><p>Diseñamos la interfaz y escribimos el frontend como parte del mismo trabajo. Así mantenemos el mismo criterio en Figma, Paper y el producto.</p></li>
    </ol>
  </div>
</section>

Piezas

Clase Qué hace
.benefits Quita el espacio superior de la sección: continúa Cómo funciona. Más margen bajo la cabecera (clamp(48px, 6vw, 80px)).
.benefit-grid Tres columnas (dos en tableta, una en móvil), 56 px entre filas.
.num Número en --text-xs, --faint y cifras tabulares.
.benefit-grid h3 22 px.
.benefit-grid p 15 px, --muted, hasta 34 caracteres por línea.

Reglas

Regla Cómo se comprueba
Seis bloques: dos filas completas en escritorio. ol.benefit-grid con seis li.
Título de dos o tres palabras; texto de una o dos frases. b1Title…b6Title, b1Text…b6Text.
Sin iconos ni ilustraciones: el número basta. Cada li tiene solo .num, h3 y p.

Antipatrones

  • Iconos genéricos encima de cada beneficio.
  • Rejilla incompleta: cinco o siete bloques dejan huecos en la última fila.

Tokens que usa

--text-xs--faint--muted

Enlace con producción

SuperficieFuenteEstadoHuellaRevisada en
Landingpublic/site/styles.css
.benefits .benefit-grid .num
El archivo no existe en producción.
No está en producción——

Producción en el commit 455e861 (2026-10-13). Sync del 2026-10-13.

Aviso: Clases de los ejemplos que no existen: section, wrap, section-head, is-center, benefit-grid, num

Relacionados

patrones/beneficios · Actualizado el 2026-10-11