Tiles - Components - Spectre.css CSS Framework
Author: Yan Zhu
Description: Tiles are repeatable or embeddable information blocks. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.

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

### Tiles#

Tiles are repeatable or embeddable information blocks.

The Avengers

Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

The S.H.I.E.L.D.

The Strategic Homeland Intervention, Enforcement, and Logistics Division...

Add a container with the `tile` class. And add child elements with the `tile-icon`, `tile-content` or/and `tile-action` classes. The `tile-icon` and `tile-action` are optional.

There are `tile-title` and `tile-subtitle` classes for title and subtitle text styles.

    <div class="tile">
      <div class="tile-icon">
        <div class="example-tile-icon">
          <i class="icon icon-file centered"></i>
        </div>
      </div>
      <div class="tile-content">
        <p class="tile-title">The Avengers</p>
        <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
      </div>
      <div class="tile-action">
        <button class="btn btn-primary">Join</button>
      </div>
    </div>

#### Compact tiles#

There is compact version of Tiles component, which is often used as contact and file info blocks.

Add the `tile-centered` class to the container `tile`. The `tile-icon`, `tile-content` and `tile-action` will be vertically centered.

spectre-docs.pdf
14MB · Public · 1 Jan, 2017

    <div class="tile tile-centered">
      <div class="tile-icon">
        <div class="example-tile-icon">
          <i class="icon icon-file centered"></i>
        </div>
      </div>
      <div class="tile-content">
        <div class="tile-title">spectre-docs.pdf</div>
        <small class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</small>
      </div>
      <div class="tile-action">
        <button class="btn btn-link">
          <i class="icon icon-more-vert"></i>
        </button>
      </div>
    </div>

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

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