Estilos

Componentes

Formularios

Organismos

Indicador

Los indicadores de datos muestran información cuantitativa relevante de forma destacada y sintética. Se utilizan para comunicar métricas clave de manera rápida, sin requerir interacción por parte de la persona usuaria.

Uso

Cuándo usar

  • Para destacar métricas clave (KPIs) dentro de una página o sección.
  • Cuando se necesita mostrar información resumida de alto nivel.
  • En dashboards o páginas institucionales donde el foco está en la lectura rápida.
  • Para comunicar impacto, resultados o volumen de servicios.

Cuándo no usar

  • Cuando el contenido requiere exploración o interacción (usar tablas, gráficos o filtros).
  • Para datos complejos que necesitan contexto adicional para ser comprendidos.
  • Cuando hay demasiados indicadores (evitar sobrecarga cognitiva).
  • Si el dato no es relevante o accionable para la persona usuaria.

Tipos

Indicador simple

Muestra un único valor acompañado de una etiqueta descriptiva.

Componente indicador simple

Indicador con descripción

Incluye una breve explicación que aporta contexto al dato.

Indicador con descripción

Grupo de indicadores

Se presentan múltiples indicadores en conjunto (generalmente en grilla) para facilitar la comparación.

Grupo de indicadores

Contexto de uso

Contenido

Usar números claros y legibles, incorporando separadores de miles. Los textos deben ser breves y directos, evitando tecnicismos innecesarios.

Redacción

El título debe responder qué representa el número. La descripción debe aportar contexto sin repetir el título, manteniendo consistencia gramatical entre indicadores.

Disposición

Utilizar grillas responsivas. En mobile, los indicadores se apilan verticalmente. Mantener espacios consistentes entre componentes para asegurar una buena lectura.

Contenido en esta página

Sin fondo

36.578

Días ahorrados

Tiempo que se ahorran los vecinos y la administracion Pública


<div class="indicator">
	<h1>36.578</h1>
	<p class="headline-lg">Días ahorrados</p>
	<p class="text-md">Tiempo que se ahorran los vecinos y la administracion Pública</p>
</div>

Con fondos

36.578

Días ahorrados

Tiempo que se ahorran los vecinos y la administracion Pública


<div class="indicator bg-light">
	<h1>36.578</h1>
	<p class="headline-lg">Días ahorrados</p>
	<p class="text-md">Tiempo que se ahorran los vecinos y la administracion Pública</p>
</div>

Sin borde

36.578

Días ahorrados

Tiempo que se ahorran los vecinos y la administracion Pública


36.578

Días ahorrados

Tiempo que se ahorran los vecinos y la administracion Pública


<div class="indicator bg-light unbordered">
	<h1>36.578</h1>
	<p class="headline-lg">Días ahorrados</p>
	<p class="text-md">Tiempo que se ahorran los vecinos y la administracion Pública</p>
</div>
<br />
<div class="indicator unbordered">
	<h1>36.578</h1>
	<p class="headline-lg">Días ahorrados</p>
	<p class="text-md">Tiempo que se ahorran los vecinos y la administracion Pública</p>
</div>

Tamaños

36.578

Días ahorrados

Tiempo que se ahorran los vecinos y la administracion Pública


36.578

Días ahorrados

Tiempo que se ahorran los vecinos y la administracion Pública


<div class="indicator indicator-start bigger-title">
	<h1>36.578</h1>
	<p class="headline-lg">Días ahorrados</p>
	<p class="text-md">Tiempo que se ahorran los vecinos y la administracion Pública</p>
</div>
<br />
<div class="indicator indicator-start bigger-title">
	<h1>36.578</h1>
	<p class="headline-lg">Días ahorrados</p>
	<p class="text-md">Tiempo que se ahorran los vecinos y la administracion Pública</p>
</div>

Disposición

En tres columnas

36.578

Días ahorrados

Tiempo que se ahorran los vecinos y la administracion Pública

36.578

Días ahorrados

Tiempo que se ahorran los vecinos y la administracion Pública

36.578

Días ahorrados

Tiempo que se ahorran los vecinos y la administracion Pública


<div class="indicator-items-3">
  <div class="col">
    <div class="indicator">
      <h1>36.578</h1>
      <p class="headline-lg">Días ahorrados</p>
      <p class="text-md">Tiempo que se ahorran los vecinos y la administracion Pública</p>
    </div>
  </div>
  <div class="col">
    <div class="indicator">
      <h1>36.578</h1>
      <p class="headline-lg">Días ahorrados</p>
      <p class="text-md">Tiempo que se ahorran los vecinos y la administracion Pública</p>
    </div>
  </div>
  <div class="col">
    <div class="indicator">
      <h1>36.578</h1>
      <p class="headline-lg">Días ahorrados</p>
      <p class="text-md">Tiempo que se ahorran los vecinos y la administracion Pública</p>
    </div>
  </div>
</div>

En dos columnas

36.578

Días ahorrados

Tiempo que se ahorran los vecinos y la administracion Pública

36.578

Días ahorrados

Tiempo que se ahorran los vecinos y la administracion Pública


<div class="indicator-items-2">
  <div class="col">
    <div class="indicator bg-light">
      <h1>36.578</h1>
      <p class="headline-lg">Días ahorrados</p>
      <p class="text-md">Tiempo que se ahorran los vecinos y la administracion Pública</p>
    </div>
  </div>
  <div class="col">
    <div class="indicator bg-light">
      <h1>36.578</h1>
      <p class="headline-lg">Días ahorrados</p>
      <p class="text-md">Tiempo que se ahorran los vecinos y la administracion Pública</p>
    </div>
  </div>
</div>

Variantes

Anatomía

Anatomia del indicador
ElementoCarácter
1. Valor numéricoDato principal que se quiere destacar.
2. TítuloDescribe el significado del valor.
3. Descripción (Opcional)Aporta contexto adicional.
4. Contenedor (Opcional)Tarjeta visual que agrupa el contenido.

Estilos

Sin contenedor

Se utiliza directamente sobre el fondo de la página. Es ideal para secciones destacadas o encabezados.

Migas de Pan variante desktop

Con contenedor

Cada indicador se presenta dentro de una tarjeta, mejorando la separación visual y la legibilidad.

Migas de Pan variante desktop

Jerarquía visual

El número es el elemento principal, con mayor tamaño y peso. El título describe el dato y la descripción, si está presente, aporta contexto.

Migas de Pan variante desktop

Contenido en esta página

Navegación alternativa

El indicador de datos no es un componente interactivo, por lo tanto no requiere navegación mediante teclado ni presenta estados de interacción.

La información se presenta de forma estática y debe ser accesible directamente a través de su contenido textual.

En caso de estar dentro de una página con navegación por teclado, el indicador no debe ser foco de tabulación (tabindex), ya que no representa una acción ni control interactivo.

Etiquetado descriptivo

Para cumplir con buenas prácticas de accesibilidad (WCAG + WAI-ARIA), se debe asegurar que el contenido sea comprensible sin depender únicamente de la presentación visual.

Ejemplo del indicador:
Visual: 36.578
Días ahorrados Lector de pantalla: "36.578 días ahorrados"

No se requieren atributos ARIA específicos, ya que el componente no es interactivo.

Criterios WCAG aplicados

Success Criterion 1.3.1 Info and Relationships (Level A)

La información, la estructura y las relaciones transmitidas a través de la presentación pueden determinarse mediante programación o están disponibles en el texto.

Success Criterion 1.4.3 Contrast (Minimum) (Level AA)

La presentación visual de texto y de imágenes de texto tiene una relación de contraste de por lo menos 4.5:1, excepto textos grandes e imágenes de texto grande que tienen un contraste de por lo menos 3:1, textos o imágenes que son parte de un componente inactivo de interfaz de usuario o son pura decoración, o logotipos.

Success Criterion 1.4.4 Resize Text (Level AA)

Excepto por los subtítulos e imágenes de texto, el texto puede redimensionarse hasta un 200 % sin tecnología de asistencia, sin pérdida de contenido ni funcionalidad.

Contenido en esta página

Navegación de pie de página