DOTD Component Library

Link: Small 

<a class="o-link o-link--sm" href="/" target="_self">
      <span class="o-link__label">
          Link
      </span>
  </a>
 
{% set base_class = link.base_class|default('o-link') %}
{% if link.url %}
  <a class="{{ bem(base_class, link.element, link.modifiers, link.extra) }}" href="{{ link.url }}"{{ link.target == '_blank' ? ' target="_blank" rel="noreferrer"' : ' target="_self"' }} {{ attributes(link.attributes) }}>
    {% if link.text %}
      <span class="{{ bem(base_class, 'label') }}">
        {{ link.text }}
        {% if link.target == "_blank" %}
          {% include "@icon" with {
            "icon": {
              "name": "external-link",
            }
          } %}
        {% endif %}
      </span>
    {% endif %}
    {% include "@icon" with link %}
  </a>
{% endif %}
 
{
  "link": {
    "text": "Link",
    "url": "/",
    "modifiers": "sm"
  }
}
  • Content: 
    /* ------------------------------------ *\
  $LINKS
\* ------------------------------------ */

.o-link {
  @include o-link;
}

.o-link--secondary {
  @include o-link--secondary;
}

.o-link--sm {
  @include o-link--sm;
}
  • URL: /components/raw/link/_link.scss
  • Filesystem Path: components/01-atoms/link/_link.scss
  • Size: 221 Bytes

No notes defined.