Foehn Design System

Check Answers 

<div>
    <h2>Informations personnelles</h2>
    <dl>

        <div class="row mt-2 border-bottom">
            <dt class="col-md-4">Nom</dt>

            <dd class="col-md-6">Clark Kent</dd>
            <dd class="col-md-2 text-md-end"><a href="#">Modifier</a></dd>

        </div>

        <div class="row mt-2 border-bottom">
            <dt class="col-md-4">Surnom</dt>

            <dd class="col-md-6">Superman</dd>
            <dd class="col-md-2 text-md-end"><a href="#">Modifier</a></dd>

        </div>

        <div class="row mt-2 border-bottom">
            <dt class="col-md-4">Adresse</dt>

            <dd class="col-md-6">34 Kriptionitstrasse <br>9999 Metropolis</dd>
            <dd class="col-md-2 text-md-end"><a href="#">Modifier</a></dd>

        </div>

    </dl>
</div>
 
<div{%- if styleModifier %} class="{{ styleModifier }}"{% endif -%}>
  {%- if title.tag -%}
    {%- set tag -%}{{ title.tag }}{%- endset -%}
  {%- else -%}
    {%- set tag = "h2" -%}
  {%- endif -%}
  {%- if title.text -%}
    <{{ tag }}{%- if title.styleModifier %} class="{{ title.styleModifier }}"{% endif -%}>{{ title.text }}</{{ tag }}>
  {%- endif -%}
    <dl>
      {% for item in items %}
        <div class="row mt-2 border-bottom">
          <dt class="col-md-4">{{ item.question }}</dt>
          {% if item.url %}
            <dd class="col-md-6">{{ item.answer | safe }}</dd>
            <dd class="col-md-2 text-md-end"><a href="{{ item.url }}">Modifier</a></dd>
          {% else %}
            <dd class="col-md-8">{{ item.answer | safe }}</dd>
          {% endif %}
        </div>
      {% endfor %}
    </dl>
</div>
 
{
  "title": {
    "text": "Informations personnelles"
  },
  "items": [
    {
      "question": "Nom",
      "answer": "Clark Kent",
      "url": "#"
    },
    {
      "question": "Surnom",
      "answer": "Superman",
      "url": "#"
    },
    {
      "question": "Adresse",
      "answer": "34 Kriptionitstrasse <br>9999 Metropolis",
      "url": "#"
    }
  ]
}

No notes defined.