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