{% extends "base.twig" %}

{% block title %}
	{{ page.meta_title }}
	{{ page.meta_description }}
{% endblock %}


{% block content %}
	
	<div class="page-section page-section__showcase">
		
		<div class="showcase-text">
			
			<div class="grid-container">
				<div class="grid-x grid-padding-x align-center">
						
					<div class="cell small-12">	
						<h1>{{ page.titel }}</h1>	
					</div>
				
				</div>
			</div>
			
		</div>
		
		<div class="showcase-blocks">
			
			<div class="grid-container">
				<div class="grid-x grid-padding-x align-center">
						
					<div class="cell small-12">	
						
						<ul class="grid-x grid-padding-x skl-links" data-equalizer>
							<li class="cell small-3 medium-3">
								<a href="kdv" class="block block__kdv" data-equalizer-watch>
									<span class="lighter">Algemene informatie over</span>
									<span><img src="/images/svg/kdv.svg" alt="KDV - Kinderdagverblijf" width="150px"></span>
									<span class="onderdeel">Kinderdagverblijf</span>
								</a>
							</li>
							<li class="cell small-3 medium-3">
								<a href="po" class="block block__po" data-equalizer-watch>
									<span class="lighter">Algemene informatie over</span>
									<span><img src="/images/svg/po.svg" alt="PO - Peuter opvang" width="150px"></span>
									<span class="onderdeel">Peuteropvang</span>
								</a>
							</li>
							<li class="cell small-3 medium-3">
								<a href="bso" class="block block__bso" data-equalizer-watch>
									<span class="lighter">Algemene informatie over</span>
									<span><img src="/images/svg/bso.svg" alt="BSO Buitenschoolse opvang" width="150px"></span>
									<span class="onderdeel">Buitenschoolse Opvang</span>
								</a>
							</li>
							<li class="cell small-3 medium-3">
								<a href="tso" class="block block__tso" data-equalizer-watch>
									<span class="lighter">Algemene informatie over</span>
									<span><img src="/images/svg/tso.svg" alt="TSO - Tussenschoolse opvang" width="150px"></span>
									<span class="onderdeel">Tussenschoolse opvang</span>
								</a>
							</li>
						</ul>
						
					</div>
				
				</div>
			</div>
			
		</div>
		
			
		<div class="jarallax jarallax__full-width" style="height:55vh;">
			<img src="{{ page.foto[0] }}" alt="{{ page.titel }}" class="jarallax-img">
		</div>
		
	</div>
	
	{% for row in page.contents %}
    	<div class="page-section {{row.classname}}"> {{ row.html|raw }} </div>
	{% endfor %}
	
 
	{% if page.form %}
		{% include 'partials/form.twig' %}
	{% endif %}
	
	
	  
{% endblock %}