An inline link is an underlined text link that flows within body copy, lists and UI text. The underline is its affordance, and it is never paired with icons.
How to add an inline link to a page. The file is components/css/inline-link.css.
Link the shared stylesheet once per page. Never copy the rules into a page.
| Step | What to do |
|---|---|
| 1. Link | <link rel="stylesheet" href="/components/css/inline-link.css">. Both templates already have it. |
| 2. Markup | A real <a href> with class="inline-link inline-link--medium" inside the text. |
| 3. Size | Choose the size that matches the text around the link. |
| 4. Color | The same color as the text around the link: Primary (no class) in Primary text, inline-link--secondary in Secondary text, --tertiary in Tertiary text, --inverted on a dark surface. |
| 5. Icons | None. For an icon use an Action link. |
Copy the markup you need. Hover comes from :hover; the [data-state] selectors in the CSS exist only so the documentation can force a state.
| Class | Use |
|---|---|
inline-link | The link. Primary color, underlined. |
inline-link--xlarge, --large, --medium, --small | Size. |
inline-link--weight-medium, --bold | Weight (any size). --small-bold is kept: Small and Bold. |
inline-link--italic | Italic style. |
inline-link--reverse | No underline when enabled, underline on hover. |
inline-link--secondary, --tertiary | Colors for grey text. |
inline-link--inverted | For a dark surface. |
text-primary), --secondary in text-secondary text, --tertiary in text-tertiary text. The hover colors are text-action-primary-hover, text-action-secondary-hover and text-action-tertiary-hover.body.keyboard-nav, which the templates set on the first Tab press.[data-state] selectors do nothing outside the documentation pages.The component is one CSS file, shared by every page. Link it, never copy it. The CSS below is read from the file the page links, so it is always what you see.