TheaterMania Component Library

Tag Block 

<div class="tag-block">
    <div class="section-title">
        <svg class="icon icon--link">
  <use xlink:href="/assets/icons/sprite-sheet.svg#link"></use>
</svg>
        <h2 id="related_content_tags" class="title-highlight">Discover Tagged Content</h2>
    </div>
    <div class="tags">
        <ul class="tags__list" aria-labelledby="related_content_tags">
            <li class="tags-list-item">
                <a href="#" class="btn btn--base btn--plain">Lorem Ipsum</a>
            </li>
            <li class="tags-list-item">
            </li>
            <li class="tags-list-item">
            </li>
            <li class="tags-list-item">
            </li>
            <li class="tags-list-item">
            </li>
            <li class="tags-list-item">
            </li>
            <li class="tags-list-item">
            </li>
            <li class="tags-list-item">
            </li>
        </ul>
    </div>

</div>
 
<div class="tag-block">
  {{render '@section-title' modifiers merge=true}}
  {{render '@tags' modifiers merge=true}}
</div>
 
{
  "title": "Discover Tagged Content",
  "modifiers": {
    "title": "Discover Tagged Content",
    "aria-label": null,
    "aria-id": "related_content_tags",
    "icon": {
      "modifier": "link"
    },
    "tags": [
      {
        "tags": true,
        "item": "Lorem Ipsum"
      },
      {
        "tags": true,
        "item": "Dolor sit"
      },
      {
        "tags": true,
        "item": "Nullam dictum"
      },
      {
        "tags": true,
        "item": "Lorem Ipsum"
      },
      {
        "tags": true,
        "item": "Dolor sit"
      },
      {
        "tags": true,
        "item": "Nullam dictum"
      },
      {
        "tags": true,
        "item": "Lorem Ipsum"
      },
      {
        "tags": true,
        "item": "Dolor sit"
      }
    ]
  }
}
  • Content: 
    .tag-block {
  margin-bottom: 2rem;
}

.tags {
  .tag-block & {
    margin-top: 1.25rem;
  }
}
  • URL: /components/raw/tag-block/Tag-Block.scss
  • Filesystem Path: src/components/02-Patterns/Tag Block/Tag-Block.scss
  • Size: 95 Bytes

There are no notes for this item.