Spectre CSS

Tiles ​

Tiles are repeatable or embeddable information blocks.

Full size ​

Avatar

The Avengers

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

Avatar

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.

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

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