# Tag List

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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"
    }

`
File:

- 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

- Handle: @tag-list
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/05-atoms/tag-list/tag-list.html

# @todo:

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