<dl>
    <dt>Caffè latte</dt>
    <dd>In Italy, caffè latte is almost always prepared at home, for breakfast only. The coffee is brewed with a stovetop Moka pot and poured into a cup containing heated milk. (Unlike the 'international' latte drink, the milk in the Italian original is generally
        not foamed, and sugar is added by the drinker, if at all.)</dd>

    <dt>Software developer</dt>
    <dt>Coder</dt>
    <dt>Programmer</dt>
    <dt>Codemonkey</dt>
    <dd>Someone who writes software.</dd>

    <dt>SME</dt>
    <dd>Abbreviation for "Small to Medium Enterprise"</dd>
    <dd>Abbreviation for "Subject Matter Expert"</dd>

</dl>
{# Reusable macro for other templates to import: #}
{%- macro definitionList(definitions, classNames) -%}
  <dl
    {%- if classNames %} class="{{ classNames }}"{%- endif -%}
  >
  {% block definitionGroups -%}
    {%- for group in definitions -%}
      {%- block definitionGroup -%}
        {%- for term in group.terms -%}
          <dt
            {%- if term.classNames %} class="{{ term.classNames }}"{%- endif -%}
          >
            {{- term.htmlContent if term.htmlContent else term | safe -}}
          </dt>
        {% endfor -%}
        {%- for description in group.descriptions -%}
          <dd
            {%- if description.classNames %} class="{{ description.classNames }}"{%- endif -%}
          >
            {{- description.htmlContent if description.htmlContent else description | safe -}}
          </dd>
        {% endfor -%}
      {%- endblock %}
    {% endfor -%}
  {%- endblock -%}
  </dl>
{%- endmacro -%}

{# Example rendering: #}
{{ definitionList(definitions, class) | safe }}
{
  "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
  "url": "#",
  "listItems": [
    {
      "htmlContent": "Some list item content"
    },
    {
      "htmlContent": "More list item content"
    },
    {
      "htmlContent": "Even more list item content"
    },
    {
      "htmlContent": "I can't believe there's still more list item content"
    },
    {
      "htmlContent": "Seriously?! That's enough now."
    }
  ],
  "footer": {
    "copy": "&copy; 2019 <strong>Buildit</strong>. All rights reserved.",
    "linksA": [
      {
        "label": "Stories",
        "url": "#"
      },
      {
        "label": "People",
        "url": "#"
      },
      {
        "label": "Jobs",
        "url": "#"
      }
    ],
    "linksB": [
      {
        "label": "Terms",
        "url": "#"
      },
      {
        "label": "Accessibility",
        "url": "#"
      },
      {
        "label": "Privacy & Cookie Policy",
        "url": "https://wiprodigital.com/privacy-policy"
      }
    ]
  },
  "hero": {
    "pullout": "Big, attention-grabbing headline",
    "paragraph": "Witty subtitle",
    "cta": {
      "text": "Clickbaity label",
      "url": "#"
    }
  },
  "img": {
    "random": {
      "src": "/images/img-random-1.png",
      "alt": "A placeholder image with an arbitrary aspect ratio."
    },
    "square": {
      "src": "/images/img-1x1.png",
      "alt": "A placeholder image with a perfect square (1:1) aspect ratio."
    },
    "tv": {
      "src": "/images/img-4x3.png",
      "alt": "A placeholder image with a 4:3 aspect ratio, like an old TV."
    },
    "widescreen": {
      "src": "/images/img-16x9.png",
      "alt": "A placeholder image with a 16:9 aspect ratio, like a widescreen TV."
    },
    "logo": {
      "src": "/images/img-random-2.png",
      "alt": "A test image for a logo with an arbitrary aspect ratio."
    }
  },
  "title": "Page title",
  "header": {
    "url": "./homepage",
    "links": [
      {
        "text": "Jobs",
        "url": "./jobs"
      },
      {
        "text": "Locations",
        "url": "./locations"
      }
    ],
    "externalLinks": [
      {
        "text": "Fancy external website",
        "url": "./error-page"
      }
    ]
  },
  "sections": [
    {
      "title": "Example section",
      "class": "grav-o-full-bleed__content",
      "content": [
        {
          "paragraph": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
        }
      ]
    }
  ],
  "section": {
    "title": "This is the title for a section",
    "class": "grav-o-full-bleed__content",
    "content": [
      {
        "paragraph": "Paragraph lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      },
      {
        "blockquote": "Blockquote lorem ipsum dolor sit amet, consectetur adipisicing elit"
      },
      {
        "twoColumnsList": [
          {
            "htmlContent": "Vestibulum auctor dapibus neque."
          },
          {
            "htmlContent": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
          },
          {
            "htmlContent": "Aliquam tincidunt mauris eu risus."
          },
          {
            "htmlContent": "Labore et dolore magna aliqua."
          },
          {
            "htmlContent": "Phasellus tempus, orci non mattis sagittis."
          }
        ]
      },
      {
        "inlineRow": [
          {
            "text": "First link",
            "url": "#"
          },
          {
            "text": "Second link",
            "url": "#"
          },
          {
            "text": "Third link",
            "url": "#"
          }
        ]
      },
      {
        "imgCards": [
          {
            "title": "Some fascinating, attention-grabbing headling",
            "content": "Ideally, with a click-baity tagline that entices to you to visit!",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Brief description of this fascinating image"
            }
          },
          {
            "title": "Labore et dolore magna aliqua",
            "content": "Vestibulum pharetra arcu enim, nec porttitor quam ullamcorper et. Phasellus tempus, orci non mattis sagittis, lectus erat fringilla odio, nec auctor erat augue quis eros.",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Phasellus tempus, orci non mattis"
            }
          },
          {
            "title": "Nanotechnology immersion along the information highway",
            "content": "Leverage agile frameworks to provide a robust synopsis for high level overviews.",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Bring to the table win-win survival strategies"
            }
          }
        ]
      },
      {
        "imgLinks": [
          {
            "url": "#",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Image linke #1"
            }
          },
          {
            "url": "#",
            "image": {
              "src": "/images/img-random-2.png",
              "alt": "Image linke #2"
            }
          },
          {
            "url": "#",
            "image": {
              "src": "/images/img-random-3.png",
              "alt": "Image linke #3"
            }
          }
        ]
      }
    ]
  },
  "definitions": [
    {
      "terms": [
        "Caffè latte"
      ],
      "descriptions": [
        "In Italy, caffè latte is almost always prepared at home, for breakfast only. The coffee is brewed with a stovetop Moka pot and poured into a cup containing heated milk. (Unlike the 'international' latte drink, the milk in the Italian original is generally not foamed, and sugar is added by the drinker, if at all.)"
      ]
    },
    {
      "terms": [
        "Software developer",
        "Coder",
        "Programmer",
        "Codemonkey"
      ],
      "descriptions": [
        "Someone who writes software."
      ]
    },
    {
      "terms": [
        "SME"
      ],
      "descriptions": [
        "Abbreviation for \"Small to Medium Enterprise\"",
        "Abbreviation for \"Subject Matter Expert\""
      ]
    }
  ]
}
  • Handle: @definition-list
  • Preview:
  • Filesystem Path: src/components/01-atoms/02-lists/02-definition-list/definition-list.njk

Usage

The <dl> element represents an association list consisting of zero or more name-value groups (a description list).

Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data. The values within a group are alternatives; multiple paragraphs forming part of the same value must all be given within the same dd element.

The order of the list of groups, and of the names and values within each group, may be significant.

See also