Example
Markup
<div class="filter-sidebar">
<div class="filter-sidebar__block">
<div class="bar">
<div class="bar__title card-title card-title--large card-title--left-zero">
<h4 class="card-title__title">Kategorien</h4>
</div>
</div>
<a href="javascript://" class="post-card">
<div class="post-card__title card-title card-title--left-zero">
<span class="card-title__title">Country & Folk</span>
</div>
<span class="post-card__description post-card__description--discreet">3</span>
</a>
<a href="javascript://" class="post-card">
<div class="post-card__title card-title card-title--left-zero">
<span class="card-title__title">Klassische Musik</span>
</div>
<span class="post-card__description post-card__description--discreet">25</span>
</a>
</div>
<div class="filter-sidebar__block">
<input type="checkbox" id="brands" class="filter-sidebar__toggle" checked="checked">
<label class="filter-sidebar__trigger bar" for="brands">
<div class="bar__title card-title card-title--large card-title--left-zero">
<h4 class="card-title__title">Marken</h4>
</div>
<div class="bar__secondary bar-actions">
<ul class="bar-actions__actions">
<li>
<span class="btn btn--plain btn--icon icon icon-chevron-down"></span>
</li>
</ul>
</div>
</label>
<div class="filter-sidebar__filters">
<div class="input">
<label class="checkbox-radio">
<input class="checkbox-radio__widget" type="checkbox">
<span class="checkbox-radio__label">ABUS</span>
</label>
</div>
<div class="input">
<label class="checkbox-radio">
<input class="checkbox-radio__widget" type="checkbox">
<span class="checkbox-radio__label">Swisscom</span>
</label>
</div>
<div class="input">
<label class="checkbox-radio">
<input class="checkbox-radio__widget" type="checkbox">
<span class="checkbox-radio__label">BMW</span>
</label>
</div>
</div>
</div>
<div class="filter-sidebar__block">
<input type="checkbox" id="filter-2" class="filter-sidebar__toggle" checked="checked">
<label class="filter-sidebar__trigger bar" for="filter-2">
<div class="bar__title card-title card-title--large card-title--left-zero">
<h4 class="card-title__title">Filter 2</h4>
</div>
<div class="bar__secondary bar-actions">
<ul class="bar-actions__actions">
<li>
<span class="btn btn--plain btn--icon icon icon-chevron-down"></span>
</li>
</ul>
</div>
</label>
<div class="filter-sidebar__filters">
<div class="input">
<label class="checkbox-radio">
<input class="checkbox-radio__widget" type="checkbox">
<span class="checkbox-radio__label">Eintrag 1</span>
</label>
</div>
<div class="input">
<label class="checkbox-radio">
<input class="checkbox-radio__widget" type="checkbox">
<span class="checkbox-radio__label">Eintrag 2</span>
</label>
</div>
<div class="input">
<label class="checkbox-radio">
<input class="checkbox-radio__widget" type="checkbox">
<span class="checkbox-radio__label">Eintrag 3</span>
</label>
</div>
</div>
</div>
</div>
Source:
assets/styles/04-organisms/01-base/_filter-sidebar.scss, line 1