Feature

Anatomía CSS

<div class="feature-list">

</div>

Tokens resueltos

Valores finales tras seguir la cadena de tokens. Derivados del source: si un token cambia, esta tabla cambia sola.

CSS mínimo funcional

Autocontenido: sin imports ni tokens. Para previews y prototipos — en producción se consume el CSS del DS (@atom-uikit/css/components.css</code>, <code>@atom-uikit/tokens/tokens.css).

/* -------------------------------------------------------------------------
   Feature

   Fila de "icono + texto (+ valor)". El patron mas repetido de una landing:
   listas de beneficios, specs, checklists, comparativas. Vivia hardcodeado
   dentro de pricing-card; es un atomo por derecho propio.

   Estructura:  .feature-list > .feature > .feature__label > [icon] + texto
                                        > .feature__value (opcional)
   Variantes:   .feature-list--divided  hairlines entre filas
                .feature--compact       ritmo denso
   ------------------------------------------------------------------------- */

.feature-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Tipografia propia: cuerpo legible, no el medium por defecto de todo el
     sistema. Una lista larga se lee mejor en regular. */
  font-family: 'inter tight', -apple-system, blinkmacsystemfont, 'segoe ui', roboto, helvetica, arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0em;
}

.feature__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Slot de icono del feature — mismo patron que button__icon / atom-wa-btn__icon:
   el atomo define el wrapper, el consumidor solo mete el SVG. */
.feature__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  color: #25d366;
}

.feature__icon svg {
  width: 100%;
  height: 100%;
}

/* Texto del label — parte explicita, no un span anonimo */
.feature__text {
  min-width: 0;
  color: inherit;
  text-wrap: pretty;
}

.feature__value {
  flex-shrink: 0;
  /* pedido de Karen 2026-07-31: los chips numericos +40% sobre el paso del tag */
  font-size: calc(10.24px * 1.4);
}

/* ---- Ritmo ---- */

.feature-list--divided .feature {
  padding-block: 20px;
  border-bottom: 1px solid
    color-mix(in srgb, currentcolor 18%, transparent);
}

.feature-list--divided .feature:last-child {
  border-bottom: 0;
}

.feature--compact {
  padding-block: 12px;
}

@media (max-width: 767px) {
  .feature-list--divided .feature {
    padding-block: 16px;
  }
}