Link
Links in text and data. A bare a is the accent
colour; .link takes the text colour.
Default: the text colour, underlined in accent on hover
Use it for links mixed into data, so the page is not full of colour.
Primary: the text is the accent colour too
Weight makes a name stand out in a sentence or a list
Placed by Emma Wilson on Oct 8, 2026
<p>Placed by <a href="#" class="link" data-weight="medium">Emma Wilson</a> on Oct 8, 2026</p>In a table: the row's own link is medium weight, links to other records are not
| Order | Customer | Total |
|---|---|---|
| #100482 | Emma Wilson | $129.00 |
| #100481 | James Carter | $64.50 |
<div class="card">
<table class="table">
<thead>
<tr><th scope="col">Order</th><th scope="col">Customer</th><th scope="col" data-align="end">Total</th></tr>
</thead>
<tbody>
<tr><td><a href="#" class="link" data-weight="medium">#100482</a></td><td><a href="#" class="link">Emma Wilson</a></td><td data-align="end">$129.00</td></tr>
<tr><td><a href="#" class="link" data-weight="medium">#100481</a></td><td><a href="#" class="link">James Carter</a></td><td data-align="end">$64.50</td></tr>
</tbody>
</table>
</div>Muted
For secondary links that should not draw the eye, such as help links.
<a href="#" class="link" data-variant="muted">How refunds work<i class="icon icon-external-link" aria-hidden="true"></i></a>Attributes
| Attribute / element | Values | Description |
|---|---|---|
a |
no class | Accent colour, underlined on hover. For links in body text. |
.link |
a |
Takes the surrounding text colour, underlined in accent on hover |
data-variant |
unset (default) text colour · primary accent
· muted gray
|
Link colour |
data-weight |
unset (default) normal · medium |
Medium weight, for a name that should stand out or a row's own link in a table |
.link > .icon |
child |
Trailing icon such as icon-external-link,
spaced for you
|