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.