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