List

This is a simple list component. There are different types of lists, for example: <ul>, <ol> and <dl>.

Default

px

			
				<ul class="m-list ">
	<li><strong>Logistiek:</strong> Bebat organiseert volgens de wensen van de auto-invoerder de ophaling van de EV-batterijen bij de dealers en ontmantelaars en zorgt voor transport naar de recycler of hergebruiker. Bovendien neemt Bebat de rapportering op zich</li>
	<li>item 2</li>
	<li>item 3</li>
</ul>
			

		

Disclaimer

px

			
				<ul class="m-list m-list--inline m-list--disclaimer ">
	<li class="m-list__item">
		<a href="/" class="a-link ">Privacy</a>
	</li>
	<li class="m-list__item">
		<a href="/" class="a-link ">Cookie policy</a>
	</li>
	<li class="m-list__item">
		<a href="/" class="a-link ">Disclaimer</a>
	</li>
</ul>
			

		

Links

px

			
				<ul class="m-list m-list--no-type ">
	<li class="m-list__item">
		<a class="a-link " href="">item 1</a>
	</li>
	<li class="m-list__item">
		<a class="a-link " href="">item 2</a>
	</li>
	<li class="m-list__item">
		<a class="a-link " href="">item 3</a>
	</li>
</ul>
			

		

Ordered

px

			
				<ol class="m-list m-list--ordered ">
	<li>Via mail op <a class='a-link a-link--inline' href='mailto:collection@bebat.be'>collection@bebat.be</a></li>
	<li>Via ons gratis nummer <strong>0800 97 521</strong></li>
	<li>Via <a href='https://mybebat.be' class='a-link a-link--inline'>MyBebat</a> , ons online platform</li>
</ol>
			

		

Question

px

			
				<ul class="m-list m-list--no-type m-list--question">
	<li class="m-list__item">
		<a class="a-link a-link icon-arrow-right" href="">Waar kan ik inzamelzakjes vinden?</a>
	</li>
	<li class="m-list__item">
		<a class="a-link a-link icon-arrow-right" href="">Waar kan ik met mijn zakjes terecht?</a>
	</li>
	<li class="m-list__item">
		<a class="a-link a-link icon-arrow-right" href="">Kunnen we Bebat bezoeken?</a>
	</li>
	<li class="m-list__item">
		<a class="a-link a-link icon-arrow-right" href="">Welke batterijen mogen scholen inzamelen?</a>
	</li>
</ul>
			

		

With icon

px

			
				<ul class="m-list m-list--with-icon ">
	<li class="m-list__item a-text ">
		<span class="icon-checkmark-circle"></span>
		<p><strong>Logistiek:</strong> Bebat organiseert volgens de wensen van de auto-invoerder de ophaling van de EV-batterijen bij de dealers en ontmantelaars en zorgt voor transport naar de recycler of hergebruiker. Bovendien neemt Bebat de rapportering op zich</p>
	</li>
	<li class="m-list__item a-text ">
		<span class="icon-checkmark-circle"></span>
		<p>item 2</p>
	</li>
	<li class="m-list__item a-text ">
		<span class="icon-checkmark-circle"></span>
		<p>item 3</p>
	</li>
</ul>
			

		

Documentation

Modifiers

  • m-list--with-icon

    Used when showin a list with an icon.

  • m-list--no-type

    This will remove the default list type

  • m-list--inline

    This will place the list items inline

  • m-list--disclaimer

    Specific styling for the disclaimer

  • m-list--question

    Specific styling for question list

  • m-list--ordered

    Specific styling for an ordered list