List

A list is used to display a set of items. Avoid long items to improve read- and scannability.

Alternative

An alternative version of the default unordered list with a different icon and different icon color.

  • m-list--alternative
px 

			
				<ul class="m-list m-list--alternative">
	<li class="m-list__item">
		<span class="m-list__text">Cras mattis consectetur purus sit amet fermentum.</span>
	</li>
	<li class="m-list__item">
		<span class="m-list__text">Aenean lacinia bibendum nulla sed consectetur.</span>
	</li>
</ul>

Default

An unordered list is used to display a set of items without order.

px 

			
				<ul class="m-list ">
	<li class="m-list__item">
		<span class="m-list__text">Cras mattis consectetur purus sit amet fermentum.</span>
	</li>
	<li class="m-list__item">
		<span class="m-list__text">Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia
			bibendum nulla sed consectetur. Aenean lacinia bibendum nulla
			sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</span>
	</li>
</ul>

Ordered

An ordered list is used to display a set of items within a certain order and prefixed by a number.

px 

			
				<ol class="m-list m-list--ordered ">
	<li class="m-list__item">
		<span class="m-list__text">Overzicht van het programma</span>
	</li>
	<li class="m-list__item">
		<span class="m-list__text">Hoe breng je jouw inlevingsvermogen in praktijk?</span>
	</li>
	<li class="m-list__item">
		<span class="m-list__text">Overzicht van het programma</span>
	</li>
</ol>

With icon

An unordered list with an icon is used to display a set of items without order. You can define an icon to be displayed as list-style-type.

  • m-list--with-icon
px 

			
				<ul class="m-list m-list--with-icon ">
	<li class="m-list__item">
		<span class="m-list__text icon-arrow-double-right">Cras mattis consectetur purus sit amet fermentum.</span>
	</li>
	<li class="m-list__item">
		<span class="m-list__text icon-arrow-double-right">Aenean lacinia bibendum nulla sed consectetur.</span>
	</li>
</ul>

With large format

Create a larger version of the original list where the font-size and spacing between the items is increased. Combined with other modifiers like m-list--ordered and m-list--with-icon this will have a combined effect.

px 

			
				<ul class="m-list m-list--large">
	<li class="m-list__item">
		<span class="m-list__text">Overzicht van het programma</span>
	</li>
	<li class="m-list__item">
		<span class="m-list__text">Hoe breng je jouw inlevingsvermogen in praktijk?</span>
	</li>
	<li class="m-list__item">
		<span class="m-list__text">Overzicht van het programma</span>
	</li>
</ul>

With larger icons

Create a larger version of the original list where the font-size and spacing between the items is increased. Combined with other modifiers like m-list--ordered and m-list--with-icon this will have a combined effect.

px 

			
				<ul class="m-list m-list--with-icon m-list--large">
	<li class="m-list__item">
		<span class="m-list__text icon-arrow-double-right">Cras mattis consectetur purus sit amet fermentum.</span>
	</li>
	<li class="m-list__item">
		<span class="m-list__text icon-arrow-double-right">Aenean lacinia bibendum nulla sed consectetur.</span>
	</li>
</ul>

With larger ordered

Create a larger version of the original list where the font-size and spacing between the items is increased. Combined with other modifiers like m-list--ordered and m-list--with-icon this will have a combined effect.

px 

			
				<ol class="m-list m-list--ordered m-list--large">
	<li class="m-list__item">
		<span class="m-list__text">Overzicht van het programma</span>
	</li>
	<li class="m-list__item">
		<span class="m-list__text">Hoe breng je jouw inlevingsvermogen in praktijk?</span>
	</li>
	<li class="m-list__item">
		<span class="m-list__text">Overzicht van het programma</span>
	</li>
</ol>

Without classes

An unordered list is used to display a set of items without order. This variation is build without the use of HTML class attribute.

px 

			
				<ul>
	<li>Hello world <a href="#">Hello</a> Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</li>
	<li>
		Stijlvolle grafieken aanmaken vanuit Adobe Illustrator
	</li>
	<li>
		3D-effecten vanuit Adobe Illustrator realiseren
	</li>
	<li>
		Grafische mogelijkheden van Adobe Illustrator uitgebreid benutten
	</li>
</ul>

Documentation

Modifiers

  • m-list--alternative

    an alternative version of the default list with different icon and icon color

  • m-list--with-icon

    will give the specific styling to the list when using an icon

  • m-list--large

    increases font-size, line-height and spacing of each item within the component compared to the original

  • m-list--ordered

    includes a title and has a counter as support of each item within the component compared to the original