TheaterMania Component Library

Tags: Tags Default 

<div class="tags">
    <ul class="tags__list" aria-label="Tags list">
        <li class="tags-list-item">
            <a href="#" class="btn btn--base btn--plain">Lorem Ipsum</a>
        </li>
    </ul>
</div>
 
<div class="tags">
  <ul class="tags__list"{{#if aria-label}} aria-label="{{aria-label}}"{{/if}}{{#if aria-id}} aria-labelledby="{{aria-id}}"{{/if}}>
    {{#each tags}}
      <li class="tags-list-item{{#if text}} tags-list-item--text{{/if}}">
        {{#if button}}
          {{render '@buttons--plain' button-modifiers merge=true}}
        {{/if}}
        {{#if text}}
          {{item}}
        {{/if}}
        {{#if link}}
          <a href="#" class="btn btn--base btn--plain">{{item}}</a>
        {{/if}}
      </li>
    {{/each}}
  </ul>
</div>
 
{
  "aria-label": "Tags list",
  "tags": [
    {
      "link": true,
      "item": "Lorem Ipsum"
    }
  ]
}
  • Content: 
    .tags__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tags-list-item {
  display: flex;
  margin: 0 1rem 1rem 0;
  padding: 0;

  &:last-child {
    margin: 0 0 1rem;
  }
}

.btn--plain {
  .tags-list-item & {
    padding: 0.5rem 1rem;
    font-size: $ms-neg-1;
  }
}

.tags-list-item--text {
  margin-right: 0;
  line-height: 1;
  font-size: $ms-neg-1;

  &::after {
    content: ",";
    margin-right: 3px;
  }

  &:last-child {
    &::after {
      content: "";
    }
  }
}
  • URL: /components/raw/tags/Tags.scss
  • Filesystem Path: src/components/01-Units/Tags/Tags.scss
  • Size: 524 Bytes

There are no notes for this item.