{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{% import "styleguides/general/molecules/list/list-macros.njk" as list %}

{# ========================================================================= #}
{# :: Settings #}
{# ========================================================================= #}
{% set params = {
  isFullWidth: false,
  styleVendors: [],
  scriptVendors: [],
  scope: "s-list"
} %}

{# ========================================================================= #}
{# :: Info #}
{# ========================================================================= #}
{% set info %}

A definition list consists out of items that are represented by a term and a
data or description of that term. By applying the modifier m-list--definition
the term and description are placed on opposite sides. This can be combined
with other modifiers like m-list--small to makes sure that the list is set in
a smaller font-size.

- m-list--definition
- m-list--small (optional)

{% endset %}

{# ========================================================================= #}
{# :: Preview #}
{# ========================================================================= #}
{% set preview %}

  {{list.definition("m-list--small", [
    {
      term: "term1",
      value: "description1"
    },
    {
      term: "term2",
      value: "description2"
    },
    {
      term: "term3",
      value: "description3"
    }
  ])}}

{% endset %}

{# ========================================================================= #}
{# :: Code #}
{# ========================================================================= #}
{# {% set code %}

{% endset %} #}