<h1>Header 1</h1> <h2>Header 2</h2> <h3>Header 3</h3> <a href="#" target="_blank">Hyperlink</a>
<div class="header-multiple-font">
<h6 class="header-small text-center">header klein</h6>
<h1 class="header-big text-center">header groot</h1>
</div>
<p>Paragraph</p>
Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
<a class="button button-primary" href="#">button primary</a>
<a class="button button-primary btn-full-width-mobile" href="#">full width mobile</a>
<div class="banner banner-design-yourself">
<div class="container">
<div class="cols">
<div class="xs-12 sm-8 md-8 lg-8 sm-offset-2">
<div class="banner-wrapper">
<div class="banner-header header-multiple-font display-none display-sm-block">
<h6 class="header-small text-center">header small</h6>
<h1 class="header-big text-center">header-big</h1>
</div>
<div class="banner-content display-none display-sm-block">
<p>Nisi ut aliquid ex ea commodi consequatur.
Quis autem vel eum iure reprehenderit. Nisi ut aliquid ex ea commodi consequatur.</p>
</div>
<div class="banner-button-group">
<a class="button button-primary btn-full-width-mobile" href="#">button primary</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="banner banner-swiper mb-4">
<div class="container">
<div class="cols">
<div class="xs-12 sm-12 md-12 lg-12">
<div class="banner-wrapper">
<div class="banner-header header-multiple-font">
<h6 class="header-small text-center">blije</h6>
<h1 class="header-big text-center">klanten</h1>
</div>
<div class="banner-content">
<div class="swiper-container" id="swiper-feedback">
<div class="swiper-wrapper" id="customer-reviews">
<div class="swiper-slide">
<div class="swiper-slide_text">
<p>Review 1</p>
<p><strong>Blije klant</strong></p>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide_text">
<p>Review 2</p>
<p><strong>Blije klant</strong></p>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide_text">
<p>Review 3</p>
<p><strong>Blije klant</strong></p>
</div>
</div>
</div>
<div class="swiper-buttons__wrapper">
<div class="swiper-button-next">
<i class="shopicons shopicons-navigate-next"> </i>
</div>
<div class="swiper-button-prev">
<i class="shopicons shopicons-navigate-before"> </i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum leo at accumsan lobortis. Ut tempor est ut neque gravida aliquet. Curabitur accumsan viverra nunc, ac cursus magna laoreet ac. Integer mattis id metus sed tempor. Nam id luctus magna. Curabitur dapibus vulputate lorem sed laoreet.
<div class="container">
<div class="cols cols-stretch-vertical">
<div class="xs-12 sm-6">
<div class="stretch-vertical-height">
<h1>H1 title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum leo at accumsan
lobortis. Ut tempor est ut neque gravida aliquet. Curabitur accumsan viverra nunc, ac cursus
magna laoreet ac. Integer mattis id metus sed tempor. Nam id luctus magna. Curabitur dapibus
vulputate lorem sed laoreet.</p>
</div>
</div>
<div class="xs-12 sm-6">
<div class="stretch-vertical-height">
<img class="img-responsive" src="/media/buroleo_instagram1.jpg">
</div>
</div>
</div>
</div>
<div class="cols">
<div class="xsm-12 xs-12 sm-6 md-6 lg-6 mb-4">
<a class="card" href="/geboortekaartjes">
<img class="card-img" src="/media/buroleo_geboortekaartjes_v2.jpg"/>
<span class="card-btn button button-default">label</span>
</a>
</div>
<div class="xsm-12 xs-12 sm-6 md-6 lg-6 mb-4">
<a class="card" href="/geboortekaartjes">
<img class="card-img" src="/media/buroleo_geboortekaartjes_v2.jpg"/>
<span class="card-btn button button-default">label</span>
</a>
</div>
</div>
<div class="cols">
<div class="xsm-12 xs-12 sm-4 md-4 lg-4 mb-4">
<a class="card" href="#">
<img class="card-img" src="/media/buroleo_trends_foliedruk.jpg"/>
<span class="card-btn button button-default">label</span>
</a>
</div>
<div class="xsm-12 xs-12 sm-4 md-4 lg-4 mb-4">
<a class="card" href="#">
<img class="card-img" src="/media/buroleo_trends_foliedruk.jpg"/>
<span class="card-btn button button-default">label</span>
</a>
</div>
<div class="xsm-12 xs-12 sm-4 md-4 lg-4 mb-4">
<a class="card" href="#">
<img class="card-img" src="/media/buroleo_trends_foliedruk.jpg"/>
<span class="card-btn button button-default">label</span>
</a>
</div>
</div>
<div class="cols">
<div class="xsm-12 xs-12 sm-3 md-3 lg-3">
<a class="card" href="#">
<img class="card-img display-none display-sm-block" src="/media/buroleo_afbeeldingen_extras.jpg"/>
<span class="card-btn button button-default btn-full-width-mobile">label</span>
</a>
</div>
<div class="xsm-12 xs-12 sm-3 md-3 lg-3">
<a class="card" href="#">
<img class="card-img display-none display-sm-block" src="/media/buroleo_afbeeldingen_extras.jpg"/>
<span class="card-btn button button-default btn-full-width-mobile">label</span>
</a>
</div>
<div class="xsm-12 xs-12 sm-3 md-3 lg-3">
<a class="card" href="#">
<img class="card-img display-none display-sm-block" src="/media/buroleo_afbeeldingen_extras.jpg"/>
<span class="card-btn button button-default btn-full-width-mobile">label</span>
</a>
</div>
<div class="xsm-12 xs-12 sm-3 md-3 lg-3">
<a class="card" href="#">
<img class="card-img display-none display-sm-block" src="/media/buroleo_afbeeldingen_extras.jpg"/>
<span class="card-btn button button-default btn-full-width-mobile">label</span>
</a>
</div>
</div>
<div class="cols">
<div class="xs-4 xsm-4 sm-2 md-2 lg-2">
<a class="card" href="#">
<img class="card-img" src="/media/buroleo_instagram1.jpg"/>
</a>
</div>
<div class="xs-4 xsm-4 sm-2 md-2 lg-2">
<a class="card" href="#">
<img class="card-img" src="/media/buroleo_instagram1.jpg"/>
</a>
</div>
<div class="xs-4 xsm-4 sm-2 md-2 lg-2 display-none display-sm-block">
<a class="card" href="#">
<img class="card-img" src="/media/buroleo_instagram1.jpg"/>
</a>
</div>
<div class="xs-4 xsm-4 sm-2 md-2 lg-2">
<a class="card" href="#">
<img class="card-img" src="/media/buroleo_instagram1.jpg"/>
</a>
</div>
<div class="xs-4 xsm-4 sm-2 md-2 lg-2 display-none display-sm-block">
<a class="card" href="#">
<img class="card-img" src="/media/buroleo_instagram1.jpg"/>
</a>
</div>
<div class="xs-4 xsm-4 sm-2 md-2 lg-2 display-none display-sm-block">
<a class="card" href="#">
<img class="card-img" src="/media/buroleo_instagram1.jpg"/>
</a>
</div>
</div>
