desy-html

Label

Por defecto

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

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.

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>.

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"
}) }}