Spectre Tiles

Spectre Tiles are used to create components that can be used to replace the grid system. Tiles are repeatable or embeddable information 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 classes are optional.

Spectre Tiles:

Spectre Compact tiles: This is used as the contact and file info blocks.

Spectre Tiles Class:

tile: This class is used to create the tile.
tile-title: This class is used to set the title of the tile.
tile-subtitle: This class is used to set the subtitle of the tile.
tile-icon: This class is used to set the icon of the tile.
tile-content: This class is used to define the content of the tile.
tile-action: This class is used to define the action (button) only.

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 Tiles:

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <strong>SPECTRE Tiles Class</strong>
        <br><br>
    </center>
    <div class="tile">
      <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>

Output:

Reference: https://picturepan2.github.io/spectre/components/tiles.html#tiles-compact

Explore