<section class="timeline">
  <ul class="timeline__items">
    <li class="timeline__item timeline__item--complete">
      <p class="timeline__item__description">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas blanditiis veniam eius quibusdam reprehenderit tenetur sit eveniet neque atque esse! Ad excepturi, ut ea voluptatum eaque placeat ratione ipsa beatae!
      </p>
      <dl class="timeline__item__details">
        <dt>Status:</dt>
        <dd class="timeline__item__details__status-label">Ferdig</dd>
        <dt>Start:</dt>
        <dd>4. kvartal 2019</dd>
        <dt>Slutt:</dt>
        <dd>2. kvartal 2020</dd>
      </dl>
    </li>

    <li class="timeline__item timeline__item--complete">
      <p class="timeline__item__description">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas blanditiis veniam eius quibusdam reprehenderit tenetur sit eveniet neque atque esse! Ad excepturi, ut ea voluptatum eaque placeat ratione ipsa beatae!
      </p>
      <dl class="timeline__item__details">
        <dt>Status:</dt>
        <dd class="timeline__item__details__status-label">Ferdig</dd>
        <dt>Start:</dt>
        <dd>4. kvartal 2019</dd>
        <dt>Slutt:</dt>
        <dd>2. kvartal 2020</dd>
      </dl>
    </li>

    <li class="timeline__item timeline__item--complete">
      <p class="timeline__item__description">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas blanditiis veniam eius quibusdam reprehenderit tenetur sit eveniet neque atque esse! Ad excepturi, ut ea voluptatum eaque placeat ratione ipsa beatae!
      </p>
      <dl class="timeline__item__details">
        <dt>Status:</dt>
        <dd class="timeline__item__details__status-label">Ferdig</dd>
        <dt>Start:</dt>
        <dd>4. kvartal 2019</dd>
        <dt>Slutt:</dt>
        <dd>2. kvartal 2020</dd>
      </dl>
    </li>

    <li class="timeline__item timeline__item--complete">
      <p class="timeline__item__description">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas blanditiis veniam eius quibusdam reprehenderit tenetur sit eveniet neque atque esse! Ad excepturi, ut ea voluptatum eaque placeat ratione ipsa beatae!
      </p>
      <dl class="timeline__item__details">
        <dt>Status:</dt>
        <dd class="timeline__item__details__status-label">Ferdig</dd>
        <dt>Start:</dt>
        <dd>4. kvartal 2019</dd>
        <dt>Slutt:</dt>
        <dd>2. kvartal 2020</dd>
      </dl>
    </li>

    <li class="timeline__item timeline__item--underway">
      <p class="timeline__item__description">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas blanditiis veniam eius quibusdam reprehenderit tenetur sit eveniet neque atque esse! Ad excepturi, ut ea voluptatum eaque placeat ratione ipsa beatae!
      </p>
      <dl class="timeline__item__details">
        <dt>Status:</dt>
        <dd class="timeline__item__details__status-label">Underveis</dd>
        <dt>Start:</dt>
        <dd>4. kvartal 2019</dd>
        <dt>Slutt:</dt>
        <dd>2. kvartal 2020</dd>
      </dl>
    </li>

    <li class="timeline__item timeline__item--underway">
      <p class="timeline__item__description">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas blanditiis veniam eius quibusdam reprehenderit tenetur sit eveniet neque atque esse! Ad excepturi, ut ea voluptatum eaque placeat ratione ipsa beatae!
      </p>
      <dl class="timeline__item__details">
        <dt>Status:</dt>
        <dd class="timeline__item__details__status-label">Underveis</dd>
        <dt>Start:</dt>
        <dd>4. kvartal 2019</dd>
        <dt>Slutt:</dt>
        <dd>2. kvartal 2020</dd>
      </dl>
    </li>

    <li class="timeline__item timeline__item--planned">
      <p class="timeline__item__description">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas blanditiis veniam eius quibusdam reprehenderit tenetur sit eveniet neque atque esse! Ad excepturi, ut ea voluptatum eaque placeat ratione ipsa beatae!
      </p>
      <dl class="timeline__item__details">
        <dt>Status:</dt>
        <dd class="timeline__item__details__status-label">Planlagt</dd>
        <dt>Start:</dt>
        <dd>4. kvartal 2019</dd>
        <dt>Slutt:</dt>
        <dd>2. kvartal 2020</dd>
      </dl>
    </li>

    <li class="timeline__item timeline__item--planned">
      <p class="timeline__item__description">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas blanditiis veniam eius quibusdam reprehenderit tenetur sit eveniet neque atque esse! Ad excepturi, ut ea voluptatum eaque placeat ratione ipsa beatae!
      </p>
      <dl class="timeline__item__details">
        <dt>Status:</dt>
        <dd class="timeline__item__details__status-label">Planlagt</dd>
        <dt>Start:</dt>
        <dd>4. kvartal 2019</dd>
        <dt>Slutt:</dt>
        <dd>2. kvartal 2020</dd>
      </dl>
    </li>

    <li class="timeline__item timeline__item--planned">
      <p class="timeline__item__description">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas blanditiis veniam eius quibusdam reprehenderit tenetur sit eveniet neque atque esse! Ad excepturi, ut ea voluptatum eaque placeat ratione ipsa beatae!
      </p>
      <dl class="timeline__item__details">
        <dt>Status:</dt>
        <dd class="timeline__item__details__status-label">Planlagt</dd>
        <dt>Start:</dt>
        <dd>4. kvartal 2019</dd>
        <dt>Slutt:</dt>
        <dd>2. kvartal 2020</dd>
      </dl>
    </li>
  </ul>
</section>