Link

A link can be used to navigate between the pages or navigate to a different site. The default link component is simple, but by using and combining the different modifiers, links can be visually changed for different use cases.

Default

px 

			
				<a class="c-link " href="#">
	<span class="c-link__text">Default link</span>
</a>

With icon

px 

			
				<a class="c-link c-link--with-icon" href="#">
	<span class="c-link__text">Link with icon</span>
	<div class="c-icon c-link__icon c-link__icon--after">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
			<path d="M8.3,0.4c0.8,0,1.4,0.6,1.4,1.4S9.1,3.2,8.3,3.2l0,0H3.6c-0.3,0-0.5,0.2-0.5,0.5l0,0v16.7c0,0.2,0.2,0.5,0.5,0.5l0,0h16.7c0.3,0,0.5-0.2,0.5-0.5l0,0v-4.6c0-0.8,0.6-1.4,1.4-1.4c0.8,0,1.4,0.6,1.4,1.4l0,0v4.6c0,1.8-1.5,3.3-3.2,3.3l0,0H3.7c-1.8,0-3.3-1.5-3.3-3.2l0,0V3.6c0-1.8,1.5-3.2,3.2-3.2l0,0H8.3z M22.2,0.4c0.8,0,1.4,0.6,1.4,1.4l0,0v9.3c0,0.8-0.6,1.4-1.4,1.4s-1.4-0.6-1.4-1.4l0,0V5.2l-9.7,9.7c-0.3,0.3-0.6,0.4-1,0.4c-0.4,0-0.7-0.1-1-0.4c-0.5-0.5-0.5-1.4,0-1.9l0,0l9.7-9.7h-5.9c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4l0,0H22.2z" />
		</svg>
	</div>
</a>