BUX Component Development Platform

Link 

<div class="bux-link-example">
    <p>This is an
        <a class="bux-link" href="#">inline link</a>.
    </p>
</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.

#}

<div class="bux-link-example{% if modifier %} bux-link-example--{{ modifier }}{% endif %}">
<p>This is an 
    <a class=
        "bux-link{% if modifier %} bux-link--{{ modifier }}{% endif %}" 
        href="{{ link_url }}" 
        {% for attribute in attributes %} 
            {{attribute.label}}="{{attribute.value}}" 
        {% endfor %}>{{ link_text }}</a>.
</p>
</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
  • 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.