Spectre Labels
Spectre Labels are formatted text tags for highlighting informative text. These labels are normally rectangle-shaped. However, we can change the shape of the labels to rounded ones with the help of Spectre Labels Rounded labels.
Spectre Labels Type:
- Spectre Labels Rounded: This is rounded labels, it has been used to create pill/rounded shaped pills.
Spectre Labels Classes:
- label: This class is used to create the default rectangle-shaped labels.
- label-rounded: This class is used to shape the labels into a pill-shaped label.
Syntax:
<span class="label ...></span>
The below example illustrates the Spectre Labels:
Example 1: In this example, we will create default labels in multiple colors.
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 class = "text-success" >w3wiki</ h1 > < strong >SPECTRE labels</ strong > </ center > < br >< br > < div > < div > < strong >< u >Labels on span Elements:</ u ></ strong > < br > < span class = "label" > Default label </ span > < span class = "label label-primary" > Primary label </ span > < span class = "label label-success" > Success label </ span > < span class = "label label-error" > Error label </ span > < span class = "label label-warning" > Warning label </ span > </ div > < br > < div > < strong >< u >Labels on small Elements:</ u ></ strong > < br > < small class = "label" > Default label </ small > < small class = "label label-primary" > Primary label </ small > < small class = "label label-success" > Success label </ small > < small class = "label label-error" > Error label </ small > < small class = "label label-warning" > Warning label </ small > </ div > </ div > </ body > </ html > |
Output:
Example 2: In this example, we will create rounded labels in multiple colors.
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 class = "text-success" >w3wiki</ h1 > < strong >SPECTRE Labels Rounded labels</ strong > </ center > < br >< br > < div > < div > < strong >< u >Labels on span Elements:</ u ></ strong > < br > < span class = "label label-rounded" > Default label </ span > < span class="label label-rounded label-primary"> Primary label </ span > < span class="label label-rounded label-success"> Success label </ span > < span class="label label-rounded label-error"> Error label </ span > < span class="label label-rounded label-warning"> Warning label </ span > </ div > < br > < div > < strong >< u >Labels on small Elements:</ u ></ strong > < br > < small class = "label label-rounded" > Default label </ small > < small class="label label-rounded label-primary"> Primary label </ small > < small class="label label-rounded label-success"> Success label </ small > < small class="label label-rounded label-error"> Error label </ small > < small class="label label-rounded label-warning"> Warning label </ small > </ div > </ div > </ body > </ html > |
Output:
Reference: https://picturepan2.github.io/spectre/elements/labels.html
Contact Us