Ir a la página de inicio

Description-list examples

Show params

Params

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.

default

term
definition
Show code

Macro

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

Markup

<!-- description-list -->
<dl>
  <div>
    <dt class="text-sm text-neutral-dark">
      term
    </dt>
    <dd class="text-base text-black">
      definition
    </dd>
  </div>
</dl>
<!-- /description-list -->

large

term
definition
Show code

Macro

{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}
{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "text": "term"
      },
      "definition": {
        "text": "definition",
        "classes": "text-lg"
      }
    }
  ]
})  }}

Markup

<!-- description-list -->
<dl>
  <div>
    <dt class="text-sm text-neutral-dark">
      term
    </dt>
    <dd class="text-lg">
      definition
    </dd>
  </div>
</dl>
<!-- /description-list -->

extra large

term
definition
Show code

Macro

{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}
{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "text": "term"
      },
      "definition": {
        "text": "definition",
        "classes": "font-bold text-xl"
      }
    }
  ]
})  }}

Markup

<!-- description-list -->
<dl>
  <div>
    <dt class="text-sm text-neutral-dark">
      term
    </dt>
    <dd class="font-bold text-xl">
      definition
    </dd>
  </div>
</dl>
<!-- /description-list -->

vertical

term
definition
term
definition
term
definition
Show code

Macro

{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}
{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "text": "term"
      },
      "definition": {
        "text": "definition"
      },
      "classes": "mb-base"
    },
    {
      "term": {
        "text": "term"
      },
      "definition": {
        "text": "definition"
      },
      "classes": "mb-base"
    },
    {
      "term": {
        "text": "term"
      },
      "definition": {
        "text": "definition"
      },
      "classes": "mb-base"
    }
  ]
})  }}

Markup

<!-- description-list -->
<dl>
  <div class="mb-base">
    <dt class="text-sm text-neutral-dark">
      term
    </dt>
    <dd class="text-base text-black">
      definition
    </dd>
  </div>
  <div class="mb-base">
    <dt class="text-sm text-neutral-dark">
      term
    </dt>
    <dd class="text-base text-black">
      definition
    </dd>
  </div>
  <div class="mb-base">
    <dt class="text-sm text-neutral-dark">
      term
    </dt>
    <dd class="text-base text-black">
      definition
    </dd>
  </div>
</dl>
<!-- /description-list -->

horizontal

term
definition
term
definition
term
definition
Show code

Macro

{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}
{{ componentDescriptionList({
  "classes": "flex w-full",
  "items": [
    {
      "term": {
        "text": "term"
      },
      "definition": {
        "text": "definition"
      },
      "classes": "flex-1 pr-base"
    },
    {
      "term": {
        "text": "term"
      },
      "definition": {
        "text": "definition"
      },
      "classes": "flex-1 pr-base"
    },
    {
      "term": {
        "text": "term"
      },
      "definition": {
        "text": "definition"
      },
      "classes": "flex-1 pr-base"
    }
  ]
})  }}

Markup

<!-- description-list -->
<dl class="flex w-full">
  <div class="flex-1 pr-base">
    <dt class="text-sm text-neutral-dark">
      term
    </dt>
    <dd class="text-base text-black">
      definition
    </dd>
  </div>
  <div class="flex-1 pr-base">
    <dt class="text-sm text-neutral-dark">
      term
    </dt>
    <dd class="text-base text-black">
      definition
    </dd>
  </div>
  <div class="flex-1 pr-base">
    <dt class="text-sm text-neutral-dark">
      term
    </dt>
    <dd class="text-base text-black">
      definition
    </dd>
  </div>
</dl>
<!-- /description-list -->

horizontal with 2 rows

term
definition
term
definition
term
definition
term
definition
term
definition
term
definition
Show code

Macro

{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}
{{ componentDescriptionList({
  "classes": "flex flex-wrap w-full",
  "items": [
    {
      "term": {
        "text": "term"
      },
      "definition": {
        "text": "definition"
      },
      "classes": "w-1/3 mb-base pr-base"
    },
    {
      "term": {
        "text": "term"
      },
      "definition": {
        "text": "definition"
      },
      "classes": "w-1/3 mb-base pr-base"
    },
    {
      "term": {
        "text": "term"
      },
      "definition": {
        "text": "definition"
      },
      "classes": "w-1/3 mb-base pr-base"
    },
    {
      "term": {
        "text": "term"
      },
      "definition": {
        "text": "definition"
      },
      "classes": "w-1/3 mb-base pr-base"
    },
    {
      "term": {
        "text": "term"
      },
      "definition": {
        "text": "definition"
      },
      "classes": "w-1/3 mb-base pr-base"
    },
    {
      "term": {
        "text": "term"
      },
      "definition": {
        "text": "definition"
      },
      "classes": "w-1/3 mb-base pr-base"
    }
  ]
})  }}

Markup

<!-- 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">
      term
    </dt>
    <dd class="text-base text-black">
      definition
    </dd>
  </div>
  <div class="w-1/3 mb-base pr-base">
    <dt class="text-sm text-neutral-dark">
      term
    </dt>
    <dd class="text-base text-black">
      definition
    </dd>
  </div>
  <div class="w-1/3 mb-base pr-base">
    <dt class="text-sm text-neutral-dark">
      term
    </dt>
    <dd class="text-base text-black">
      definition
    </dd>
  </div>
  <div class="w-1/3 mb-base pr-base">
    <dt class="text-sm text-neutral-dark">
      term
    </dt>
    <dd class="text-base text-black">
      definition
    </dd>
  </div>
  <div class="w-1/3 mb-base pr-base">
    <dt class="text-sm text-neutral-dark">
      term
    </dt>
    <dd class="text-base text-black">
      definition
    </dd>
  </div>
  <div class="w-1/3 mb-base pr-base">
    <dt class="text-sm text-neutral-dark">
      term
    </dt>
    <dd class="text-base text-black">
      definition
    </dd>
  </div>
</dl>
<!-- /description-list -->

with table like appaerance

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
Show code

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

Markup

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

with table like appaerance and numbers

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
Show code

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

Markup

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

with html and classes

Expedientes abiertos ↓
45 Ver todos
Show code

Macro

{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}
{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "html": "Expedientes abiertos &darr;"
      },
      "definition": {
        "html": "<span class=\"font-bold text-4xl\">45</span> <svg class=\"inline-block align-baseline\" 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 font-normal text-sm\">Ver todos</a>"
      }
    }
  ],
  "classes": "inline-block p-base border border-neutral-base rounded"
})  }}

Markup

<!-- description-list -->
<dl class="inline-block p-base border border-neutral-base rounded">
  <div>
    <dt class="text-sm text-neutral-dark">
      Expedientes abiertos &darr;
    </dt>
    <dd class="text-base text-black">
      <span class="font-bold text-4xl">45</span> <svg class="inline-block align-baseline" 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 font-normal text-sm">Ver todos</a>
    </dd>
  </div>
</dl>
<!-- /description-list -->

with attributes

See code to display the attributes applied

term
definition
Show code

Macro

{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}
{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "text": "term",
        "attributes": {
          "id": "term"
        }
      },
      "definition": {
        "text": "definition",
        "attributes": {
          "id": "definition"
        }
      },
      "attributes": {
        "id": "item"
      }
    }
  ],
  "attributes": {
    "id": "description"
  }
})  }}

Markup

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