Spectre Chips offers tag creation. Chips are complex entities in the tiny blocks, chips can be used to show tags. To create a chip you need to add a container element with the chip class. Add child text elements, buttons or avatars with the avatar class.
Spectre chip class:
- chip: This class is used to create the chips.
Syntax:
<span class="chip">...</span>
Example: Below example illustrate the Spectre Chips.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
href =
< link rel = "stylesheet"
href =
< link rel = "stylesheet"
href =
< style >
#chip {
margin: 15%;
}
</ style >
</ head >
< body >
< center >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< strong >SPECTRE chip class</ strong >
</ center >
< div id = "chip" >
< span class = "chip" >
< img src =
class = "avatar avatar-sm" >
GeeksforGeeks
</ span >
< span class = "chip" >
< img src =
class = "avatar avatar-sm" >
Web Development
< a href = "#" class = "btn btn-clear"
aria-label = "Close" ></ a >
</ span >
< div class = "chip" >
< img src =
class = "avatar avatar-sm" >
CSS-Frameworks
< a href = "#" class = "btn btn-clear"
aria-label = "Close" ></ a >
</ div >
< div class = "chip" >
Spectre
< a href = "#" class = "btn btn-clear"
aria-label = "Close" ></ a >
</ div >
</ div >
</ body >
</ html >
|
Output:
Spectre Chips
Reference: https://picturepan2.github.io/spectre/components/chips.html#chips
Last Updated :
28 Jan, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...