diff options
1 files changed, 128 insertions, 0 deletions
| -rw-r--r-- | docs/experimentals.html | 128 |
diff --git a/docs/experimentals.html b/docs/experimentals.html index 9f850cc..312cbdb 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -60,6 +60,9 @@ <a href="experimentals.html#comparison">Comparison slider</a> </li> <li class="nav-item"> + <a href="experimentals.html#filters">Filters</a> + </li> + <li class="nav-item"> <a href="experimentals.html#meters">Meters</a> </li> <li class="nav-item"> @@ -336,6 +339,131 @@ </section> + <section id="filters" class="container"> + <header class="text-center"><h3>Filters</h3></header> + <section class="notes"> + <p><strong>Filters</strong> are CSS only content filters.</p> + </section> + <div class="columns"> + <div class="column col-12"> + <div class="filter"> + <input type="radio" id="tag-all" class="filter-tag" name="filter-radio" hidden checked /> + <input type="radio" id="tag-action" class="filter-tag" name="filter-radio" hidden /> + <input type="radio" id="tag-roleplaying" class="filter-tag" name="filter-radio" hidden /> + <input type="radio" id="tag-shooter" class="filter-tag" name="filter-radio" hidden /> + <input type="radio" id="tag-sports" class="filter-tag" name="filter-radio" hidden /> + + <div class="filter-nav"> + <label class="chip" for="tag-all">All</label> + <label class="chip" for="tag-action">Action</label> + <label class="chip" for="tag-roleplaying">Roleplaying</label> + <label class="chip" for="tag-shooter">Shooter</label> + <label class="chip" for="tag-sports">Sports</label> + </div> + <div class="filter-body columns"> + <div class="column col-4" data-tag="tag-roleplaying"> + <div class="filter-item card"> + <div class="card-header"> + <div class="card-title">Fallout 4</div> + <div class="card-subtitle">Roleplaying</div> + </div> + </div> + </div> + <div class="column col-4" data-tag="tag-shooter"> + <div class="filter-item card"> + <div class="card-header"> + <div class="card-title">Halo 5</div> + <div class="card-subtitle">Shooter</div> + </div> + </div> + </div> + <div class="column col-4" data-tag="tag-action"> + <div class="filter-item card"> + <div class="card-header"> + <div class="card-title">Quantum Break</div> + <div class="card-subtitle">Action</div> + </div> + </div> + </div> + <div class="column col-4" data-tag="tag-sports"> + <div class="filter-item card"> + <div class="card-header"> + <div class="card-title">Forza Horizon 3</div> + <div class="card-subtitle">Sports</div> + </div> + </div> + </div> + <div class="column col-4" data-tag="tag-roleplaying"> + <div class="filter-item card"> + <div class="card-header"> + <div class="card-title">Final Fantasy XV</div> + <div class="card-subtitle">Roleplaying</div> + </div> + </div> + </div> + <div class="column col-4" data-tag="tag-sports"> + <div class="filter-item card"> + <div class="card-header"> + <div class="card-title">NBA 2K17</div> + <div class="card-subtitle">Sports</div> + </div> + </div> + </div> + <div class="column col-4" data-tag="tag-shooter"> + <div class="filter-item card"> + <div class="card-header"> + <div class="card-title">Battlefield 1</div> + <div class="card-subtitle">Shooter</div> + </div> + </div> + </div> + <div class="column col-4" data-tag="tag-action"> + <div class="filter-item card"> + <div class="card-header"> + <div class="card-title">GTA V</div> + <div class="card-subtitle">Action</div> + </div> + </div> + </div> + <div class="column col-4" data-tag="tag-sports"> + <div class="filter-item card"> + <div class="card-header"> + <div class="card-title">FIFA 17</div> + <div class="card-subtitle">Sports</div> + </div> + </div> + </div> + <div class="column col-4" data-tag="tag-shooter"> + <div class="filter-item card"> + <div class="card-header"> + <div class="card-title">Overwatch</div> + <div class="card-subtitle">Shooter</div> + </div> + </div> + </div> + <div class="column col-4" data-tag="tag-shooter"> + <div class="filter-item card"> + <div class="card-header"> + <div class="card-title">Titanfall 2</div> + <div class="card-subtitle">Shooter</div> + </div> + </div> + </div> + <div class="column col-4" data-tag="tag-shooter"> + <div class="filter-item card"> + <div class="card-header"> + <div class="card-title">Gears of Wars 4</div> + <div class="card-subtitle">Shooter</div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + + </section> + <section id="meters" class="container"> <header class="text-center"><h3>Meters</h3></header> <section class="notes"> |