Colored links

Link colors

You can use the .link-* classes to colorize links. Unlike the .text-* classes, these classes have a :hover and :focus state. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.

Heads up! .link-body-emphasis is currently the only colored link that adapts to color modes. It’s treated as a special case until v6 arrives and we can more thoroughly rebuild our theme colors for color modes. Until then, it’s a unique, high-contrast link color with custom :hover and :focus styles. However, it still responds to the new link utilities.

Result

Loading...

Live Editor

<div>
	{themeColors.map((themeColor) => (
		<p key={themeColor.name}>
			<a href="#" className={`link-${themeColor.name}`}>
				{themeColor.title} link
			</a>
		</p>
	))}
	<p>
		<a href="#" className="link-body-emphasis">
			Emphasis link
		</a>
	</p>
</div>

Link utilities

Colored links can also be modified by our link utilities.

Result

Loading...

Live Editor

<div>
	{themeColors.map((themeColor) => (
		<p key={themeColor.name}>
			<a
				href="#"
				className={`link-${themeColor.name} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover`}
			>
				{themeColor.title} link
			</a>
		</p>
	))}
	<p>
		<a
			href="#"
			className="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover"
		>
			Emphasis link
		</a>
	</p>
</div>