p Filters are CSS only content filters.

.docs-demo.columns
  .column.col-12
    .filter
      input#tag-0.filter-tag(type="radio" name="filter-radio" hidden="" checked="")
      input#tag-1.filter-tag(type="radio" name="filter-radio" hidden="")
      input#tag-2.filter-tag(type="radio" name="filter-radio" hidden="")
      input#tag-3.filter-tag(type="radio" name="filter-radio" hidden="")
      input#tag-4.filter-tag(type="radio" name="filter-radio" hidden="")
      .filter-nav
        label.chip(for="tag-0") All
        label.chip(for="tag-1") Action
        label.chip(for="tag-2") Roleplaying
        label.chip(for="tag-3") Shooter
        label.chip(for="tag-4") Sports
      .filter-body.columns
        .column.col-4.filter-item(data-tag="tag-2")
          .card
            .card-header
              .card-title Fallout 4
              .card-subtitle Roleplaying
        .column.col-4.filter-item(data-tag="tag-3")
          .card
            .card-header
              .card-title Halo 5
              .card-subtitle Shooter
        .column.col-4.filter-item(data-tag="tag-1")
          .card
            .card-header
              .card-title Quantum Break
              .card-subtitle Action
        .column.col-4.filter-item(data-tag="tag-4")
          .card
            .card-header
              .card-title Forza Horizon 3
              .card-subtitle Sports
        .column.col-4.filter-item(data-tag="tag-2")
          .card
            .card-header
              .card-title Final Fantasy XV
              .card-subtitle Roleplaying
        .column.col-4.filter-item(data-tag="tag-4")
          .card
            .card-header
              .card-title NBA 2K17
              .card-subtitle Sports
        .column.col-4.filter-item(data-tag="tag-3")
          .card
            .card-header
              .card-title Battlefield 1
              .card-subtitle Shooter
        .column.col-4.filter-item(data-tag="tag-1")
          .card
            .card-header
              .card-title GTA V
              .card-subtitle Action
        .column.col-4.filter-item(data-tag="tag-4")
          .card
            .card-header
              .card-title FIFA 17
              .card-subtitle Sports
        .column.col-4.filter-item(data-tag="tag-3")
          .card
            .card-header
              .card-title Overwatch
              .card-subtitle Shooter
        .column.col-4.filter-item(data-tag="tag-3")
          .card
            .card-header
              .card-title Titanfall 2
              .card-subtitle Shooter
        .column.col-4.filter-item(data-tag="tag-3")
          .card
            .card-header
              .card-title Gears of Wars 4
              .card-subtitle Shooter

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

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

        <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>