PS overview list

<ul class="list list--bordered">
  <li class="list__item list__item--clickable" tabindex="0">
    <div class="bar mb-none">
      <div class="bar__item align-self-top show-expanded">
        // checkbox
      </div>
      <div class="bar__item bar__item--fill show-expanded">
        <div class="bar bar--small mb-small">
          <div class="bar__item">
            <h4 class="text-regular">
              // icon
              Volksbanken Osterreich
            </h4>
          </div>
          <div class="bar__item"><span class="text-color-grey">16. 10. 2017 - 03:43</span></div>
        </div>
        <p class="text-color-grey">Osterreichische Volksbanken-AG</p>
      </div>
      <div class="bar__item show-collapsed">
        <h4 class="text-regular">Volksbanken Osterreich</h4>
        <p class="text-color-grey">16. 10. 2017 - 03:43</p>
        <p class="text-color-grey">Osterreichische Volksbanken-AG</p>
      </div>
      <div class="bar__item show-expanded"><strong>Offen</strong>
      </div>
      <div class="bar__item show-expanded">
        <div class="bar bar--small mb-none">
          <div class="bar__item">
            <button class="btn btn--equal btn--hollow-grey" type="button" data-toggle="self" data-toggle-icon="#icon-pinon" data-toggle-class="is-active">
              // icon
            </button>
          </div>
          <div class="bar__item">
            <div class="btn-dropdown">
              <button class="btn btn--equal btn--hollow-grey" type="button" data-toggle="self, next" aria-haspopup="true">
                // icon
              </button>
              <div class="dropdown dropdown--center text-nowrap" data-dropdown="" aria-expanded="false">
                ...  
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
  ...

</ul>