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.
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.
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.
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
Links in footnotes
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.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.