<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