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
Reference: https://picturepan2.github.io/spectre/components/tiles.html#tiles-compact
Last Updated :
19 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...