Listado de descripciones

Datos

Componente formado por un término asociado a un valor. Pueden agruparse varios de ellos.

Description-list

Mostrar parámetros

Parámetros Nunjucks del componente: "Description-list"

              params:
- name: items
  type: array
  required: true
  description: Array of term/definition pairs.
  params:
  - name: term
    type: object
    required: true
    description: term in dt.
    - name: text
      type: string
      required: true
      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.
    - name: html
      type: string
      required: true
      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.
    - name: classes
      type: string
      required: false
      description: Classes to add to the dt.
    - name: attributes
      type: object
      required: false
      description: HTML attributes (for example data attributes) to add to the dt.
  - name: definition
    type: object
    required: true
    description: definition in dd.
    - name: text
      type: string
      required: true
      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.
    - name: html
      type: string
      required: true
      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.
    - name: classes
      type: string
      required: false
      description: Classes to add to the dd.
    - name: attributes
      type: object
      required: false
      description: HTML attributes (for example data attributes) to add to the dd.
  - name: classes
    type: string
    required: false
    description: Classes to add to a div container that contain the dt/dd pair.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to a div container that contain the dt/dd pair.
- name: classes
  type: string
  required: false
  description: Classes to add to the checkboxes container.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the nav tag.

Por defecto #

término: definición

Mostrar código

Contenido

Nunjucks macro

{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}
{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      }
    }
  ]
}) }}

HTML

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

Grande #

término: definición

Mostrar código

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

HTML

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

Extra grande #

término: definición

Mostrar código

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

HTML

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

Vertical #

término: definición
término: definición
término: definición

Mostrar código

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

HTML

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

Horizontal #

término: definición
término: definición
término: definición

Mostrar código

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

HTML

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

Horizontal con 2 filas #

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ódigo

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

HTML

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

Agrupado #

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ódigo

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

HTML

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

Con apariencia de tabla #

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ódigo

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

HTML

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

Con apariencia de tabla y números #

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ódigo

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

HTML

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

Con html y clases #

Expedientes abiertos: 45 Ver todos

Mostrar código

Contenido

Nunjucks macro

{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}
{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "html": "Expedientes abiertos <span aria-hidden='true'>&darr;</span>",
        "classes": "mb-sm"
      },
      "definition": {
        "html": "<span class='font-bold text-4xl'>45</span> <svg role='img' aria-label='expedientes'  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-sm"
}) }}

HTML

<!-- description-list -->
<dl class="inline-block p-base border border-neutral-base rounded-sm">
  <div>
    <dt class="mb-sm">
      Expedientes abiertos <span aria-hidden="true">&darr;</span>
    </dt>
    <dd class="text-base text-black">
      <span class="font-bold text-4xl">45</span> <svg role="img" aria-label="expedientes" 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 -->

Con atributos #

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

término: definición

Mostrar código

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

HTML

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

Componentes Índice de páginas

Listado de descripciones

Description-list

Por defecto #

Contenido

Nunjucks macro

HTML

Grande #

Contenido

Nunjucks macro

HTML

Extra grande #

Contenido

Nunjucks macro

HTML

Vertical #

Contenido

Nunjucks macro

HTML

Horizontal #

Contenido

Nunjucks macro

HTML

Horizontal con 2 filas #

Contenido

Nunjucks macro

HTML

Agrupado #

Contenido

Nunjucks macro

HTML

Con apariencia de tabla #

Contenido

Nunjucks macro

HTML

Con apariencia de tabla y números #

Contenido

Nunjucks macro

HTML

Con html y clases #

Contenido

Nunjucks macro

HTML

Con atributos #

Contenido

Nunjucks macro

HTML