Filter Box (Example)

INFO

The Filter Box is used to display previously selected filters in top of e.g. a table. It is used to give users a quick overview of the currently applied filters.

• Used in: "Ausgangsstoffliste signieren"

Ausgewählte Filter

Stoffname:

Vaseline

Gefahrstoffe:

Keine Gefahrstoffe

Lagerartikel:

Alle Artikel

Prüfzeitraum:

30.11.2024 - 01.02.2025

Verfallsdatum bis:

21.02.2025

Show Code

<h2 class="h4 c-headline">
  <i class="far fa-thumbtack m-r-s" aria-hidden="true"></i>
  Ausgewählte Filter
</h2>
<div class="h-flex h-flex-row gap-xs h-wrap">
  <div class="h-border-light-gray h-border-radius-large p-x-s p-y-xs">
    <div class="h-type-extra-small" id="stoffname-label">
      Stoffname:
    </div>
    <div class="h-type-small h-type-bold" aria-labelledby="stoffname-label">
      Vaseline
    </div>
  </div>
  <div class="h-border-light-gray h-border-radius-large p-x-s p-y-xs">
    <div class="h-type-extra-small" id="gefahrstoffe-label">
      Gefahrstoffe:
    </div>
    <div class="h-type-small h-type-bold" aria-labelledby="gefahrstoffe-label">
      Keine Gefahrstoffe
    </div>
  </div>
  <div class="h-border-light-gray h-border-radius-large p-x-s p-y-xs">
    <div class="h-type-extra-small" id="lagerartikel-label">
      Lagerartikel:
    </div>
    <div class="h-type-small h-type-bold" aria-labelledby="lagerartikel-label">
      Alle Artikel
    </div>
  </div>
  <div class="h-border-light-gray h-border-radius-large p-x-s p-y-xs">
    <div class="h-type-extra-small" id="pruefzeitraum-label">
      Prüfzeitraum:
    </div>
    <div class="h-type-small h-type-bold" aria-labelledby="pruefzeitraum-label">
      30.11.2024 - 01.02.2025
    </div>
  </div>
  <div class="h-border-light-gray h-border-radius-large p-x-s p-y-xs">
    <div class="h-type-extra-small" id="verfallsdatum-label">
      Verfallsdatum bis:
    </div>
    <div class="h-type-small h-type-bold" aria-labelledby="verfallsdatum-label">
      21.02.2025
    </div>
  </div>
</div>