Links
Styling text links
Default browser underlines are removed to give us better control over styling links. This is also because most links in Mybring appear in a context where they are clearly identified as interactive; for example as navigational features. It’s not required to comply with WCAG, and would create more visual noise than help users. Links in Mybring are either:
- clearly identified as interactive because of their placement
-
or have added the
linkishclass with underline in larger bodies of text
| Class | Declaration | Colour | Usage | |
|---|---|---|---|---|
color: hsl(212, 100%, 43%); text-decoration: none; |
Mybring | Default Mybring link style | ||
| linkish | text-decoration: underline; |
Mybring | Opt-in for where it's necessary to help users distinguish links from a surrounding body of text. | |
| link-white | color: #fff; |
Mybring | In the very rare occasion that you have such a dark background that you need a white link. |
Links and buttons
It’s important we understand the use of Links vs. Buttons in Modern Web Applications. Yet, sometimes the two can benefit from looking the same, especially when appearing side by side. There is a special hybrid class for such occasions.