DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Etiqueta

Indica la información a incluir en el campo, siempre tiene que estar. En caso de que se quiera ocultar deberá tener la clase sr-only, para que sea legible por los lectores de pantalla.

Label

Por defecto

Descripción visual

Bloque rectangular con borde gris claro de 1px y fondo blanco. Contiene título pequeño gris oscuro arriba y texto negro de tamaño estándar debajo. Espaciado interno moderado en todos los lados.

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/label/_macro.label.njk" import componentLabel %}
{{ componentLabel({
  "text": "Esto es un label"
}) }}

Con clases de css aplicadas

Descripción visual

Bloque rectangular con borde gris claro de 1px y fondo azul muy pálido. Contiene título pequeño gris oscuro arriba y texto azul oscuro de tamaño estándar con fondo azul claro debajo. Espaciado interno moderado en todos los lados.

Mostrar códigodel ejemplo: Con clases de css aplicadas

Contenido

Nunjucks macro
{% from "components/label/_macro.label.njk" import componentLabel %}
{{ componentLabel({
  "classes": "inline-block p-base bg-primary-light",
  "text": "Esto es un label"
}) }}

Con label como encabezado

Utiliza el parámetro 'isPageheading': true para que el label esté dentro de un encabezado. Usa el parámetro 'headingLevel' para establecer el nivel del encabezado. Por ejemplo: 'headingLevel': 3 creará un encabezado <h3>. Si no se establece un 'headingLevel', el label no estará rodeado de un encabezado.

Descripción visual

Bloque rectangular con borde gris claro de 1px y fondo blanco. Contiene título pequeño gris oscuro arriba y texto negro en tamaño grande con peso de fuente bold/negrita debajo. Espaciado interno moderado en todos los lados.

Mostrar códigodel ejemplo: Con label como encabezado

Contenido

Nunjucks macro
{% from "components/label/_macro.label.njk" import componentLabel %}
{{ componentLabel({
  "text": "Esto es un label",
  "classes": "c-h1",
  "isPageHeading": true
}) }}

Con label como encabezado con h3

Utiliza el parámetro 'isPageheading': true para que el label esté dentro de un encabezado. Usa el parámetro 'headingLevel' para establecer el nivel del encabezado. Por ejemplo: 'headingLevel': 3 creará un encabezado <h3>.

Descripción visual

Rectángulo con borde gris claro de 1px y fondo blanco. Contiene dos líneas de texto: la primera es un encabezado en peso negrita negro de tamaño mediano, la segunda es texto regular negro de tamaño estándar. Padding interno uniforme alrededor del contenido.

Mostrar códigodel ejemplo: Con label como encabezado con h3

Contenido

Nunjucks macro
{% from "components/label/_macro.label.njk" import componentLabel %}
{{ componentLabel({
  "text": "Esto es un label",
  "classes": "c-h3",
  "isPageHeading": true,
  "headingLevel": "3"
}) }}