Spectre Chips

Last Updated : 28 Jan, 2022

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">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>