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.
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
. I felt the text size was a little too big, so dropped it down a size.
Table of contents
Font set in small caps and bold. 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
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.
Linkbtn 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.