{% set topics = [
	{ label: 'Wat is CLB?' },
	{ label: 'Beleids- en secundaire processen' },
	{ label: 'RADI' },
	{ label: 'Materiaal voor scholen' },
	{ label: 'Permanente ondersteuning' },
	{ label: 'Schoolondersteuning en leerlinggebonden aanbod' },
	{ label: 'Materiaal voor scholen' },
	{ label: 'LA en SO' }
] %}

<div class="o-category-header" style="background-image: url('{{ htmlParameters.rootPath }}img/placeholders/shutterstock_643122349.jpg')">
	
	<nav class="m-breadcrumb">
	    <a href="#">Mijn dashboard</a>
	    <a href="#">CLB</a>
	</nav>
	
	<div class="o-category-header__container">
		
		<div class="o-category-header__header">
			<h1>Centra voor Leerlingen<span class="u-hyphenate">- </span>begeleiding (CLB)</h1>
			
			<button class="a-button a-button--favorite" title="Voeg toe aan favorieten">
				<span class="icon-favorite-o"></span><span>Voeg toe aan favorieten</span>
			</button>
			
			<div class="a-input a-search o-category-header__search a-search--rounded">
			    <div class="a-input__field-holder">
					<input type="search" class="a-search__field" name="input-search" id="input-search" placeholder="Zoeken binnen deze categorie">
					<a href="#" class="icon-search a-search__button"></a>
			    </div>
			</div>
		</div>
		
		
		
		<div class="o-category-header__topics">
			{% for topic in topics %}
			<a href="#" class="a-topic">
				{{topic.label}}
			</a>
			{% endfor %}
		</div>
		
	</div>

</div>