Examples

Link

<a href="#" class="ys-link">This is a link</a>

Link on dark background

<a href="#" class="ys-link">This is a link</a>

HTML Guidelines

UX and Design Guidelines

Text-decoration

All text-links should have an underline to clearly show the users that the element is clickable. When hovering the link the cursor should change to a pointer/hand to show the user that cliking will make the browser jump to a new location. The pointer/hand is a default behavior in all desktop browsers when using the <a> element.

Colors

All text-links should follow below rules:

1. The default state has hex-color #1fab2e with color-code $ys-color-digital-grass
2. The hover state has hex-color #191919 with color-code $ys-color-grey-10
3. The visited state has hex-color #609; with no color-code
4. The active state has hex-color #191919 with color-code $ys-color-grey-10