Links

Links in text

Links are red and underlined by default 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.

Breadcrumb

Set in the main body text and small caps. Why small caps? It’s from a reference by Robert Bringhurst that since 1501 it has been common practice to set [running heads] in spaced small caps of the text size.

The divider is a single right angle quote, not to be confused with a right-pointing angle bracket.

The weight has been reduced to remove some emphasis.

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

Bootstrap class. Set in Whitney semibold. While there is research to suggest ghost buttons are not as usable as solid filled buttons, I thinkt he link is sifficiently obvious as is it set in aidffernt font, weight and has a filled hover state.

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.