Loading
Underline links with href in markdown content
What does this MR do?
Adds an underline to all <a href="..."> elements inside .md (markdown-rendered) content on design.gitlab.com.
Previously, only external links received an underline due to a separate rule, leaving internal links without one. This change ensures consistent underline styling for all links with an href attribute within markdown content, improving readability and accessibility.
The fix was identified in a discussion on !6278 (merged) and is a one-liner using the existing gl-underline Tailwind utility:
.md {
a[href] {
@apply gl-underline;
}
}Related items
- MR closes #2694
Screenshots or screen recordings
Integrations
- GitLab: mr_url
- CustomersDot: mr_url
- Duo UI: mr_url
- Status Page: mr_url
- Docs: mr_url
- Switchboard: mr_url
Does this MR meet the acceptance criteria?
Toggle the acceptance checklist
Conformity
- The "What does this MR do?" section in the MR description is filled out, explaining the reasons for and scope of the proposed changes, per "Say why not just what".
- Relevant label(s) are applied to the MR.
- The MR is added to a milestone.
- Added the
~"component:*"label(s) if applicable. - A changeset is added when this MR will do a patch, minor, or major update. More information can be found in
doc/changesets.md.
Components
- GitLab UI's contributing guidelines.
- If the MR changes a component's API, integration MR(s) have been opened (see integrations above).
Documentation
- If creating a new component page from scratch, it follows the page template structure.
- Content follows the GitLab Documentation Style Guide when appropriate.
- Related pages are cross-linked, where helpful. Component pages have related components and patterns defined in their Markdown front matter.
- If embedding a Figma file, it follows the Figma embed guide.
- Review requested from any GitLab designer or directly from a maintainer or trainee maintainer.
- Maintainer review follows the Pajamas UX maintainer review checklist.
Security
- Label as security and @ mention
@gitlab-com/gl-security/appsec - Security reports checked/validated by a reviewer from the AppSec team
Accessibility
- All actions and functionality can be done with a keyboard.
- Links, buttons, and controls have a visible focus state.
- All content is presented in text or with a text equivalent.
- Changes in a component's state are announced by a screen reader.
- Color combinations have sufficient contrast.
Edited by Trevor Pierce