Spectre Chips
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= "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"> <style> #chip { margin: 15%; } </style> </head> <body> <center> <h1 class="text-success">w3wiki</h1> <strong>SPECTRE chip class</strong> </center> <div id="chip"> <span class="chip"> <img src= "https://media.w3wiki.net/wp-content/uploads/20220123013311/gfg.png" class="avatar avatar-sm"> w3wiki </span> <span class="chip"> <img src= "https://media.w3wiki.net/wp-content/uploads/20220124000939/Screenshot20220124000911-300x238.png" class="avatar avatar-sm"> Web Development <a href="#" class="btn btn-clear" aria-label="Close"></a> </span> <div class="chip"> <img src= "https://media.w3wiki.net/wp-content/uploads/20220124000940/Screenshot20220124000926-300x269.png" 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
Contact Us