Tags

A tag with no added interactions or functionality.

BuzzFeed Blue
BuzzFeed Red
BuzzFeed Yellow
BuzzFeed Violet
<div class="tag">
  <span class="tag__text">BuzzFeed Blue</span>
</div>

A tag you can click on.

<div class="tag">
  <a href="#" class="tag__link">BuzzFeed Red</a>
</div>
  

A tag you can delete.

BuzzFeed Red
BuzzFeed Red
<div class="tag">
  <span class="tag__delete">
    <svg viewBox="0 0 512 512" class="tag__delete-icon" xmlns="http://www.w3.org/2000/svg">
      <path d="M133.874 227.048L19.198 108.276C-6.4 82.68-6.4 44.796 19.198 19.198c25.597-25.597 63.48-25.597 89.078 0l114.676 114.676L337.628 19.198c25.597-25.597 68.09-25.597 93.174 0 25.597 25.597 25.597 68.09 0 93.174L316.126 227.048l114.676 114.676c25.597 25.597 25.597 63.48 0 89.078-25.597 25.597-63.48 25.597-89.078 0L227.048 316.126 112.372 430.802c-25.597 25.597-68.09 25.597-93.174 0-25.597-25.597-25.597-68.09 0-93.174l114.676-110.58z"/>
    </svg>
  </span>
  <span class="tag__text">BuzzFeed Red</span>
</div>
  

A tag you can either click on or delete.

<div class="tag">
  <span class="tag__delete">
    <svg viewBox="0 0 512 512" class="tag__delete-icon" xmlns="http://www.w3.org/2000/svg">
      <path d="M133.874 227.048L19.198 108.276C-6.4 82.68-6.4 44.796 19.198 19.198c25.597-25.597 63.48-25.597 89.078 0l114.676 114.676L337.628 19.198c25.597-25.597 68.09-25.597 93.174 0 25.597 25.597 25.597 68.09 0 93.174L316.126 227.048l114.676 114.676c25.597 25.597 25.597 63.48 0 89.078-25.597 25.597-63.48 25.597-89.078 0L227.048 316.126 112.372 430.802c-25.597 25.597-68.09 25.597-93.174 0-25.597-25.597-25.597-68.09 0-93.174l114.676-110.58z"/>
    </svg>
  </span>
  <a href="#" class="tag__link">BuzzFeed Red</a>
</div>