Cevora

Multilink are very similar to cards and are used to display links associated with a certain subject. On small screens the link stacks underneath each other.

Modifiers

Center aligned

Align the elements within the component to the center of its entire width.


			
				<article class="m-multilink m-multilink--center">
	<header class="m-multilink__header">
		<h4 class="m-multilink__title">Finaniciële medewerkers</h4>
	</header>
	<ul class="m-multilink__actions">
		<li class="m-multilink__action">
			<a class="a-link a-link--decorated " href="">
				<span class="a-link__text">Ontdek dit traject</span>
			</a>
		</li>
	</ul>
</article>
<article class="m-multilink m-multilink--center">
	<header class="m-multilink__header">
		<h4 class="m-multilink__title">Finaniciële medewerkers</h4>
	</header>
	<ul class="m-multilink__actions">
		<li class="m-multilink__action">
			<a class="a-link a-link--decorated " href="">
				<span class="a-link__text">Ontdek dit traject</span>
			</a>
		</li>
		<li class="m-multilink__action">
			<a class="a-link a-link--decorated " href="">
				<span class="a-link__text">Ontdek dit traject</span>
			</a>
		</li>
		<li class="m-multilink__action">
			<a class="a-link a-link--decorated " href="">
				<span class="a-link__text">Ontdek dit traject</span>
			</a>
		</li>
		<li class="m-multilink__action">
			<a class="a-link a-link--decorated " href="">
				<span class="a-link__text">Ontdek dit traject</span>
			</a>
		</li>
	</ul>
</article>

Default


			
				<article class="m-multilink ">
	<header class="m-multilink__header">
		<h4 class="m-multilink__title">Management assistent</h4>
	</header>
	<ul class="m-multilink__actions">
		<li class="m-multilink__action">
			<a class="a-link a-link--decorated " href="">
				<span class="a-link__text">Basisvaardigheden</span>
			</a>
		</li>
		<li class="m-multilink__action">
			<a class="a-link a-link--decorated " href="">
				<span class="a-link__text">Opleidingssuggesties</span>
			</a>
		</li>
	</ul>
</article>

With larger spacing

Increase the spacing of the container compared to its original version. This can be combined with other modifiers like m-multilink--center for example.


			
				<article class="m-multilink m-multilink--spacing-large">
	<header class="m-multilink__header">
		<h4 class="m-multilink__title">Finaniciële medewerkers</h4>
	</header>
	<ul class="m-multilink__actions">
		<li class="m-multilink__action">
			<a class="a-link a-link--decorated " href="">
				<span class="a-link__text">Ontdek dit traject</span>
			</a>
		</li>
	</ul>
</article>
<article class="m-multilink m-multilink--center m-multilink--spacing-large">
	<header class="m-multilink__header">
		<h4 class="m-multilink__title">Finaniciële medewerkers</h4>
	</header>
	<ul class="m-multilink__actions">
		<li class="m-multilink__action">
			<a class="a-link a-link--decorated " href="">
				<span class="a-link__text">Ontdek dit traject</span>
			</a>
		</li>
	</ul>
</article>

Documentation

Modifiers

m-multilink--spacing-large

Create a multilink where the spacing is larger compared to its original version.
m-multilink--center

Create a multilink where everything within: title, subtitle, description and actions are placed in the center.