Link Component
Link component documentation with all variations and usage examples.
Foundation
The Link component is a fundamental element for navigation and interaction. It provides semantic HTML with accessible properties and consistent styling across the design system.
Basic Structure
Links are created using the standard HTML <a> element with Etihad Design System
classes.
<a href="#" class="ey-link">Link Text</a>
Atoms
Atomic link variations for different contexts and use cases.
Small Link
Compact link variant for constrained spaces:
<a href="#" class="ey-link--small">Link Small</a>
Large Link
Prominent link variant for primary actions:
<a href="#" class="ey-link--large">Link Large</a>
Medium Link
Standard medium-sized link:
<a href="#" class="ey-link--medium">Link Medium</a>
Molecules
Combined link patterns for complex interactions.
Link with Icon
Links combined with icons for enhanced visual communication:
Text Link in Context
Links within paragraph text flow naturally:
For more information, visit our documentation page or contact support team for assistance.
Organisms
Complex link structures and navigation patterns.
Branded Link Variations
Links with Etihad brand styling for prominent actions:
Small Branded Link
<a href="#" class="ey-branded-link--small">Link Small</a>
Large Branded Link
<a href="#" class="ey-branded-link--large">Link Large</a>
Link Groups
Multiple links organized for navigation or reference:
Documentation • API Reference • Examples • Support
States & Interactions
Link behavior in different states:
Default State
Normal link appearance:
Hover State
Links change appearance on interaction to provide visual feedback.
Active State
When navigated to or explicitly activated, links show their active state.
Focus State
Links maintain keyboard accessibility with visible focus indicators.
Accessibility
Best practices for accessible link implementation:
Semantic HTML
Always use the <a> element for links. Use appropriate href attributes
to ensure proper semantics.
Link Text
Provide descriptive link text that makes sense out of context. Avoid generic text like "click here".
✓ Good: <a href="/docs">Read the documentation</a>
✗ Bad: <a href="/docs">Click here</a>
Keyboard Navigation
Links must be keyboard accessible using Tab key and activatable with Enter key. This is native to HTML links.
Focus Indicators
Never remove focus indicators. They are essential for keyboard users to know which element is focused.
Best Practices
Do's
- Use links for navigation to a different page or section
- Provide context-appropriate link text
- Maintain consistent styling with the design system
- Test keyboard navigation thoroughly
- Use underlines or color to distinguish links from regular text
Don'ts
- Don't use links for actions - use buttons instead
- Don't remove underlines without providing clear visual distinction
- Don't open links in new windows without warning users
- Don't use placeholder text like "click here" for link text
- Don't disable focus indicators for styling purposes