Filters - Experimentals - Spectre.css CSS Framework
Author: Yan Zhu
Description: Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.

PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Filters#

CSS ONLY

Filters are CSS only content filters.

All Action Roleplaying Shooter Sports
Fallout 4
Roleplaying
Halo 5
Shooter
Quantum Break
Action
Forza Horizon 3
Sports
Final Fantasy XV
Roleplaying
NBA 2K17
Sports
Battlefield 1
Shooter
GTA V
Action
FIFA 17
Sports
Overwatch
Shooter
Titanfall 2
Shooter
Gears of Wars 4
Shooter

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>

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.