Open In App

Spectre Tiles

Improve
Improve
Like Article
Like
Save
Share
Report

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 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=
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
</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:

Spectre Tiles

Spectre Tiles

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



Last Updated : 19 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads