3.2 #permalink Links
Links are vastly simpler as of 3/2016. By default they're blue and not underlined, and orange and underlined on hover.
link_subtle
links don't get underlined on hover.
To have it keep its color on hover, define a color for its parent and apply col_inherit
to the link/child.
Never use col_inherit
and link_subtle
together, or the link will have no hover state.
There are only three additional types of links: link_block
, link_block2
, and link_stroke
.
Examples
Default styling
:hover
hover
:focus
focus
:visited
visited
Markup
<div class="grid-parent layout_centerVertical">
<div class="grid-3">
<a href="/" class="[modifier class]">default link</a><br/>
<a href="/" class="link_subtle [modifier class]">subtle link</a><br/>
<span class="col_ggPrimary3Text"><a href="/" class="col_inherit [modifier class]">always green link</a></span> <br/>
<span class="col_ggSecondary3Text"><a href="/" class="col_inherit link_subtle [modifier class]">don't ever do this</a></span> <br/>
</div>
<div class="grid-3 col_whiteText box_padded1 layout_center"><a class="grid-12 col_ggPrimary5 col_inherit link_block box_padded3 [modifier class]">block link</a></div>
<div class="grid-3 col_whiteText box_padded1 layout_center"><a class="grid-12 col_ggPrimary5 col_inherit link_block2 box_padded3 [modifier class]">block link 2</a></div>
<a href="/" class="grid-3 box_paddedHalf link_stroke [modifier class]">
<div class="col_ggPrimary1Lighter box_padded4 col_defaultText">
stroke link
</div>
</a>
</div>
Source:
text/links.less
, line 6