Open In App

Spectre Chips

Improve
Improve
Like Article
Like
Save
Share
Report

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

Spectre Chips

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



Last Updated : 28 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads