Definition list

A definition list to display a set of items with a term and description.

A definition list is used to create “label” and “value” pairs. It’s main use is to display form ouput or meta data throughout the cevora website. The small additional information is optional and can be anything. Try to limit the amount of characters.

Default

px

			
				<ul class="m-definition-list l-grid l-grid--with-spacing ">
	<li class="m-definition-list__item l-grid__col l-grid__col--6 l-grid__col--4@viewport-7 l-grid__col--3@viewport-9">
		<div class="a-defintion ">
			<span class="a-definition__term">Opleidingstype</span>
			<div class="a-definition__description">
				<p>Klassikaal</p>
			</div>
		</div>
	</li>
	<li class="m-definition-list__item l-grid__col l-grid__col--6 l-grid__col--4@viewport-7 l-grid__col--3@viewport-9">
		<div class="a-defintion ">
			<span class="a-definition__term">Opleidingstraject</span>
			<div class="a-definition__description">
				<p>Grafische vormgever <small>(Beroepsopleiding)</small></p>
			</div>
		</div>
	</li>
	<li class="m-definition-list__item l-grid__col l-grid__col--6 l-grid__col--4@viewport-7 l-grid__col--3@viewport-9">
		<div class="a-defintion ">
			<span class="a-definition__term">Opleidingstype</span>
			<div class="a-definition__description">
				<p>Klassikaal</p>
			</div>
		</div>
	</li>
	<li class="m-definition-list__item l-grid__col l-grid__col--6 l-grid__col--4@viewport-7 l-grid__col--3@viewport-9">
		<div class="a-defintion ">
			<span class="a-definition__term">Opleidingstraject</span>
			<div class="a-definition__description">
				<a href='#'>Grafische vormgever</a> <small>(Beroepsopleiding)</small>
			</div>
		</div>
	</li>
	<li class="m-definition-list__item l-grid__col l-grid__col--4@viewport-7 l-grid__col--6@viewport-9">
		<div class="a-defintion ">
			<span class="a-definition__term">Opleidingstype</span>
			<div class="a-definition__description">
				<p>Klassikaal</p>
			</div>
		</div>
	</li>
	<li class="m-definition-list__item l-grid__col l-grid__col--4@viewport-7 l-grid__col--6@viewport-9">
		<div class="a-defintion ">
			<span class="a-definition__term">Opleidingstraject</span>
			<div class="a-definition__description">
				<p>Grafische vormgever <small>(Beroepsopleiding)</small></p>
			</div>
		</div>
	</li>
</ul>