D.School Component Library

Tags 

<div class="c-tags">
      <a href="/" class="o-tag">
          Global Topic Text
      </a>
      <a href="/" class="o-tag">
          Global Topic Text
      </a>
      <a href="/" class="o-tag">
          Global Topic Text
      </a>
      <a href="/" class="o-tag">
          Global Topic Text
      </a>
      <a href="/" class="o-tag">
          Global Topic Text
      </a>
  </div>
 
{% set base_class = tags.base_class|default('c-tags') %}
{% if tags.items %}
  <div class="{{ bem(base_class, tags.element, tags.modifiers, tags.extra) }}" {{ attributes(tags.attributes) }}>
    {% for item in tags.items %}
      {% include "@tag" with item %}
    {% endfor %}
  </div>
{% endif %}
 
{
  "tags": {
    "items": [
      {
        "tag": {
          "url": "/",
          "text": "Global Topic Text"
        }
      },
      {
        "tag": {
          "url": "/",
          "text": "Global Topic Text"
        }
      },
      {
        "tag": {
          "url": "/",
          "text": "Global Topic Text"
        }
      },
      {
        "tag": {
          "url": "/",
          "text": "Global Topic Text"
        }
      },
      {
        "tag": {
          "url": "/",
          "text": "Global Topic Text"
        }
      }
    ]
  }
}
  • Content: 
    /* ------------------------------------ *\
  $TAGS
\* ------------------------------------ */

.c-tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ds-space-xxs);
  align-content: flex-start;
}
  • URL: /components/raw/tags/_tags.scss
  • Filesystem Path: components/02-molecules/tags/_tags.scss
  • Size: 222 Bytes

No notes defined.