Chip Component

<span class="chip">
  <span id="chip-text" class="chip__text"> Football </span>
  <button
    class="chip__button"
    type="button"
    aria-label="Remove value - Football"
    aria-describedby="chip-text"
  >
    <svg class="icon icon--12" width="13" height="12">
      <use href="#icon-close-12" />
    </svg>
  </button>
</span>

For a static, readonly chip, the delete button can simply be omitted.

<span class="chip">
  <span class="chip__text"> Football </span>
</span>

Chip Containers

When chips appear next to each other in a set, spacing and positioning adjustments should be made on the container, and if necessary, margins adjusted as such. Please review design documentation and follow the guidance here for appropriate specifications.

Here is an example of a container constrained to 300px (for vertical spacing demo reasons) that uses flex with wrapping to remove the whitespace and provide a clean set of chips (whitespace-free) within a container using the appropriate spacing conventions.