Links help connect different uniform resource locators on the interwebs.
| Modifier Classes | Modifies | Description |
|---|---|---|
.link--default | .link, <a> | Create a standard link. |
.link--success | .link, <a> | Use this state to indicate positive, forward progress |
.link--warning | .link, <a> | Create a button that indicates caution |
.link--info | .link, <a> | Use this state for triggering supplemental information |
.link--error | .link, <a> | Use this button to depict extreme caution or severity of action |
.link--disabled | .link, <a> | This button state is for when an action is unavailable |
.link--primary | .link, <a> | Link mapped to your branding's primary color, derived from color mappings in _colors.scss |
.link--secondary | .link, <a> | Link mapped to your branding's secondary color, derived from color mappings in _colors.scss |
<a href="#" class="link">Basic</a>
<a href="#" class="link link--default">Default</a>
<a href="#" class="link link--success">Success</a>
<a href="#" class="link link--warning">Warning</a>
<a href="#" class="link link--info">Info</a>
<a href="#" class="link link--error">Error</a>
<a href="#" class="link link--disabled">Disabled</a><a href="#" class="link link--underline">Basic</a>
<a href="#" class="link link--default link--underline">Default</a>
<a href="#" class="link link--success link--underline">Success</a>
<a href="#" class="link link--warning link--underline">Warning</a>
<a href="#" class="link link--info link--underline">Info</a>
<a href="#" class="link link--error link--underline">Error</a>
<a href="#" class="link link--disabled link--underline">Disabled</a>