Gallery
See what others have created
toufuzama
@toufuzama
Link
Design a single text link as it would appear inside real content: a sentence in a help article, settings panel, or card body. The link should feel native to the text around it, not like a separate control.
Show the full interaction set: default, hover, focus, visited, and active. Keep the treatment restrained, but make each state readable at a glance. The focus state must be keyboard-visible and work without color alone.
Choose one clear destination label and place it in context so the user understands where it goes before clicking. The link should stay legible at small sizes, survive long labels, and preserve the rhythm of the surrounding copy.
What to deliver
- Design a text link in default, hover, focus, visited, and active states.
- Show the link in a realistic content block, not isolated on a blank canvas.
- Include an accessible focus treatment that works without relying on color alone.
- Use one clear destination label so the link purpose is obvious from context.
- Add a disabled or unavailable variant only if the pattern needs it.
Incorporate microinteractions to elevate the user's experience; subtle animations when hovering can make links lively and engaging.