<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;
      margin-bottom: 0;
    }
    
    .tag-list__item {
      margin: $spacer-xxs;
    }
    
    .tag-list__link {
      @extend %heading-font-bold;
    
      display: inline-block;
      transition: .2s background-color ease-in-out;
      background: $tag-background-color;
      padding: $spacer-xs $spacer-sm;
    
      text-transform: lowercase;
      text-decoration: none;
      line-height: $tag-line-height-small;
      color: $tag-text-color;
      font-size: $tag-font-size-small;
    
      &:hover {
        background-color: $tag-background-color-hover;
        color: $tag-text-color-hover;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .tag-list__item {
        margin: $spacer-xxs;
      }
    
      .tag-list__link {
        line-height: $tag-line-height;
        font-size: $tag-font-size;
      }
    }
    
  • URL: /components/raw/tag-list/_tag-list.scss
  • Filesystem Path: components/01-atoms/text/block/tag-list/_tag-list.scss
  • Size: 817 Bytes

@todo:

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