BUX Component Development Platform

Link: Default 

<div class="bux-link-container">
    <a class="bux-link" href="#">
        Inline link
    </a>
</div>
 
{# 

Link

Available variables:

- modifier:         Sets the link variant. Allowed values: null, alt, reverse,
                    scarlet, before, after
- link_url:         URL for the link.
- link_text:        String for the link text.
- attributes:       Array of link attributes.
- attribute.label:  Label of link attribute.
- attribute.value:  Value of link attribute.
- isExternal:       Set to true for an external link.

#}

<div class="bux-link-container{% if modifier %} bux-link-container--{{ modifier }}{% endif %}">
    <a class="bux-link{% if modifier %} bux-link--{{ modifier }}{% endif %}" href="{{ link_url }}"
        {% for attribute in attributes %}
            {{attribute.label}}="{{attribute.value}}"
        {% endfor %}
        {% if isExternal %}
            target="_blank"
        {% endif %}
    >
        {{ link_text }}
    </a>
</div>
 
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
link_text: Inline link
link_url: '#'
attributes: null
  • Content: 
    .bux-link {
  @include link-base;

  &--before {
    &:before {
      content: "\f015";
      font-size: $ts-sm;
      font-family: $icon;
      padding-right: $sp-4;
    }
  }

  &--after {
    &:after {
      content: "\f116";
      font-size: $ts-sm;
      font-family: $icon;
      padding-left: $sp-4;
    }
  }
}

.bux-link--reverse {
  @include link-base(dark);
}

.bux-link--alt {
  @include link-base(light);
}

.bux-link--scarlet {
  @include link-base(scarlet);
}
  • URL: /components/raw/link/_link.scss
  • Filesystem Path: src/components/link/_link.scss
  • Size: 476 Bytes

No notes defined.