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@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" 
          href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" 
          href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
    <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=
"https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png" 
              class="avatar avatar-sm">
           GeeksforGeeks
        </span>

        <span class="chip">
          <img src=    
"https://media.geeksforgeeks.org/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.geeksforgeeks.org/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:

Reference: https://picturepan2.github.io/spectre/components/chips.html#chips

Explore