Filters#

CSS ONLY

Filters are CSS only content filters.

Filters use tag-1 to tag-8 to flag different tags. tag-0 is reserved for clearing filter (or showing all). You can overwrite $filter-number in _filters.scss to have more filters.

<div class="filter">
  <input type="radio" id="tag-0" class="filter-tag" name="filter-radio" hidden checked>
  <input type="radio" id="tag-1" class="filter-tag" name="filter-radio" hidden>
  <input type="radio" id="tag-2" class="filter-tag" name="filter-radio" hidden>

  <div class="filter-nav">
    <label class="chip" for="tag-0">All</label>
    <label class="chip" for="tag-1">Action</label>
    <label class="chip" for="tag-2">Roleplaying</label>
  </div>

  <div class="filter-body">
    <div class="filter-item card" data-tag="tag-1">
      <!-- Filter item content -->
    </div>
    <div class="filter-item card" data-tag="tag-2">
      <!-- Filter item content -->
    </div>
    <!-- Filter items -->
  </div>
</div>