Links

Links in text

Links are red and underlined on :hover when there is no class applied. Where links are part of other components different rules are applied.

Research Insight: There is no need for links to external websites to be marked with an icon. If knowing the link goes to another website is imporant, this can be achieved easily in the text rather than an ambiguous icon.

List group

A Bootstrap component that essentially makes a block level list. Specifically this is the .list-group-item-action variant I use to make block level links. Using an unordered list is important here to make the HTML sane.

Pagination

An interactive component that allows the user to navigate a section that is split into pages. As the component already has padding and a border there is no need for the additional box-shadow applied to other link components.

Table of contents

Font set in small caps and medium. List automatically splits into two columns using CSS multi-columns. A heading can be added to aid screen readers using the sr-only class.

Links in footnotes

A link will be present in the main content indicated by a superscript numeral.

Buttons

btn Link

The btn-link is heavily modified with an mdash and a narrow no-break space generated by CSS content. Padding left is also removed so the component sits flush left with text. The right padding is kept for focus effect.

Next and previous pager

Not using pagination of bootstrap but rather the nav component. The link wraps around inline span elements with a nested media object.

Between the label and the content is a visuall hidden colon to aid screenreaders.