Spectre Compact Tiles

Last Updated : 21 Feb, 2022

Spectre Tiles are used to create components that can replace the grid system. Tiles are repeatable or embeddable information blocks. There is a compact version of the tiles component, which is often used as contact and file info blocks.

To create tiles you need to 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.

Spectre Compact tiles Class:

tile-centered: This class is used to make the tile-icon, tile-content and tile-action vertically centered.

Syntax:

<div class="tile tile-centered">
  <div class="tile-icon">
    <div class="example-tile-icon">
      ...
    </div>
  </div>
  <div class="tile-content">
    <div class="tile-title">...</div>
    <small class="tile-subtitle">
      ...
    </small>
  </div>
  <div class="tile-action">
    ...
  </div>
</div>

The below example illustrates the Spectre Compact tiles:

Example: In this example, we will create a tile and make the icon, content and action-centered vertically.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <strong>SPECTRE Compact Tiles Class</strong>
        <br><br>
    </center>
    <div class="tile tile-centered">
      <div class="tile-icon">
        <div class="example-tile-icon">
          <i class="icon icon-mail icon-2x"></i>
        </div>
      </div>
      <div class="tile-content">
        <div class="tile-title text-success">
            Geeksforgeeks
        </div>
        <small class="tile-subtitle text-gray">
            A Computer Science Portal for Geeks
        </small>
      </div>
      <div class="tile-action">
        <button class="btn btn-link">
          <i class="icon icon-bookmark"></i>
        </button>
      </div>
    </div>
</body>
 
</html>