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.
<!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 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>
Output:
Reference: https://picturepan2.github.io/spectre/components/tiles.html#tiles-compact