Spectre Compact Tiles
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.
HTML
<!DOCTYPE html> < html > < head > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-exp.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-icons.min.css" > </ head > < body > < center > < h1 >w3wiki</ 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" > w3wiki </ div > < small class = "tile-subtitle text-gray" > A Computer Science Portal for Beginner </ 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
Contact Us