desy-html

Description-list

Parámetros Nunjucks del componente: "Description-list". 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: items\n  type: array\n  required: true\n  description: Array of term/definition pairs.\n  params:\n  - name: term\n    type: object\n    required: true\n    description: term in dt.\n    - name: text\n      type: string\n      required: true\n      description: If `html` is set, this is not required. Text to use within each dt item. 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 each dt item. If `html` is provided, the `text` argument will be ignored.\n    - name: classes\n      type: string\n      required: false\n      description: Classes to add to the dt.\n    - name: attributes\n      type: object\n      required: false\n      description: HTML attributes (for example data attributes) to add to the dt.\n  - name: definition\n    type: object\n    required: true\n    description: definition in dd.\n    - name: text\n      type: string\n      required: true\n      description: If `html` is set, this is not required. Text to use within each dd item. 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 each dd item. If `html` is provided, the `text` argument will be ignored.\n    - name: classes\n      type: string\n      required: false\n      description: Classes to add to the dd.\n    - name: attributes\n      type: object\n      required: false\n      description: HTML attributes (for example data attributes) to add to the dd.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to a div container that contain the dt/dd pair.\n  - name: attributes\n    type: object\n    required: false\n    description: HTML attributes (for example data attributes) to add to a div container that contain the dt/dd pair.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the checkboxes container.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the nav tag.","length":2178}

Por defecto

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Description List", 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>.

<!-- description-list -->
<dl>
  <div>
    <dt class="text-sm text-neutral-dark">
      término
    </dt>
    <dd class="text-base text-black">
      definición
    </dd>
  </div>
</dl>
<!-- /description-list -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Description List", 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/description-list/_macro.description-list.njk" import componentDescriptionList %}

{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      }
    }
  ]
}) }}
término
definición
Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}

{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      }
    }
  ]
}) }}

Grande

Ejemplo: "Grande", de código HTML, para maquetar el componente: "Description List", 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>.

<!-- description-list -->
<dl>
  <div>
    <dt class="text-sm text-neutral-dark">
      término
    </dt>
    <dd class="text-lg">
      definición
    </dd>
  </div>
</dl>
<!-- /description-list -->

Ejemplo: "Grande", de código Nunjucks, para maquetar el componente: "Description List", 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/description-list/_macro.description-list.njk" import componentDescriptionList %}

{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición",
        "classes": "text-lg"
      }
    }
  ]
}) }}
término
definición
Mostrar códigodel ejemplo: Grande

Contenido

Nunjucks macro
{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}

{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición",
        "classes": "text-lg"
      }
    }
  ]
}) }}

Extra grande

Ejemplo: "Extra grande", de código HTML, para maquetar el componente: "Description List", 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>.

<!-- description-list -->
<dl>
  <div>
    <dt class="text-sm text-neutral-dark">
      término
    </dt>
    <dd class="font-bold text-xl">
      definición
    </dd>
  </div>
</dl>
<!-- /description-list -->

Ejemplo: "Extra grande", de código Nunjucks, para maquetar el componente: "Description List", 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/description-list/_macro.description-list.njk" import componentDescriptionList %}

{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición",
        "classes": "font-bold text-xl"
      }
    }
  ]
}) }}
término
definición
Mostrar códigodel ejemplo: Extra grande

Contenido

Nunjucks macro
{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}

{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición",
        "classes": "font-bold text-xl"
      }
    }
  ]
}) }}

Vertical

Ejemplo: "Vertical", de código HTML, para maquetar el componente: "Description List", 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>.

<!-- description-list -->
<dl>
  <div class="mb-base">
    <dt class="text-sm text-neutral-dark">
      término
    </dt>
    <dd class="text-base text-black">
      definición
    </dd>
  </div>
  <div class="mb-base">
    <dt class="text-sm text-neutral-dark">
      término
    </dt>
    <dd class="text-base text-black">
      definición
    </dd>
  </div>
  <div class="mb-base">
    <dt class="text-sm text-neutral-dark">
      término
    </dt>
    <dd class="text-base text-black">
      definición
    </dd>
  </div>
</dl>
<!-- /description-list -->

Ejemplo: "Vertical", de código Nunjucks, para maquetar el componente: "Description List", 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/description-list/_macro.description-list.njk" import componentDescriptionList %}

{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "mb-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "mb-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "mb-base"
    }
  ]
}) }}
término
definición
término
definición
término
definición
Mostrar códigodel ejemplo: Vertical

Contenido

Nunjucks macro
{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}

{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "mb-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "mb-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "mb-base"
    }
  ]
}) }}

Horizontal

Ejemplo: "Horizontal", de código HTML, para maquetar el componente: "Description List", 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>.

<!-- description-list -->
<dl class="flex w-full">
  <div class="flex-1 pr-base">
    <dt class="text-sm text-neutral-dark">
      término
    </dt>
    <dd class="text-base text-black">
      definición
    </dd>
  </div>
  <div class="flex-1 pr-base">
    <dt class="text-sm text-neutral-dark">
      término
    </dt>
    <dd class="text-base text-black">
      definición
    </dd>
  </div>
  <div class="flex-1 pr-base">
    <dt class="text-sm text-neutral-dark">
      término
    </dt>
    <dd class="text-base text-black">
      definición
    </dd>
  </div>
</dl>
<!-- /description-list -->

Ejemplo: "Horizontal", de código Nunjucks, para maquetar el componente: "Description List", 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/description-list/_macro.description-list.njk" import componentDescriptionList %}

{{ componentDescriptionList({
  "classes": "flex w-full",
  "items": [
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "flex-1 pr-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "flex-1 pr-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "flex-1 pr-base"
    }
  ]
}) }}
término
definición
término
definición
término
definición
Mostrar códigodel ejemplo: Horizontal

Contenido

Nunjucks macro
{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}

{{ componentDescriptionList({
  "classes": "flex w-full",
  "items": [
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "flex-1 pr-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "flex-1 pr-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "flex-1 pr-base"
    }
  ]
}) }}

Horizontal con 2 filas

Ejemplo: "Horizontal con 2 filas", de código HTML, para maquetar el componente: "Description List", 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>.

<!-- description-list -->
<dl class="flex flex-wrap w-full">
  <div class="w-1/3 mb-base pr-base">
    <dt class="text-sm text-neutral-dark">
      término
    </dt>
    <dd class="text-base text-black">
      definición
    </dd>
  </div>
  <div class="w-1/3 mb-base pr-base">
    <dt class="text-sm text-neutral-dark">
      término
    </dt>
    <dd class="text-base text-black">
      definición
    </dd>
  </div>
  <div class="w-1/3 mb-base pr-base">
    <dt class="text-sm text-neutral-dark">
      término
    </dt>
    <dd class="text-base text-black">
      definición
    </dd>
  </div>
  <div class="w-1/3 mb-base pr-base">
    <dt class="text-sm text-neutral-dark">
      término
    </dt>
    <dd class="text-base text-black">
      definición
    </dd>
  </div>
  <div class="w-1/3 mb-base pr-base">
    <dt class="text-sm text-neutral-dark">
      término
    </dt>
    <dd class="text-base text-black">
      definición
    </dd>
  </div>
  <div class="w-1/3 mb-base pr-base">
    <dt class="text-sm text-neutral-dark">
      término
    </dt>
    <dd class="text-base text-black">
      definición
    </dd>
  </div>
</dl>
<!-- /description-list -->

Ejemplo: "Horizontal con 2 filas", de código Nunjucks, para maquetar el componente: "Description List", 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/description-list/_macro.description-list.njk" import componentDescriptionList %}

{{ componentDescriptionList({
  "classes": "flex flex-wrap w-full",
  "items": [
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "w-1/3 mb-base pr-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "w-1/3 mb-base pr-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "w-1/3 mb-base pr-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "w-1/3 mb-base pr-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "w-1/3 mb-base pr-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "w-1/3 mb-base pr-base"
    }
  ]
}) }}
término
definición
término
definición
término
definición
término
definición
término
definición
término
definición
Mostrar códigodel ejemplo: Horizontal con 2 filas

Contenido

Nunjucks macro
{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}

{{ componentDescriptionList({
  "classes": "flex flex-wrap w-full",
  "items": [
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "w-1/3 mb-base pr-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "w-1/3 mb-base pr-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "w-1/3 mb-base pr-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "w-1/3 mb-base pr-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "w-1/3 mb-base pr-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "w-1/3 mb-base pr-base"
    }
  ]
}) }}

Agrupado

Ejemplo: "Agrupado", de código HTML, para maquetar el componente: "Description List", 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>.

<!-- description-list -->
<dl class="w-full py-sm border-t border-b border-neutral-base">
  <div class="lg:flex py-sm">
    <dt class="lg:w-1/3">
      Código de procedimiento
    </dt>
    <dd class="lg:flex-1 font-semibold">
      G00345-BX
    </dd>
  </div>
  <div class="lg:flex py-sm">
    <dt class="lg:w-1/3">
      Nombre del procedimiento
    </dt>
    <dd class="lg:flex-1 font-semibold">
      Resolución definitiva
    </dd>
  </div>
  <div class="lg:flex py-sm">
    <dt class="lg:w-1/3">
      CSV
    </dt>
    <dd class="lg:flex-1 font-semibold">
      CSVK45WT8V5T110CPPC
    </dd>
  </div>
  <div class="lg:flex py-sm">
    <dt class="lg:w-1/3">
      Fecha de captura
    </dt>
    <dd class="lg:flex-1 font-semibold">
      13 de Diciembre de 2021. A las 11:48:08
    </dd>
  </div>
  <div class="lg:flex py-sm">
    <dt class="lg:w-1/3">
      Categoría
    </dt>
    <dd class="lg:flex-1 font-semibold">
      Documento simple
    </dd>
  </div>
</dl>
<!-- /description-list -->

Ejemplo: "Agrupado", de código Nunjucks, para maquetar el componente: "Description List", 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/description-list/_macro.description-list.njk" import componentDescriptionList %}

{{ componentDescriptionList({
  "classes": "w-full py-sm border-t border-b border-neutral-base",
  "items": [
    {
      "term": {
        "text": "Código de procedimiento",
        "classes": "lg:w-1/3"
      },
      "definition": {
        "text": "G00345-BX",
        "classes": "lg:flex-1 font-semibold"
      },
      "classes": "lg:flex py-sm"
    },
    {
      "term": {
        "text": "Nombre del procedimiento",
        "classes": "lg:w-1/3"
      },
      "definition": {
        "text": "Resolución definitiva",
        "classes": "lg:flex-1 font-semibold"
      },
      "classes": "lg:flex py-sm"
    },
    {
      "term": {
        "text": "CSV",
        "classes": "lg:w-1/3"
      },
      "definition": {
        "text": "CSVK45WT8V5T110CPPC",
        "classes": "lg:flex-1 font-semibold"
      },
      "classes": "lg:flex py-sm"
    },
    {
      "term": {
        "text": "Fecha de captura",
        "classes": "lg:w-1/3"
      },
      "definition": {
        "text": "13 de Diciembre de 2021. A las 11:48:08",
        "classes": "lg:flex-1 font-semibold"
      },
      "classes": "lg:flex py-sm"
    },
    {
      "term": {
        "text": "Categoría",
        "classes": "lg:w-1/3"
      },
      "definition": {
        "text": "Documento simple",
        "classes": "lg:flex-1 font-semibold"
      },
      "classes": "lg:flex py-sm"
    }
  ]
}) }}
Código de procedimiento
G00345-BX
Nombre del procedimiento
Resolución definitiva
CSV
CSVK45WT8V5T110CPPC
Fecha de captura
13 de Diciembre de 2021. A las 11:48:08
Categoría
Documento simple
Mostrar códigodel ejemplo: Agrupado

Contenido

Nunjucks macro
{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}

{{ componentDescriptionList({
  "classes": "w-full py-sm border-t border-b border-neutral-base",
  "items": [
    {
      "term": {
        "text": "Código de procedimiento",
        "classes": "lg:w-1/3"
      },
      "definition": {
        "text": "G00345-BX",
        "classes": "lg:flex-1 font-semibold"
      },
      "classes": "lg:flex py-sm"
    },
    {
      "term": {
        "text": "Nombre del procedimiento",
        "classes": "lg:w-1/3"
      },
      "definition": {
        "text": "Resolución definitiva",
        "classes": "lg:flex-1 font-semibold"
      },
      "classes": "lg:flex py-sm"
    },
    {
      "term": {
        "text": "CSV",
        "classes": "lg:w-1/3"
      },
      "definition": {
        "text": "CSVK45WT8V5T110CPPC",
        "classes": "lg:flex-1 font-semibold"
      },
      "classes": "lg:flex py-sm"
    },
    {
      "term": {
        "text": "Fecha de captura",
        "classes": "lg:w-1/3"
      },
      "definition": {
        "text": "13 de Diciembre de 2021. A las 11:48:08",
        "classes": "lg:flex-1 font-semibold"
      },
      "classes": "lg:flex py-sm"
    },
    {
      "term": {
        "text": "Categoría",
        "classes": "lg:w-1/3"
      },
      "definition": {
        "text": "Documento simple",
        "classes": "lg:flex-1 font-semibold"
      },
      "classes": "lg:flex py-sm"
    }
  ]
}) }}

Con apariencia de tabla

Ejemplo: "Con apariencia de tabla", de código HTML, para maquetar el componente: "Description List", 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>.

<!-- description-list -->
<dl class="w-full">
  <div class="lg:flex -mb-px border-t border-b border-neutral-base">
    <dt class="lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark">
      Nombre y apellidos
    </dt>
    <dd class="lg:w-2/3 px-base py-sm">
      Ana Pérez Escribano
    </dd>
  </div>
  <div class="lg:flex -mb-px border-t border-b border-neutral-base">
    <dt class="lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark">
      Nº identificación
    </dt>
    <dd class="lg:w-2/3 px-base py-sm">
      NIF: 00000000T
    </dd>
  </div>
  <div class="lg:flex -mb-px border-t border-b border-neutral-base">
    <dt class="lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark">
      Importe
    </dt>
    <dd class="lg:w-2/3 px-base py-sm">
      <strong>45,5€</strong>
    </dd>
  </div>
  <div class="lg:flex -mb-px border-t border-b border-neutral-base">
    <dt class="lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark">
      Impuesto
    </dt>
    <dd class="lg:w-2/3 px-base py-sm">
      Impuesto sobre Sucesiones y donaciones
    </dd>
  </div>
  <div class="lg:flex -mb-px border-t border-b border-neutral-base">
    <dt class="lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark">
      Concepto
    </dt>
    <dd class="lg:w-2/3 px-base py-sm">
      Modelo 606 - Liquidaciones Transmisiones Patrimoniales Onerosas.
    </dd>
  </div>
  <div class="lg:flex -mb-px border-t border-b border-neutral-base">
    <dt class="lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark">
      Número de justificante
    </dt>
    <dd class="lg:w-2/3 px-base py-sm">
      6064589854125
    </dd>
  </div>
</dl>
<!-- /description-list -->

Ejemplo: "Con apariencia de tabla", de código Nunjucks, para maquetar el componente: "Description List", 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/description-list/_macro.description-list.njk" import componentDescriptionList %}

{{ componentDescriptionList({
  "classes": "w-full",
  "items": [
    {
      "term": {
        "text": "Nombre y apellidos",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "Ana Pérez Escribano",
        "classes": "lg:w-2/3 px-base py-sm"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Nº identificación",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "NIF: 00000000T",
        "classes": "lg:w-2/3 px-base py-sm"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Importe",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "html": "<strong>45,5€</strong>",
        "classes": "lg:w-2/3 px-base py-sm"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Impuesto",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "Impuesto sobre Sucesiones y donaciones",
        "classes": "lg:w-2/3 px-base py-sm"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Concepto",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "Modelo 606 - Liquidaciones Transmisiones Patrimoniales Onerosas.",
        "classes": "lg:w-2/3 px-base py-sm"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Número de justificante",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "6064589854125",
        "classes": "lg:w-2/3 px-base py-sm"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    }
  ]
}) }}
Nombre y apellidos
Ana Pérez Escribano
Nº identificación
NIF: 00000000T
Importe
45,5€
Impuesto
Impuesto sobre Sucesiones y donaciones
Concepto
Modelo 606 - Liquidaciones Transmisiones Patrimoniales Onerosas.
Número de justificante
6064589854125
Mostrar códigodel ejemplo: Con apariencia de tabla

Contenido

Nunjucks macro
{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}

{{ componentDescriptionList({
  "classes": "w-full",
  "items": [
    {
      "term": {
        "text": "Nombre y apellidos",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "Ana Pérez Escribano",
        "classes": "lg:w-2/3 px-base py-sm"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Nº identificación",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "NIF: 00000000T",
        "classes": "lg:w-2/3 px-base py-sm"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Importe",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "html": "<strong>45,5€</strong>",
        "classes": "lg:w-2/3 px-base py-sm"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Impuesto",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "Impuesto sobre Sucesiones y donaciones",
        "classes": "lg:w-2/3 px-base py-sm"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Concepto",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "Modelo 606 - Liquidaciones Transmisiones Patrimoniales Onerosas.",
        "classes": "lg:w-2/3 px-base py-sm"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Número de justificante",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "6064589854125",
        "classes": "lg:w-2/3 px-base py-sm"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    }
  ]
}) }}

Con apariencia de tabla y números

Ejemplo: "Con apariencia de tabla y números", de código HTML, para maquetar el componente: "Description List", 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>.

<!-- description-list -->
<dl class="w-full">
  <div class="lg:flex -mb-px border-t border-b border-neutral-base">
    <dt class="lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark">
      Activo no corriente
    </dt>
    <dd class="lg:w-2/3 px-base py-sm lg:text-right">
      3045,45€
    </dd>
  </div>
  <div class="lg:flex -mb-px border-t border-b border-neutral-base">
    <dt class="lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark">
      Activo corriente
    </dt>
    <dd class="lg:w-2/3 px-base py-sm lg:text-right">
      14,32€
    </dd>
  </div>
  <div class="lg:flex -mb-px border-t border-b border-neutral-base">
    <dt class="lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark">
      Total activo
    </dt>
    <dd class="lg:w-2/3 px-base py-sm lg:text-right">
      279,67€
    </dd>
  </div>
  <div class="lg:flex -mb-px border-t border-b border-neutral-base">
    <dt class="lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark">
      Capital
    </dt>
    <dd class="lg:w-2/3 px-base py-sm lg:text-right">
      100.704,23€
    </dd>
  </div>
  <div class="lg:flex -mb-px border-t border-b border-neutral-base">
    <dt class="lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark">
      Patrimonio neto
    </dt>
    <dd class="lg:w-2/3 px-base py-sm lg:text-right">
      2.345,74€
    </dd>
  </div>
  <div class="lg:flex -mb-px border-t border-b border-neutral-base">
    <dt class="lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark">
      Consolidación de cuentas
    </dt>
    <dd class="lg:w-2/3 px-base py-sm lg:text-right">
      <strong>Si</strong>
    </dd>
  </div>
</dl>
<!-- /description-list -->

Ejemplo: "Con apariencia de tabla y números", de código Nunjucks, para maquetar el componente: "Description List", 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/description-list/_macro.description-list.njk" import componentDescriptionList %}

{{ componentDescriptionList({
  "classes": "w-full",
  "items": [
    {
      "term": {
        "text": "Activo no corriente",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "3045,45€",
        "classes": "lg:w-2/3 px-base py-sm lg:text-right"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Activo corriente",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "14,32€",
        "classes": "lg:w-2/3 px-base py-sm lg:text-right"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Total activo",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "279,67€",
        "classes": "lg:w-2/3 px-base py-sm lg:text-right"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Capital",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "100.704,23€",
        "classes": "lg:w-2/3 px-base py-sm lg:text-right"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Patrimonio neto",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "2.345,74€",
        "classes": "lg:w-2/3 px-base py-sm lg:text-right"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Consolidación de cuentas",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "html": "<strong>Si</strong>",
        "classes": "lg:w-2/3 px-base py-sm lg:text-right"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    }
  ]
}) }}
Activo no corriente
3045,45€
Activo corriente
14,32€
Total activo
279,67€
Capital
100.704,23€
Patrimonio neto
2.345,74€
Consolidación de cuentas
Si
Mostrar códigodel ejemplo: Con apariencia de tabla y números

Contenido

Nunjucks macro
{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}

{{ componentDescriptionList({
  "classes": "w-full",
  "items": [
    {
      "term": {
        "text": "Activo no corriente",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "3045,45€",
        "classes": "lg:w-2/3 px-base py-sm lg:text-right"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Activo corriente",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "14,32€",
        "classes": "lg:w-2/3 px-base py-sm lg:text-right"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Total activo",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "279,67€",
        "classes": "lg:w-2/3 px-base py-sm lg:text-right"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Capital",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "100.704,23€",
        "classes": "lg:w-2/3 px-base py-sm lg:text-right"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Patrimonio neto",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "2.345,74€",
        "classes": "lg:w-2/3 px-base py-sm lg:text-right"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Consolidación de cuentas",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "html": "<strong>Si</strong>",
        "classes": "lg:w-2/3 px-base py-sm lg:text-right"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    }
  ]
}) }}

Con html y clases

Ejemplo: "Con html y clases", de código HTML, para maquetar el componente: "Description List", 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>.

<!-- description-list -->
<dl class="inline-block p-base border border-neutral-base rounded">
  <div>
    <dt class="mb-sm">
      Expedientes abiertos &darr;
    </dt>
    <dd class="text-base text-black">
      <span class="font-bold text-4xl">45</span> <svg class="inline-block align-baseline ml-sm" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1.6rem" height="1.6rem">
        <path d="M140 20a20 20 0 00-20-20H20A20 20 0 000 20v100a20 20 0 0020 20h70a10 10 0 007.07-2.93l40-40A10 10 0 00140 90zM20 22.5a2.5 2.5 0 012.5-2.5h95a2.5 2.5 0 012.5 2.5v55a2.5 2.5 0 01-2.5 2.5H95a15 15 0 00-15 15v22.5a2.5 2.5 0 01-2.5 2.5h-55a2.5 2.5 0 01-2.5-2.5z" />
      </svg><a href="/" class="c-link block mt-sm font-normal text-sm">Ver todos</a>
    </dd>
  </div>
</dl>
<!-- /description-list -->

Ejemplo: "Con html y clases", de código Nunjucks, para maquetar el componente: "Description List", 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/description-list/_macro.description-list.njk" import componentDescriptionList %}

{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "html": "Expedientes abiertos ↓",
        "classes": "mb-sm"
      },
      "definition": {
        "html": "<span class='font-bold text-4xl'>45</span> <svg class='inline-block align-baseline ml-sm' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1.6rem' height='1.6rem'><path d='M140 20a20 20 0 00-20-20H20A20 20 0 000 20v100a20 20 0 0020 20h70a10 10 0 007.07-2.93l40-40A10 10 0 00140 90zM20 22.5a2.5 2.5 0 012.5-2.5h95a2.5 2.5 0 012.5 2.5v55a2.5 2.5 0 01-2.5 2.5H95a15 15 0 00-15 15v22.5a2.5 2.5 0 01-2.5 2.5h-55a2.5 2.5 0 01-2.5-2.5z'/></svg><a href='/' class='c-link block mt-sm font-normal text-sm'>Ver todos</a>"
      }
    }
  ],
  "classes": "inline-block p-base border border-neutral-base rounded"
}) }}
Expedientes abiertos ↓
45 Ver todos
Mostrar códigodel ejemplo: Con html y clases

Contenido

Nunjucks macro
{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}

{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "html": "Expedientes abiertos &darr;",
        "classes": "mb-sm"
      },
      "definition": {
        "html": "<span class='font-bold text-4xl'>45</span> <svg class='inline-block align-baseline ml-sm' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1.6rem' height='1.6rem'><path d='M140 20a20 20 0 00-20-20H20A20 20 0 000 20v100a20 20 0 0020 20h70a10 10 0 007.07-2.93l40-40A10 10 0 00140 90zM20 22.5a2.5 2.5 0 012.5-2.5h95a2.5 2.5 0 012.5 2.5v55a2.5 2.5 0 01-2.5 2.5H95a15 15 0 00-15 15v22.5a2.5 2.5 0 01-2.5 2.5h-55a2.5 2.5 0 01-2.5-2.5z'/></svg><a href='/' class='c-link block mt-sm font-normal text-sm'>Ver todos</a>"
      }
    }
  ],
  "classes": "inline-block p-base border border-neutral-base rounded"
}) }}

Con atributos

Muestra el código para ver cómo se aplican los atributos

Ejemplo: "Con atributos", de código HTML, para maquetar el componente: "Description List", 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>.

<!-- description-list -->
<dl id="description">
  <div id="item">
    <dt class="text-sm text-neutral-dark" id="term">
      término
    </dt>
    <dd class="text-base text-black" id="definition">
      definición
    </dd>
  </div>
</dl>
<!-- /description-list -->

Ejemplo: "Con atributos", de código Nunjucks, para maquetar el componente: "Description List", 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/description-list/_macro.description-list.njk" import componentDescriptionList %}

{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "text": "término",
        "attributes": {
          "id": "term"
        }
      },
      "definition": {
        "text": "definición",
        "attributes": {
          "id": "definition"
        }
      },
      "attributes": {
        "id": "item"
      }
    }
  ],
  "attributes": {
    "id": "description"
  }
}) }}
término
definición
Mostrar códigodel ejemplo: Con atributos

Contenido

Nunjucks macro
{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}

{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "text": "término",
        "attributes": {
          "id": "term"
        }
      },
      "definition": {
        "text": "definición",
        "attributes": {
          "id": "definition"
        }
      },
      "attributes": {
        "id": "item"
      }
    }
  ],
  "attributes": {
    "id": "description"
  }
}) }}