List group

A list group is used to display a set of items, placed next to each other on desktop en underneath each other on mobile.

Avoid long items to improve read- and scannability.

Default

px 

			
				<aside class="m-list-group ">
	<h6 class="m-list-group__title">Populaire categorieën</h6>
	<div class="m-list-group__container">
		<ul class="m-list-group__list">
			<li class="m-list-group__item">
				<span class="m-list-group__text">An item</span>
			</li>
			<li class="m-list-group__item">
				<span class="m-list-group__text">A second item</span>
			</li>
			<li class="m-list-group__item">
				<span class="m-list-group__text">Another item</span>
			</li>
			<li class="m-list-group__item">
				<span class="m-list-group__text">A forth item here</span>
			</li>
		</ul>
	</div>
</aside>

With links

px 

			
				<aside class="m-list-group ">
	<h6 class="m-list-group__title">Populaire categorieën</h6>
	<div class="m-list-group__container">
		<ul class="m-list-group__list">
			<li class="m-list-group__item">
				<a class="a-link m-list-group__link a-link--arrow " href="#">
					<span class="a-link__icon icon-arrow-double-right"></span>
					<span class="a-link__text">An item</span>
				</a>
			</li>
			<li class="m-list-group__item">
				<a class="a-link m-list-group__link a-link--arrow " href="#">
					<span class="a-link__icon icon-arrow-double-right"></span>
					<span class="a-link__text">A second item</span>
				</a>
			</li>
			<li class="m-list-group__item">
				<a class="a-link m-list-group__link a-link--arrow " href="#">
					<span class="a-link__icon icon-arrow-double-right"></span>
					<span class="a-link__text">Another item</span>
				</a>
			</li>
			<li class="m-list-group__item">
				<a class="a-link m-list-group__link a-link--arrow " href="#">
					<span class="a-link__icon icon-arrow-double-right"></span>
					<span class="a-link__text">A forth item here</span>
				</a>
			</li>
		</ul>
	</div>
</aside>