Foehn Design System

Task List 

<ol class="list-unstyled">

    <li>

        <h2>A vérifier avant de commencer</h2>
        <ul class="list-unstyled">

            <li class="d-flex flex-column flex-md-row justify-content-between
                     border-bottom pb-3">
                <a href="#" class="align-self-baseline mt-2">Vérifier votre éligibilité</a>

                <strong class="align-self-baseline
                             badge text-bg-success
                             mt-2
                             ">Terminé</strong>

            </li>

            <li class="d-flex flex-column flex-md-row justify-content-between
                     border-bottom pb-3">
                <a href="#" class="align-self-baseline mt-2">Lire les documents relatifs</a>

                <strong class="align-self-baseline
                             badge text-bg-success
                             mt-2
                             ">Terminé</strong>

            </li>

        </ul>
    </li>

    <li>

        <h2>A préparer pour la demande</h2>
        <ul class="list-unstyled">

            <li class="d-flex flex-column flex-md-row justify-content-between
                     border-bottom pb-3">
                <a href="#" class="align-self-baseline mt-2">Information sur la société</a>

                <strong class="align-self-baseline
                             badge text-bg-success
                             mt-2
                             ">Terminé</strong>

            </li>

            <li class="d-flex flex-column flex-md-row justify-content-between
                     border-bottom pb-3">
                <a href="#" class="align-self-baseline mt-2">Vos coordonnées</a>

                <strong class="align-self-baseline
                             badge text-bg-success
                             mt-2
                             ">Terminé</strong>

            </li>

            <li class="d-flex flex-column flex-md-row justify-content-between
                     border-bottom pb-3">
                <a href="#" class="align-self-baseline mt-2">Lister les contextes de la demande</a>

            </li>

            <li class="d-flex flex-column flex-md-row justify-content-between
                     border-bottom pb-3">
                <a href="#" class="align-self-baseline mt-2">Preuve de solvabilité</a>

            </li>

            <li class="d-flex flex-column flex-md-row justify-content-between
                     border-bottom pb-3">
                <a href="#" class="align-self-baseline mt-2">Donner des preuves médicales</a>

                <strong class="align-self-baseline
                             badge text-bg-success
                             mt-2
                             ">Terminé</strong>

            </li>

        </ul>
    </li>

    <li>

        <h2>Faire la demande</h2>
        <ul class="list-unstyled">

            <li class="d-flex flex-column flex-md-row justify-content-between
                     border-bottom pb-3">
                <a href="#" class="align-self-baseline mt-2">Soumettre la demande et payer</a>

            </li>

        </ul>
    </li>

</ol>
 
<ol class="list-unstyled">
  {% for section in sections %}
    <li>
      {% if section.title %}
        <h2>{{ section.title.text }}</h2> <ul class="list-unstyled">
        {% endif %}
        {% for item in section.items %}
          <li class="d-flex flex-column flex-md-row justify-content-between
                     border-bottom pb-3">
            <a href="#" class="align-self-baseline mt-2">{{ item.text }}</a>
            {% if item.status %}
              <strong class="align-self-baseline
                             badge text-bg-{{ item.status.badge }}
                             mt-2
                             {%- if item.status.styleModifier %} {{ item.status.stylemodifier }}{% endif %}
                             ">{{ item.status.text }}</strong>
            {% endif %}
          </li>
        {% endfor %}
        </ul>
    </li>
  {% endfor %}
</ol>
 
{
  "sections": [
    {
      "title": {
        "text": "A vérifier avant de commencer"
      },
      "items": [
        {
          "text": "Vérifier votre éligibilité",
          "url": "#",
          "status": {
            "text": "Terminé",
            "badge": "success"
          }
        },
        {
          "text": "Lire les documents relatifs",
          "url": "#",
          "status": {
            "text": "Terminé",
            "badge": "success"
          }
        }
      ]
    },
    {
      "title": {
        "text": "A préparer pour la demande"
      },
      "items": [
        {
          "text": "Information sur la société",
          "url": "#",
          "status": {
            "text": "Terminé",
            "badge": "success"
          }
        },
        {
          "text": "Vos coordonnées",
          "url": "#",
          "status": {
            "text": "Terminé",
            "badge": "success"
          }
        },
        {
          "text": "Lister les contextes de la demande",
          "url": "#"
        },
        {
          "text": "Preuve de solvabilité",
          "url": "#"
        },
        {
          "text": "Donner des preuves médicales",
          "url": "#",
          "status": {
            "text": "Terminé",
            "badge": "success"
          }
        }
      ]
    },
    {
      "title": {
        "text": "Faire la demande"
      },
      "items": [
        {
          "text": "Soumettre la demande et payer",
          "url": "#"
        }
      ]
    }
  ]
}

No notes defined.