desy-html

Pill

Parámetros Nunjucks del componente: "Pill". Versión: 12.0.1

Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.

        {"val":"params:\n- name: text\n  type: string\n  required: true\n  description: If `html` is set, this is not required. Text to use within the pill component. If `html` is provided, the `text` argument will be ignored.\n- name: html\n  type: string\n  required: true\n  description: If `text` is set, this is not required. HTML to use within the pill component. If `html` is provided, the `text` argument will be ignored.\n- name: type\n  type: string\n  required: false\n  description: Type of `a`, `button` or `span`. Defaults to `span`.\n- name: href\n  type: string\n  required: false\n  description: The value of the pill’s `href` attribute. Defaults to `#content` if you do not provide a value.\n- name: target\n  type: string\n  required: false\n  description: The target where the pill should link to.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the pill.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the pill.","length":1006}

Por defecto

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- pill --><span class="c-pill" data-module="c-pill">Pill por defecto</span>
<!-- /pill -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "text": "Pill por defecto"
}) }}
Pill por defecto
Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "text": "Pill por defecto"
}) }}

Tipo enlace

Ejemplo: "Tipo enlace", de código HTML, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- pill --><a href="http://www.google.com" class="c-pill" data-module="c-pill">Tipo enlace</a><!-- /pill -->

Ejemplo: "Tipo enlace", de código Nunjucks, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "text": "Tipo enlace",
  "href": "http://www.google.com"
}) }}
Tipo enlace
Mostrar códigodel ejemplo: Tipo enlace

Contenido

Nunjucks macro
{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "text": "Tipo enlace",
  "href": "http://www.google.com"
}) }}

Tipo enlace con target blank

Ejemplo: "Tipo enlace con target blank", de código HTML, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- pill --><a href="http://www.google.com" target="_blank" class="c-pill" data-module="c-pill">Tipo enlace con target</a><!-- /pill -->

Ejemplo: "Tipo enlace con target blank", de código Nunjucks, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "text": "Tipo enlace con target",
  "href": "http://www.google.com",
  "target": "_blank"
}) }}
Tipo enlace con target
Mostrar códigodel ejemplo: Tipo enlace con target blank

Contenido

Nunjucks macro
{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "text": "Tipo enlace con target",
  "href": "http://www.google.com",
  "target": "_blank"
}) }}

Tipo botón

Ejemplo: "Tipo botón", de código HTML, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- pill --><button class="c-pill cursor-pointer" data-module="c-pill">Tipo botón</button><!-- /pill -->

Ejemplo: "Tipo botón", de código Nunjucks, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "type": "button",
  "text": "Tipo botón",
  "classes": "cursor-pointer"
}) }}
Mostrar códigodel ejemplo: Tipo botón

Contenido

Nunjucks macro
{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "type": "button",
  "text": "Tipo botón",
  "classes": "cursor-pointer"
}) }}

Tipo enlace o botón con estado hover

Simula activar la pseudoclase de CSS :hover

Ejemplo: "Tipo enlace o botón con estado hover", de código HTML, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- pill --><button class="c-pill ds-hover" data-module="c-pill">Hover</button><!-- /pill -->

Ejemplo: "Tipo enlace o botón con estado hover", de código Nunjucks, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "type": "button",
  "text": "Hover",
  "classes": "ds-hover"
}) }}
Mostrar códigodel ejemplo: Tipo enlace o botón con estado hover

Contenido

Nunjucks macro
{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "type": "button",
  "text": "Hover",
  "classes": "ds-hover"
}) }}

Tipo enlace o botón con estado focus

Simula activar la pseudoclase de CSS :focus

Ejemplo: "Tipo enlace o botón con estado focus", de código HTML, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- pill --><button class="c-pill ds-focus" data-module="c-pill">Focus</button><!-- /pill -->

Ejemplo: "Tipo enlace o botón con estado focus", de código Nunjucks, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "type": "button",
  "text": "Focus",
  "classes": "ds-focus"
}) }}
Mostrar códigodel ejemplo: Tipo enlace o botón con estado focus

Contenido

Nunjucks macro
{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "type": "button",
  "text": "Focus",
  "classes": "ds-focus"
}) }}

Peque

Usa las clases de tamaño de texto para establecer el tamaño.

Ejemplo: "Peque", de código HTML, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- pill --><span class="c-pill text-sm" data-module="c-pill">Peque pill</span>
<!-- /pill -->

Ejemplo: "Peque", de código Nunjucks, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "text": "Peque pill",
  "classes": "text-sm"
}) }}
Peque pill
Mostrar códigodel ejemplo: Peque

Contenido

Nunjucks macro
{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "text": "Peque pill",
  "classes": "text-sm"
}) }}

Con icono a la derecha

Ejemplo: "Con icono a la derecha", de código HTML, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- pill --><button class="c-pill cursor-pointer" data-module="c-pill">Icono derecha pill <svg viewBox="0 0 140 140" class="self-center ml-2" role="img" aria-label="Eliminar" width=" .75em " height=" .75em ">
    <path fill="currentColor" d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" />
  </svg></button><!-- /pill -->

Ejemplo: "Con icono a la derecha", de código Nunjucks, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "type": "button",
  "html": "Icono derecha pill <svg viewBox='0 0 140 140' class='self-center ml-2' role='img' aria-label='Eliminar' width=' .75em ' height=' .75em '><path fill='currentColor' d='M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z'/></svg>",
  "classes": "cursor-pointer"
}) }}
Mostrar códigodel ejemplo: Con icono a la derecha

Contenido

Nunjucks macro
{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "type": "button",
  "html": "Icono derecha pill <svg viewBox='0 0 140 140' class='self-center ml-2' role='img' aria-label='Eliminar' width=' .75em ' height=' .75em '><path fill='currentColor' d='M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z'/></svg>",
  "classes": "cursor-pointer"
}) }}

Con icono a la izquierda

Ejemplo: "Con icono a la izquierda", de código HTML, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- pill --><button class="c-pill cursor-pointer" data-module="c-pill"><svg viewBox="0 0 140 140" class=" self-center mr-2 " aria-hidden="true" width=" .75em " height=" .75em ">
    <path fill="currentColor" d="M35 35a35 35 0 1070 0 35 35 0 10-70 0zM132.78 133.33a66.59 66.59 0 00-125.56 0 5 5 0 004.71 6.67h116.14a5 5 0 004.71-6.67z" />
  </svg> Icono izquierda pill</button><!-- /pill -->

Ejemplo: "Con icono a la izquierda", de código Nunjucks, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "type": "button",
  "html": "<svg viewBox='0 0 140 140' class=' self-center mr-2 '  aria-hidden='true' width=' .75em ' height=' .75em '><path fill='currentColor' d='M35 35a35 35 0 1070 0 35 35 0 10-70 0zM132.78 133.33a66.59 66.59 0 00-125.56 0 5 5 0 004.71 6.67h116.14a5 5 0 004.71-6.67z' /></svg> Icono izquierda pill",
  "classes": "cursor-pointer"
}) }}
Mostrar códigodel ejemplo: Con icono a la izquierda

Contenido

Nunjucks macro
{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "type": "button",
  "html": "<svg viewBox='0 0 140 140' class=' self-center mr-2 '  aria-hidden='true' width=' .75em ' height=' .75em '><path fill='currentColor' d='M35 35a35 35 0 1070 0 35 35 0 10-70 0zM132.78 133.33a66.59 66.59 0 00-125.56 0 5 5 0 004.71 6.67h116.14a5 5 0 004.71-6.67z' /></svg> Icono izquierda pill",
  "classes": "cursor-pointer"
}) }}

Primario

Ejemplo: "Primario", de código HTML, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- pill --><span class="c-pill c-pill--primary" data-module="c-pill"><svg viewBox="0 0 140 140" class=" self-center mr-2 " aria-hidden="true" width=" .75em " height=" .75em ">
    <path fill="currentColor" d="M43.7 140a17.42 17.42 0 01-12.36-5.12L5.13 108.66a17.49 17.49 0 010-24.75l24.61-24.25a7.5 7.5 0 0110.52 10.68L15.69 94.56a2.5 2.5 0 000 3.49l26.21 26.22a2.51 2.51 0 003.54 0l24.22-24.53a7.5 7.5 0 1110.68 10.52l-24.21 24.57A17.53 17.53 0 0143.7 140zM99.66 80.26a7.49 7.49 0 01.08-10.6l24.57-24.22a2.5 2.5 0 000-3.49L98.06 15.73a2.51 2.51 0 00-3.54 0L70.34 40.26a7.5 7.5 0 01-10.68-10.52L83.87 5.17a17.52 17.52 0 0124.79 0l26.21 26.21a17.49 17.49 0 010 24.75l-24.61 24.21a7.49 7.49 0 01-10.6-.08z" />
    <path fill="currentColor" d="M55 92.5a7.5 7.5 0 01-5.3-12.8l30-30a7.5 7.5 0 1110.6 10.6l-30 30a7.44 7.44 0 01-5.3 2.2z" />
  </svg> Primario</span>
<!-- /pill -->

Ejemplo: "Primario", de código Nunjucks, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "html": "<svg viewBox='0 0 140 140' class=' self-center mr-2 '  aria-hidden='true' width=' .75em ' height=' .75em '><path fill='currentColor' d='M43.7 140a17.42 17.42 0 01-12.36-5.12L5.13 108.66a17.49 17.49 0 010-24.75l24.61-24.25a7.5 7.5 0 0110.52 10.68L15.69 94.56a2.5 2.5 0 000 3.49l26.21 26.22a2.51 2.51 0 003.54 0l24.22-24.53a7.5 7.5 0 1110.68 10.52l-24.21 24.57A17.53 17.53 0 0143.7 140zM99.66 80.26a7.49 7.49 0 01.08-10.6l24.57-24.22a2.5 2.5 0 000-3.49L98.06 15.73a2.51 2.51 0 00-3.54 0L70.34 40.26a7.5 7.5 0 01-10.68-10.52L83.87 5.17a17.52 17.52 0 0124.79 0l26.21 26.21a17.49 17.49 0 010 24.75l-24.61 24.21a7.49 7.49 0 01-10.6-.08z'/><path fill='currentColor' d='M55 92.5a7.5 7.5 0 01-5.3-12.8l30-30a7.5 7.5 0 1110.6 10.6l-30 30a7.44 7.44 0 01-5.3 2.2z'/></svg> Primario",
  "classes": "c-pill--primary"
}) }}
Primario
Mostrar códigodel ejemplo: Primario

Contenido

Nunjucks macro
{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "html": "<svg viewBox='0 0 140 140' class=' self-center mr-2 '  aria-hidden='true' width=' .75em ' height=' .75em '><path fill='currentColor' d='M43.7 140a17.42 17.42 0 01-12.36-5.12L5.13 108.66a17.49 17.49 0 010-24.75l24.61-24.25a7.5 7.5 0 0110.52 10.68L15.69 94.56a2.5 2.5 0 000 3.49l26.21 26.22a2.51 2.51 0 003.54 0l24.22-24.53a7.5 7.5 0 1110.68 10.52l-24.21 24.57A17.53 17.53 0 0143.7 140zM99.66 80.26a7.49 7.49 0 01.08-10.6l24.57-24.22a2.5 2.5 0 000-3.49L98.06 15.73a2.51 2.51 0 00-3.54 0L70.34 40.26a7.5 7.5 0 01-10.68-10.52L83.87 5.17a17.52 17.52 0 0124.79 0l26.21 26.21a17.49 17.49 0 010 24.75l-24.61 24.21a7.49 7.49 0 01-10.6-.08z'/><path fill='currentColor' d='M55 92.5a7.5 7.5 0 01-5.3-12.8l30-30a7.5 7.5 0 1110.6 10.6l-30 30a7.44 7.44 0 01-5.3 2.2z'/></svg> Primario",
  "classes": "c-pill--primary"
}) }}

Aviso

Ejemplo: "Aviso", de código HTML, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- pill --><span class="c-pill c-pill--warning" data-module="c-pill"><svg viewBox="0 0 140 140" class=" self-center mr-2 " aria-hidden="true" width=" .75em " height=" .75em ">
    <path fill="currentColor" d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" />
  </svg> Aviso</span>
<!-- /pill -->

Ejemplo: "Aviso", de código Nunjucks, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "html": "<svg viewBox='0 0 140 140' class=' self-center mr-2 '  aria-hidden='true' width=' .75em ' height=' .75em '><path fill='currentColor' d='M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z'/></svg> Aviso",
  "classes": "c-pill--warning"
}) }}
Aviso
Mostrar códigodel ejemplo: Aviso

Contenido

Nunjucks macro
{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "html": "<svg viewBox='0 0 140 140' class=' self-center mr-2 '  aria-hidden='true' width=' .75em ' height=' .75em '><path fill='currentColor' d='M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z'/></svg> Aviso",
  "classes": "c-pill--warning"
}) }}

Éxito

Ejemplo: "Éxito", de código HTML, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- pill --><span class="c-pill c-pill--success" data-module="c-pill"><svg viewBox="0 0 140 140" class=" self-center mr-2 " aria-hidden="true" width=" .75em " height=" .75em ">
    <path fill="currentColor" d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" />
  </svg> Éxito</span>
<!-- /pill -->

Ejemplo: "Éxito", de código Nunjucks, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "html": "<svg viewBox='0 0 140 140' class=' self-center mr-2 '  aria-hidden='true' width=' .75em ' height=' .75em '><path fill='currentColor' d='M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z'/></svg> Éxito",
  "classes": "c-pill--success"
}) }}
Éxito
Mostrar códigodel ejemplo: Éxito

Contenido

Nunjucks macro
{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "html": "<svg viewBox='0 0 140 140' class=' self-center mr-2 '  aria-hidden='true' width=' .75em ' height=' .75em '><path fill='currentColor' d='M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z'/></svg> Éxito",
  "classes": "c-pill--success"
}) }}

Alerta

Ejemplo: "Alerta", de código HTML, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- pill --><span class="c-pill c-pill--alert" data-module="c-pill"><svg viewBox="0 0 140 140" class=" self-center mr-2 " aria-hidden="true" width=" .75em " height=" .75em ">
    <path fill="currentColor" d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm-7.5 35a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 75a10 10 0 1110-10 10 10 0 01-10 10z" />
  </svg> Alerta</span>
<!-- /pill -->

Ejemplo: "Alerta", de código Nunjucks, para maquetar el componente: "Pill", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "html": "<svg viewBox='0 0 140 140' class=' self-center mr-2 '  aria-hidden='true' width=' .75em ' height=' .75em '><path fill='currentColor' d='M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm-7.5 35a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 75a10 10 0 1110-10 10 10 0 01-10 10z'/></svg> Alerta",
  "classes": "c-pill--alert"
}) }}
Alerta
Mostrar códigodel ejemplo: Alerta

Contenido

Nunjucks macro
{% from "components/pill/_macro.pill.njk" import componentPill %}

{{ componentPill({
  "html": "<svg viewBox='0 0 140 140' class=' self-center mr-2 '  aria-hidden='true' width=' .75em ' height=' .75em '><path fill='currentColor' d='M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm-7.5 35a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 75a10 10 0 1110-10 10 10 0 01-10 10z'/></svg> Alerta",
  "classes": "c-pill--alert"
}) }}