Disclosure link

A disclosure link is used to indicate a link to important information or can be used as part of a CTA. It can be considered as the primary link type in comparison to the a-link atom-component. On hover the title color changes and the arrow moves a bit.

Default

px 

			
				<a class="a-disclosure-link " href="#">
	<div class="a-disclosure-link__text">
		<span>
			Grafieken en 3D effecten met Adobe Illustrator
		</span>
	</div>
	<span class="a-disclosure-link__icon icon-arrow-right"></span>
</a>

Itsme

px 

			
				<a class="a-disclosure-link a-disclosure-link--itsme " href="#">
	<span class="a-disclosure-link__icon-left">
		<img src="/assets/images/itsme/logo.svg" alt="itsme" title="itsme" />
	</span>
	<div class="a-disclosure-link__text">
		<span>
			Meld je aan met itsme
			<div class="a-pill a-disclosure-link__pill">
				<span class="a-pill__text">NIEUW</span>
			</div>
		</span>
	</div>
	<span class="a-disclosure-link__icon icon-arrow-right"></span>
</a>

Secondary

px 

			
				<a class="a-disclosure-link a-disclosure-link--secondary " href="#">
	<div class="a-disclosure-link__text">
		<span>
			Grafieken en 3D effecten met Adobe Illustrator
		</span>
	</div>
	<span class="a-disclosure-link__icon icon-arrow-double-right"></span>
</a>

Documentation

Modifiers

  • a-disclosure-link--secondary

    Create a disclosure link with an icon as double arrow and a differnt shadow.