Front W - Pattern Library

Timelin 

<div class="timeline">
    <div class="timeline__item timeline__item--done">
        <h3 class="h4 mb--xs">
            Formulierung der Ideee
        </h3>
        <p>Oktober 2016</p>
    </div>
    <div class="timeline__item timeline__item--warning">
        <h3 class="h4 mb--xs">
            Formulierung der Ideee
        </h3>
        <p>Oktober 2016</p>
    </div>
    <div class="timeline__item timeline__item--failed">
        <h3 class="h4 mb--xs">
            Dissemination des Konzepts in der Hochschule und sukzessive Weiterentwicklung
        </h3>
        <p>2017 und 2018</p>
    </div>
    <div class="timeline__item timeline__item--progress">
        <h3 class="h4 mb--xs">
            Kick-off und hochschukweites Commitment zur Umsetzung
        </h3>
        <p>Januar 2019</p>
        <div class="mt--md">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
    <div class="timeline__item ">
        <h3 class="h4 mb--xs">
            Finalisierung vorliegender Konzepte für Studiengänge und Professuren
        </h3>
        <p>Oktober 2019</p>
    </div>
</div>
 
<div class="timeline">
  {% for item in items %}
  <div class="timeline__item {{ item.status ? 'timeline__item--' ~ item.status }}">
    <h3 class="h4 mb--xs">
      {{ item.title }}
    </h3>
    {% if item.subtitle %}<p>{{ item.subtitle }}</p>{% endif %}
    {% if item.content %}
    <div class="mt--md">{{ item.content|raw }}</div>
    {% endif %}
  </div>
  {% endfor %}
</div>
 
{
  "items": [
    {
      "title": "Formulierung der Ideee",
      "subtitle": "Oktober 2016",
      "content": "",
      "status": "done"
    },
    {
      "title": "Formulierung der Ideee",
      "subtitle": "Oktober 2016",
      "content": "",
      "status": "warning"
    },
    {
      "title": "Dissemination des Konzepts in der Hochschule und sukzessive Weiterentwicklung",
      "subtitle": "2017 und 2018",
      "content": "",
      "status": "failed"
    },
    {
      "title": "Kick-off und hochschukweites Commitment zur Umsetzung",
      "subtitle": "Januar 2019",
      "content": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>",
      "status": "progress"
    },
    {
      "title": "Finalisierung vorliegender Konzepte für Studiengänge und Professuren",
      "subtitle": "Oktober 2019",
      "content": ""
    }
  ]
}