ComponentesComponents

EstadísticasStats

Cuatro cifras grandes con su etiqueta.Four large figures with their labels.

DiseñoDesign: Tailark mist (MIT) · stats/twoMITlanding · densidaddensity baja · editorialMarkdownJSON

CódigoCode

<section class="s-stats" aria-labelledby="stats-title">
  <div class="s-stats__inner">
    <h2 class="s-stats__title" id="stats-title">En cifras</h2>
    <p class="s-stats__lead">Números de ejemplo para mostrar el crecimiento de tu producto.</p>
    <dl class="s-stats__grid">
      <div class="s-stats__item"><dt class="s-stats__label">Componentes</dt><dd class="s-stats__value">30</dd></div>
      <div class="s-stats__item"><dt class="s-stats__label">Dependencias</dt><dd class="s-stats__value">0</dd></div>
      <div class="s-stats__item"><dt class="s-stats__label">Temas</dt><dd class="s-stats__value">2</dd></div>
      <div class="s-stats__item"><dt class="s-stats__label">Licencia</dt><dd class="s-stats__value">MIT</dd></div>
    </dl>
  </div>
</section>

«Todo» trae tokens, dependencias y componente en un solo archivo, listo para abrir o dárselo a un agente.“All” bundles tokens, dependencies and the component in one file, ready to open or hand to an agent.

InstalaciónInstallation

  1. Agrega una vezAdd once tokens.css (colores, radios, tema oscuro).(colors, radii, dark theme).
  2. Copia los archivos:Copy the files: stats.html, stats.css.
  3. Para el tema oscuro, pon la claseFor the dark theme, add the class dark ento <html>.

Cuándo usarloWhen to use it

ÚsaloUse it

  • Para mostrar tracción o resultados.
  • To show traction or results.

Mejor noAvoid

  • Con cifras que no puedes respaldar.
  • With figures you can't back up.

AccesibilidadAccessibility

termdefinition
  • Lista de definiciones (dl): el lector une cada cifra con su etiqueta.
  • Definition list (dl): screen readers pair each figure with its label.

Cómo probarloHow to test it

  • El lector dice «Componentes, 30».
  • The screen reader says “Components, 30”.

CréditosCredits