D.School Component Library

Link: Download 

<a class="o-link" href="/" target="_self">
    <span class="o-link__label">
        Link
    </span>
    <span class="o-icon">
        <svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.5 2.25V12.81L7.27 8.71L6.23 9.79L11.64 15.04H12.86L18.27 9.79L17.23 8.71L13 12.81V2.25H11.5Z" />
            <path d="M22 21.25H2.5V14H1V22.75H23.5V14H22V21.25Z" />
        </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,
    "download": true,
    "animation": false
  }
}
  • 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.