Links
A span that could be disguised as a link
All types of links.
Markup
<!-- An anchor -->
<div>
<a href="javascript:void(0)" class="{{modifier_class}}">A proper link using an anchor tag</a>
</div>
<!-- And a span -->
<div>
<span class="{{modifier_class}}">A span that could be disguised as a link</span>
</div>Modifiers
A span that could be disguised as a link
.link
Undoing default anchor styling
A span that could be disguised as a link
.unlink
Undoing default anchor styling (better implementation)
A span that could be disguised as a link
.arrowLink
A chevron pointing to the right in front of the link. The arrow and text indent should align with a list-item dot (and therefore its positioning can differ slightly from a regular iconLink)
A span that could be disguised as a link
.arrowLink.arrowLink--back
A chevron pointing to the left in front of the link.
.arrowLink.arrowLink--button
Give the arrowLink the same height as a .button as to equalize their vertical alignment even when they have separate containers.
A span that could be disguised as a link
.arrowLink.arrowLink--down
A chevron pointing to the bottom in front of the link.
A span that could be disguised as a link
.arrowLink.arrowLink--up
A chevron pointing to the top in front of the link.
A span that could be disguised as a link
.arrowLink.arrowLink--white
A chevron pointing to the right in front of the link. Link color is $ns-white.
A span that could be disguised as a link
.arrowLink.arrowLink--blue
A chevron pointing to the right in front of the link. Link color is $ns-blue.
A span that could be disguised as a link
.arrowLink.arrowLink--grey
A chevron pointing to the right in front of the link. Link color is $ns-grey-40.
A span that could be disguised as a link
.arrowLink.arrowLink--small
A chevron pointing to the right in front of the link.
A span that could be disguised as a link
.arrowLink--right
A chevron pointing to the right after the link.
A span that could be disguised as a link
.arrowLink--right.arrowLink--down
A chevron pointing to the down after the link.
A span that could be disguised as a link
.arrowLink--right.arrowLink--up
A chevron pointing to the top after the link.
A span that could be disguised as a link
.arrowLink--rightBlue
A chevron pointing to the right after the link. Link color is $ns-blue.
A span that could be disguised as a link
.arrowLink--rightWhite
A chevron pointing to the right after the link. Link color is $ns-white.
A span that could be disguised as a link
.iconLink.iconLink--placeholder
Reference iconLink containing a placeholder icon.
A span that could be disguised as a link
.iconLink.iconLink--x
A link with an X (Former Twitter) logo prepended
A span that could be disguised as a link
.iconLink.iconLink--twitter
A link with an X (Former Twitter) logo prepended
A span that could be disguised as a link
.iconLink.iconLink--facebook
A link with a Facebook logo prepended
A span that could be disguised as a link
.iconLink.iconLink--youtube
A link with a Youtube logo prepended
A span that could be disguised as a link
.iconLink.iconLink--linkedin
A link with a LinkedIn logo prepended
A span that could be disguised as a link
.iconLink.iconLink--pinterest
A link with a Pinterest logo prepended
A span that could be disguised as a link
.iconLink.iconLink--instagram
A link with a Instagram logo prepended
A span that could be disguised as a link
.iconLink.iconLink--external
A link to an external location
A span that could be disguised as a link
.iconLink.iconLink--scroll-down
A link to an anchor lower on the page
A span that could be disguised as a link
.fileLink
A link to a generic file
A span that could be disguised as a link
.fileLink.fileLink--pdf
A link to a pdf-file