DOTD Component Library

Link: With External Link 

<a class="o-link" href="/" target="_blank" rel="noreferrer">
      <span class="o-link__label">
          Link
          <span class="o-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.2308 21H4.38462C4.01754 20.9995 3.66565 20.8535 3.40609 20.5939C3.14653 20.3344 3.00049 19.9825 3 19.6154V5.76923C3.00049 5.40216 3.14653 5.05026 3.40609 4.79071C3.66565 4.53115 4.01754 4.38511 4.38462 4.38462H11.3077V5.76923H4.38462V19.6154H18.2308V12.6923H19.6154V19.6154C19.6149 19.9825 19.4689 20.3344 19.2093 20.5939C18.9497 20.8535 18.5978 20.9995 18.2308 21Z" />
                  <path d="M14.0769 3V4.38462H18.6365L12.6923 10.3288L13.6712 11.3077L19.6154 5.36354V9.92308H21V3H14.0769Z" />
              </svg>
          </span>
      </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": "/",
    "target": "_blank",
    "icon": false
  }
}
  • 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.