Tag List 

<ul class="tag-list">
    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 1</a></li>
    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 2</a></li>
    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 3</a></li>
    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 4</a></li>
    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 5</a></li>
    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 6</a></li>
</ul>
 
<ul class="tag-list">
    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 1</a></li>
    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 2</a></li>
    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 3</a></li>
    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 4</a></li>
    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 5</a></li>
    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 6</a></li>
</ul>
 
{
  "text": "Listen"
}
  • Content: 
    .tag-list {
  @extend %list-unstyled;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.tag-list__item {
  margin: $spacer-xxs;
}

.tag-list__link {
  @extend %heading-font-bold;

  display: inline-block;

  padding: $spacer-xs $spacer-sm;

  font-size: $font-size-base;
  color: $tag-text-color;
  text-decoration: none;

  background: $tag-background-color;

  transition: 0.2s background-color ease-in-out;

  &:hover {
    color: $tag-text-color-hover;
    background-color: $tag-background-color-hover;
  }
}
  • URL: /components/raw/tag-list/_tag-list.scss
  • Filesystem Path: components/05-atoms/tag-list/_tag-list.scss
  • Size: 532 Bytes

@todo:

find a solution to make it work without a div wrapper for jsx