D.School Component Library

Link: External 

<a class="o-link" href="/" target="_self">
    <span class="o-link__label">
        Link
    </span>
    <span class="o-icon transition">
        <svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
            <path d="M19.09 4.5H6.53V6H17.97L4 19.97L5.06 21.03L19.03 7.06V18.5H20.53V5.94L19.09 4.5Z" />
        </svg>
    </span>
</a>
 
{% set base_class = link.base_class|default('o-link') %}
{% set link_icon = 'arrow-right' %}

{% if link.external %}
  {% set link_icon = 'external-link' %}
{% elseif link.download %}
  {% set link_icon = 'download' %}
{% endif %}

{% 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.icon_placement == "before" %}
      {% if link.arrow %}
        {% include "@icon" with {
          "icon": {
            "name": "arrow-left"
          }
        } %}
      {% else %}
        {% include "@icon" with link %}
      {% endif %}
    {% endif %}
    {% if link.text %}
      <span class="{{ bem(base_class, 'label') }}">
        {{ link.text }}
      </span>
    {% endif %}
    {% if link.icon_placement != "before" %}
      {% if link.arrow %}
        {% include "@icon" with {
          "icon": {
            "name": link_icon,
            "extra": (link.animation == false) ? '' : 'transition'
          }
        } %}
      {% else %}
        {% include "@icon" with link %}
      {% endif %}
    {% endif %}
  </a>
{% endif %}
 
{
  "link": {
    "text": "Link",
    "url": "/",
    "arrow": true,
    "external": true
  }
}
  • Content: 
    /* ------------------------------------ *\
  $LINKS
\* ------------------------------------ */

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

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

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

No notes defined.