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