Highlight

A component used to highlight certain types of clickable or interactive components like a title or a button. It mainly places a border around the component to give it more of a focus in a group of components.

As link

px 

			
				<div class="a-highlight ">
	<div class="a-highlight__content">
		<a class="a-link a-highlight__link " href="">
			<span class="a-link__text">Overige sessies</span>
		</a>
	</div>
</div>

As title

px 

			
				<div class="a-highlight ">
	<div class="a-highlight__content">
		<div class="a-title ">
			<h5 class="a-title__text">Er vinden oefeningen plaats tussen de gesprekken</h5>
		</div>
	</div>
</div>

With large padding

px 

			
				<div class="a-highlight a-highlight--spacing-large">
	<div class="a-highlight__content">
		<div class="a-title ">
			<h5 class="a-title__text">Er vinden oefeningen plaats tussen de gesprekken</h5>
		</div>
	</div>
</div>
<div class="a-highlight a-highlight--spacing-large">
	<div class="a-highlight__content">
		<a class="a-link a-highlight__link " href="">
			<span class="a-link__text">Overige sessies</span>
		</a>
	</div>
</div>

Documentation

Modifiers

  • a-highlight--spacing-large

    Increases the size of the padding of the highlighted component.