Tag

Examples

<span class="tag">
  My awesome custom tag
  <button class="tag__delete">Delete</button>
</span>

    

<span tabindex="1" class="tag">
  <span class="tag__key">Key:</span>
  Value
</span>

<a href=# class="tag">
  <span class="tag__key">Key:</span>
  Value
</a>

<button class="tag">
  <span class="tag__key">Key:</span>
  Value
</button>

    

<a href=# class="tag tag--interactive">Value</a>
<button class="tag tag--interactive">Value</button>

    

Introduction

The Groundhog tag is a visual block representing custom identifications. The tag component can hold text or text-delete-button combination. This text can also represent a key-value-pair. The interactive tag is clickable and can be used as a filter.

Tag versions

The Groundhog tag appears in a two versions:

• Text or text-delete-button tag tag
• Clickable tag tag--interactive

Including a tag

1. To include a Groundhog tag add either an <a> (anchor/link), <span> or an <button> element. Include the necessary text content.

   <a href="#">This is a tag</a>
   

2. Add the necessary Groundhog classes to the elements class attribute.

   <a href="#" class="tag">This is a tag</a>
   

3. The tag is ready to use

Accessibility

When including a tag element with a <span>, make sure that you at least include the tagindex attribute to the element.

Using the delete icon with tags

To use a tag with a delete button, you need to add a button to the tab component. You can find the code to use an button within a tag here.

Available classes for button