D.School Component Library

Tag 

<a href="/" class="o-tag">
        Global Topic Text
    </a>
 
{% if tag.text %}
  {% set base_class = tag.base_class|default('o-tag') %}
  <a href="{{ tag.url }}" class="{{ bem(base_class, tag.element, tag.modifiers, tag.extra) }}" {{ attributes(tag.attributes) }}>
    {{ tag.text }}
  </a>
{% endif %}
 
{
  "tag": {
    "url": "/",
    "text": "Global Topic Text"
  }
}
  • Content: 
    /* ------------------------------------ *\
  $TAG
\* ------------------------------------ */

.o-tag {
  display: inline-flex;
  align-items: center;
  background-color: var(--ds-color-gray-100);
  color: var(--ds-color-content-primary);
  border-left: var(--ds-border-width) solid var(--ds-color-border-tertiary);
  border-bottom: var(--ds-border-width) solid var(--ds-color-border-tertiary);
  padding: 2px var(--ds-space-xxs) 3px var(--ds-space-xxs);
  @include o-typography-body--ui-detail-6;

  &:hover,
  &:focus {
    color: var(--ds-color-content-secondary);
  }
}
  • URL: /components/raw/tag/_tag.scss
  • Filesystem Path: components/01-atoms/tag/_tag.scss
  • Size: 572 Bytes

No notes defined.