Links provide navigation between pages, not action. If you want to provide action, you should use a button.
You can mark an element as a link, by either using an
<a> element with a source ("href" attribute), or by adding the
This results in a blue-ish color (which can be modified in the "_child.scss") and an underline on hover.
<a href="#">Link (a)</a>, <span class="link">Link (.link)</span>, <button class="link">Link (button.link)</button>
It's also possible to give links any of the secondary colors and to "mute" them (gray out).
To do so, you have to use any of these classes:
.is-redfor dangerous links/links to removed targets
.is-successfor successful links
.is-yellowfor potentially dangerous links
.is-tealfor links in neutral-informative contexts (using no modifier is here the best option in most cases, however)
.is-mutedfor secondary/inactive links
<a href="#">normal</a>, <a href="#" class="is-red">is-red</a>, <a href="#" class="is-green">is-green</a>, <a href="#" class="is-yellow">is-yellow</a>, <a href="#" class="is-teal">is-teal</a>, <a href="#" class="is-muted">is-muted</a>
By default, all links are underlined, if and only if they are hovered. However it is possible to either prevent all underlines or to force them to always exist. Use these classes for this:
.is-underlinedto force an underline to always exist
.is-not-underlinedto prevent underlines from ever appearing