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.