BLOCKS / INTERACTIVE
Link block
Text links, arrow links, animated underline links, and button-style links for inline and standalone navigation.
Standard text link
A simple underlined link for use within body copy.
This is a paragraph of body copy that contains a standard inline link within the flow of the text. The link color starts at text-g-600 and darkens on hover.
Link with arrow icon
Directional links using an inline arrow SVG for clear affordance.
Underline animation
A sliding underline that reveals on hover using the ::after pseudo-element technique.
Button-style links
Anchor elements styled to look like buttons. Semantic <a> tags for navigation, visually identical to buttons.