Front W - Pattern Library

Definition List Group 

<dl class="dl-group ">
    <div class="dl-group__row">
        <dt class="dl-group__term">Description term</dt>
        <dd class="dl-group__value">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
    </div>
    <div class="dl-group__row">
        <dt class="dl-group__term">Description term</dt>
        <dd class="dl-group__value">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
    </div>
</dl>
 
<dl class="dl-group {{ modifier ? 'dl-group--' ~ modifier }}">
  {% for item in list %}
  <div class="dl-group__row">
    <dt class="dl-group__term">{{ item.dt }}</dt>
    <dd class="dl-group__value">{{ item.dd }}</dd>
  </div>
  {% endfor %}
</dl>
 
{
  "list": [
    {
      "dt": "Description term",
      "dd": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    },
    {
      "dt": "Description term",
      "dd": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    }
  ]
}