<h1>Header 1</h1> <h2>Header 2</h2> <h3>Header 3</h3> <a href="#" target="_blank">Hyperlink</a> <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-1 with-arrow" href="#">button-1</a>
<a class="button button-2 with-arrow" href="#">button-2</a>
<a class="button button-3 with-arrow" href="#">button-3</a>
<a class="button button-4 with-arrow" href="#">button-4</a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis pretium.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis pretium.
<div class="bs-container-xxxl">
<div class="row">
<div class="col-12 col-md-6">
<h3>H3 header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor
urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et
massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque
rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis
pretium.</p>
</div>
<div class="col-12 col-md-6">
<h3>H3 header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor
urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et
massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque
rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis
pretium.</p>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis pretium.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis pretium.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis pretium.
<div class="bs-container-xxxl">
<div class="row">
<div class="col-12 col-md-4">
<h3>H3 header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor
urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et
massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque
rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis
pretium.</p>
</div>
<div class="col-12 col-md-4">
<h3>H3 header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor
urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et
massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque
rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis
pretium.</p>
</div>
<div class="col-12 col-md-4">
<h3>H3 header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor
urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et
massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque
rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis
pretium.</p>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa.
button
<div class="bs-container-xxxl">
<div class="card-split">
<div class="cols cols-eq-height remove-cols-spacing">
<div class="col-12 col-md-6 pr-5">
<div class="card-split-thumbnail">
<img class="card-split-img" loading="lazy" src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png"/>
</div>
</div>
<div class="col-12 col-md-6">
<h2 class="card-split-title">H2 titel</h2>
<p;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor
urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et
massa.</p>
<a class="button button-1 with-arrow" href="/">Button</a>
</div>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa.
button
<div class="bs-container-xxxl">
<div class="card-split">
<div class="cols cols-eq-height remove-cols-spacing">
<div class="col-12 col-md-6 order-md-1">
<div class="card-split-thumbnail">
<img class="card-split-img" loading="lazy" src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png"/></div>
</div>
<div class="col-12 col-md-6 pr-5">
<h2 class="card-split-title">H2 titel</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor
urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et
massa.</p>
<a class="button button-1 with-arrow" href="/">Button</a>
</div>
</div>
</div>
</div>
<div class="bs-container-xxxl">
<div class="row">
<div class="col-6">
<a class="card-category mx-0 mb-4" href="/">
<img alt="" class="card-category-img" loading="lazy" src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png"/>
<span class="card-category-btn button button-1 with-arrow d-lg-none">Button</span>
<span class="card-category-btn button button-1 with-arrow d-none d-lg-flex">Button</span>
</a>
</div>
<div class="col-6">
<a class="card-category mx-0 mb-4" href="/">
<img alt="" class="card-category-img" loading="lazy" src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png"/>
<span class="card-category-btn button button-1 with-arrow d-lg-none">Button</span>
<span class="card-category-btn button button-1 with-arrow d-none d-lg-flex">Button</span>
</div>
</div>
</div>
<div class="bs-container-xxxl">
<div class="card-category-wrapper">
<div class="row">
<div class="col-12 col-md-4">
<div class="card-category"><a href="/">
<img alt="" class="card-category-img" loading="lazy"
src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png"/>
</a> <a class="card-category-btn button button-1 with-arrow" href="/">Button</a>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card-category"><a href="/">
<img alt="" class="card-category-img" loading="lazy"
src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png"/>
</a> <a class="card-category-btn button button-1 with-arrow" href="/">Button</a>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card-category"><a href="/">
<img alt="" class="card-category-img" loading="lazy"
src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png"/>
</a> <a class="card-category-btn button button-1 with-arrow" href="/">Button</a>
</div>
</div>
</div>
</div>
</div>
<div class="bs-container-xxxl">
<div class="card-category-wrapper">
<div class="row">
<div class="col-12 col-md-3">
<div class="card-category">
<a href="/"><img alt="/" class="card-category-img" loading="lazy" src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png"/></a>
<a class="card-category-btn button button-1 with-arrow" href="/">Label</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="card-category">
<a href="/"><img alt="/" class="card-category-img" loading="lazy" src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png"/></a>
<a class="card-category-btn button button-1 with-arrow" href="/">Label</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="card-category">
<a href="/"><img alt="/" class="card-category-img" loading="lazy" src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png"/></a>
<a class="card-category-btn button button-1 with-arrow" href="/">Label</a>
</div>
</div>
<div class="col-12 col-md-3">
<div class="card-category">
<a href="/"><img alt="/" class="card-category-img" loading="lazy" src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png"/></a>
<a class="card-category-btn button button-1 with-arrow" href="/">Label</a>
</div>
</div>
</div>
</div>
</div>
<div class="bs-container-xxxl pb-4 py-lg-3"> <div class="row g-4"> <div class="col-12 col-md-6 col-lg-6"><a class="_card-item" href="/geboortekaartjes-jongen"><span class="_card-item-thumbnail"> <img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png" width="500" /> </span> <span class="_card-item-body"> <span class="_card-item-body-group"> <span class="_card-item-title">Geboortekaartjes jongen</span> <span class="_card-item-text d-none d-lg-block">Van hip tot stoer en klassiek</span> </span> <img alt="" class="_card-item-body-btn" loading="lazy" src="/media/arrow-button-1.svg" /> </span> </a></div> </div> </div>
<div class="bs-container-xxxl pb-4 py-lg-3"> <div class="row g-4"> <div class="col-12 col-md-6 col-lg-6"><a class="_card-item" href="/geboortekaartjes-jongen"><span class="_card-item-thumbnail"> <img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png" width="500" /> </span> <span class="_card-item-body"> <span class="_card-item-body-group"> <span class="_card-item-title">Geboortekaartjes jongen</span> <span class="_card-item-text d-none d-lg-block">Van hip tot stoer en klassiek</span> </span> <img alt="" class="_card-item-body-btn" loading="lazy" src="/media/arrow-button-1.svg" /> </span> </a></div> <div class="col-12 col-md-6 col-lg-6"><a class="_card-item" href="/geboortekaartjes-jongen"><span class="_card-item-thumbnail"> <img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png" width="500" /> </span> <span class="_card-item-body"> <span class="_card-item-body-group"> <span class="_card-item-title">Geboortekaartjes jongen</span> <span class="_card-item-text d-none d-lg-block">Van hip tot stoer en klassiek</span> </span> <img alt="" class="_card-item-body-btn" loading="lazy" src="/media/arrow-button-1.svg" /> </span> </a></div> </div> </div>
<div class="bs-container-xxxl pb-4 py-lg-3"> <div class="row g-4"> <div class="col-12 col-md-6 col-lg-4"><a class="_card-item" href="/geboortekaartjes-jongen"><span class="_card-item-thumbnail"> <img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png" width="500" /> </span> <span class="_card-item-body"> <span class="_card-item-body-group"> <span class="_card-item-title">Geboortekaartjes jongen</span> <span class="_card-item-text d-none d-lg-block">Van hip tot stoer en klassiek</span> </span> <img alt="" class="_card-item-body-btn" loading="lazy" src="/media/arrow-button-1.svg" /> </span> </a></div> <div class="col-12 col-md-6 col-lg-4"><a class="_card-item" href="/geboortekaartjes-jongen"><span class="_card-item-thumbnail"> <img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png" width="500" /> </span> <span class="_card-item-body"> <span class="_card-item-body-group"> <span class="_card-item-title">Geboortekaartjes jongen</span> <span class="_card-item-text d-none d-lg-block">Van hip tot stoer en klassiek</span> </span> <img alt="" class="_card-item-body-btn" loading="lazy" src="/media/arrow-button-1.svg" /> </span> </a></div> <div class="col-12 col-md-6 col-lg-4"><a class="_card-item" href="/geboortekaartjes-jongen"><span class="_card-item-thumbnail"> <img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png" width="500" /> </span> <span class="_card-item-body"> <span class="_card-item-body-group"> <span class="_card-item-title">Geboortekaartjes jongen</span> <span class="_card-item-text d-none d-lg-block">Van hip tot stoer en klassiek</span> </span> <img alt="" class="_card-item-body-btn" loading="lazy" src="/media/arrow-button-1.svg" /> </span> </a></div> </div> </div>
<div class="bs-container-xxxl pb-4 py-lg-5"> <div class="row g-4"> <div class="col-12 col-md-6 col-lg-4"><a class="_card-item" href="/geboortekaartjes-jongen"><span class="_card-item-thumbnail"> <img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png" width="500"> </span> <span class="_card-item-body"> <span class="_card-item-body-group"> <span class="_card-item-title">Geboortekaartjes jongen</span> <span class="_card-item-text d-none d-lg-block">Van hip tot stoer en klassiek</span> </span> <img alt="" class="_card-item-body-btn" loading="lazy" src="/media/arrow-button-1.svg"> </span> </a></div> <div class="col-12 col-md-6 col-lg-4"><a class="_card-item" href="/geboortekaartjes-jongen"><span class="_card-item-thumbnail"> <img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png" width="500"> </span> <span class="_card-item-body"> <span class="_card-item-body-group"> <span class="_card-item-title">Geboortekaartjes jongen</span> <span class="_card-item-text d-none d-lg-block">Van hip tot stoer en klassiek</span> </span> <img alt="" class="_card-item-body-btn" loading="lazy" src="/media/arrow-button-1.svg"> </span> </a></div> <div class="col-12 col-md-6 col-lg-4"><a class="_card-item" href="/geboortekaartjes-jongen"><span class="_card-item-thumbnail"> <img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png" width="500"> </span> <span class="_card-item-body"> <span class="_card-item-body-group"> <span class="_card-item-title">Geboortekaartjes jongen</span> <span class="_card-item-text d-none d-lg-block">Van hip tot stoer en klassiek</span> </span> <img alt="" class="_card-item-body-btn" loading="lazy" src="/media/arrow-button-1.svg"> </span> </a></div> <div class="col-12 col-md-6 col-lg-4"><a class="_card-item" href="/geboortekaartjes-jongen"><span class="_card-item-thumbnail"> <img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png" width="500"> </span> <span class="_card-item-body"> <span class="_card-item-body-group"> <span class="_card-item-title">Geboortekaartjes jongen</span> <span class="_card-item-text d-none d-lg-block">Van hip tot stoer en klassiek</span> </span> <img alt="" class="_card-item-body-btn" loading="lazy" src="/media/arrow-button-1.svg"> </span> </a></div> <div class="col-12 col-md-6 col-lg-4"><a class="_card-item" href="/geboortekaartjes-jongen"><span class="_card-item-thumbnail"> <img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png" width="500"> </span> <span class="_card-item-body"> <span class="_card-item-body-group"> <span class="_card-item-title">Geboortekaartjes jongen</span> <span class="_card-item-text d-none d-lg-block">Van hip tot stoer en klassiek</span> </span> <img alt="" class="_card-item-body-btn" loading="lazy" src="/media/arrow-button-1.svg"> </span> </a></div> <div class="col-12 col-md-6 col-lg-4"><a class="_card-item" href="/geboortekaartjes-jongen"><span class="_card-item-thumbnail"> <img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/Aangepast_Jongens500x500240322-HierBenIk_080.png" width="500"> </span> <span class="_card-item-body"> <span class="_card-item-body-group"> <span class="_card-item-title">Geboortekaartjes jongen</span> <span class="_card-item-text d-none d-lg-block">Van hip tot stoer en klassiek</span> </span> <img alt="" class="_card-item-body-btn" loading="lazy" src="/media/arrow-button-1.svg"> </span> </a></div> </div> </div>
<div class="home-container pb-5 py-lg-4"> <div class="bs-container-xxxl pb-4 py-lg-5"> <div class="row g-4"> <div class="col-12 col-md-6 col-lg-6"> <div class="_card-item"><a class="_card-item-thumbnail-blog" href="/geboortekaartjes-jongen"><img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/blog-image.png" width="500" /> </a> <div class="_card-item-body-blog"> <div class="_card-item-body-group"> <div class="_card-item-title"><a href="/geboortekaartjes-jongen">Trends in kinderkaartjes 2024</a></div> <div class="_card-item-text d-none d-lg-block">Wat is er toch veel keus! Wij hebben vijf trends voor je op een rij gezet.</div> <div class="_card-item-link"><a href="/">Lees meer ></a></div> </div> </div> </div> </div> </div> </div> </div>
<div class="home-container pb-5 py-lg-4"> <div class="bs-container-xxxl pb-4 py-lg-5"> <div class="row g-4"> <div class="col-12 col-md-6 col-lg-6"> <div class="_card-item"><a class="_card-item-thumbnail-blog" href="/geboortekaartjes-jongen"><img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/blog-image.png" width="500" /> </a> <div class="_card-item-body-blog"> <div class="_card-item-body-group"> <div class="_card-item-title"><a href="/geboortekaartjes-jongen">Trends in kinderkaartjes 2024</a></div> <div class="_card-item-text d-none d-lg-block">Wat is er toch veel keus! Wij hebben vijf trends voor je op een rij gezet.</div> <div class="_card-item-link"><a href="/">Lees meer ></a></div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-6"> <div class="_card-item"><a class="_card-item-thumbnail-blog" href="/geboortekaartjes-jongen"><img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/blog-image.png" width="500" /> </a> <div class="_card-item-body-blog"> <div class="_card-item-body-group"> <div class="_card-item-title"><a href="/geboortekaartjes-jongen">Ontdek nu de designs van Ron van Otterlo</a></div> <div class="_card-item-text d-none d-lg-block">Zijn stijl typeert zich als vrolijke en dierlijke designs. Neem een kijkje!</div> <div class="_card-item-link"><a href="/">Lees meer ></a></div> </div> </div> </div> </div> </div> </div> </div>
<div class="home-container pb-5 py-lg-4"> <div class="bs-container-xxxl pb-4 py-lg-5"> <div class="row g-4"> <div class="col-12 col-md-6 col-lg-4"> <div class="_card-item"><a class="_card-item-thumbnail-blog" href="/geboortekaartjes-jongen"><img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/blog-image.png" width="500" /> </a> <div class="_card-item-body-blog"> <div class="_card-item-body-group"> <div class="_card-item-title"><a href="/geboortekaartjes-jongen">Trends in kinderkaartjes 2024</a></div> <div class="_card-item-text d-none d-lg-block">Wat is er toch veel keus! Wij hebben vijf trends voor je op een rij gezet.</div> <div class="_card-item-link"><a href="/">Lees meer ></a></div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="_card-item"><a class="_card-item-thumbnail-blog" href="/geboortekaartjes-jongen"><img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/blog-image.png" width="500" /> </a> <div class="_card-item-body-blog"> <div class="_card-item-body-group"> <div class="_card-item-title"><a href="/geboortekaartjes-jongen">Ontdek nu de designs van Ron van Otterlo</a></div> <div class="_card-item-text d-none d-lg-block">Zijn stijl typeert zich als vrolijke en dierlijke designs. Neem een kijkje!</div> <div class="_card-item-link"><a href="/">Lees meer ></a></div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="_card-item"><a class="_card-item-thumbnail-blog" href="/geboortekaartjes-jongen"><img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/blog-image.png" width="500" /> </a> <div class="_card-item-body-blog"> <div class="_card-item-body-group"> <div class="_card-item-title"><a href="/geboortekaartjes-jongen">Trends in kinderkaartjes 2024</a></div> <div class="_card-item-text d-none d-lg-block">Wat is er toch veel keus! Wij hebben vijf trends voor je op een rij gezet.</div> <div class="_card-item-link"><a href="/">Lees meer ></a></div> </div> </div> </div> </div> </div> </div> </div>
<div class="home-container pb-5 py-lg-4"> <div class="bs-container-xxxl pb-4 py-lg-5"> <div class="row g-4"> <div class="col-12 col-md-6 col-lg-4"> <div class="_card-item"><a class="_card-item-thumbnail-blog" href="/geboortekaartjes-jongen"><img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/blog-image.png" width="500" /> </a> <div class="_card-item-body-blog"> <div class="_card-item-body-group"> <div class="_card-item-title"><a href="/geboortekaartjes-jongen">Trends in kinderkaartjes 2024</a></div> <div class="_card-item-text d-none d-lg-block">Wat is er toch veel keus! Wij hebben vijf trends voor je op een rij gezet.</div> <div class="_card-item-link"><a href="/">Lees meer ></a></div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="_card-item"><a class="_card-item-thumbnail-blog" href="/geboortekaartjes-jongen"><img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/blog-image.png" width="500" /> </a> <div class="_card-item-body-blog"> <div class="_card-item-body-group"> <div class="_card-item-title"><a href="/geboortekaartjes-jongen">Ontdek nu de designs van Ron van Otterlo</a></div> <div class="_card-item-text d-none d-lg-block">Zijn stijl typeert zich als vrolijke en dierlijke designs. Neem een kijkje!</div> <div class="_card-item-link"><a href="/">Lees meer ></a></div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="_card-item"><a class="_card-item-thumbnail-blog" href="/geboortekaartjes-jongen"><img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/blog-image.png" width="500" /> </a> <div class="_card-item-body-blog"> <div class="_card-item-body-group"> <div class="_card-item-title"><a href="/geboortekaartjes-jongen">Trends in kinderkaartjes 2024</a></div> <div class="_card-item-text d-none d-lg-block">Wat is er toch veel keus! Wij hebben vijf trends voor je op een rij gezet.</div> <div class="_card-item-link"><a href="/">Lees meer ></a></div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="_card-item"><a class="_card-item-thumbnail-blog" href="/geboortekaartjes-jongen"><img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/blog-image.png" width="500" /> </a> <div class="_card-item-body-blog"> <div class="_card-item-body-group"> <div class="_card-item-title"><a href="/geboortekaartjes-jongen">Ontdek nu de designs van Ron van Otterlo</a></div> <div class="_card-item-text d-none d-lg-block">Zijn stijl typeert zich als vrolijke en dierlijke designs. Neem een kijkje!</div> <div class="_card-item-link"><a href="/">Lees meer ></a></div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="_card-item"><a class="_card-item-thumbnail-blog" href="/geboortekaartjes-jongen"><img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/blog-image.png" width="500" /> </a> <div class="_card-item-body-blog"> <div class="_card-item-body-group"> <div class="_card-item-title"><a href="/geboortekaartjes-jongen">Trends in kinderkaartjes 2024</a></div> <div class="_card-item-text d-none d-lg-block">Wat is er toch veel keus! Wij hebben vijf trends voor je op een rij gezet.</div> <div class="_card-item-link"><a href="/">Lees meer ></a></div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="_card-item"><a class="_card-item-thumbnail-blog" href="/geboortekaartjes-jongen"><img alt="" class="_card-item-img" height="500" loading="lazy" src="/media/blog-image.png" width="500" /> </a> <div class="_card-item-body-blog"> <div class="_card-item-body-group"> <div class="_card-item-title"><a href="/geboortekaartjes-jongen">Ontdek nu de designs van Ron van Otterlo</a></div> <div class="_card-item-text d-none d-lg-block">Zijn stijl typeert zich als vrolijke en dierlijke designs. Neem een kijkje!</div> <div class="_card-item-link"><a href="/">Lees meer ></a></div> </div> </div> </div> </div> </div> </div> </div>
<div class="home-container pb-5 pt-2 d-none d-lg-block">
<div class="bs-container-xxxl pt-0 pt-lg-5" id="trends-block">
<!-- Tablet and desktop -->
<h2 class="h2">Categorieën</h2>
<div class="row d-none d-md-flex">
<div class="col-lg-3 card-category mb-4"><a href="/geboortekaartjes/foliedruk"><img alt="" class="card-category-img" height="354" loading="lazy" src="/media/Ingezoomd_Foliedruk240322-HierBenIk_455.png" width="354" /></a> <span class="card-category-label"><a href="/geboortekaartjes/foliedruk">Foliedruk</a></span></div>
<div class="col-lg-3 card-category mb-4"><a href="/geboortekaartjes-dieren"><img alt="" class="card-category-img" height="500" loading="lazy" src="/media/Dieren_alle_geboortekaartjes_desktop.png" width="500" /></a> <span class="card-category-label"><a href="/geboortekaartjes-dieren">Dieren</a></span></div>
<div class="col-lg-3 card-category mb-4"><a href="/geboortekaartjes/aparte-speciale-vorm"><img alt="" class="card-category-img" height="413" loading="lazy" src="/media/Ingezoomd_Bijzonderevorm240322-HierBenIk_381.png" width="414" /> </a><span class="card-category-label"><a href="/geboortekaartjes/aparte-speciale-vorm">Bijzondere vormen</a></span></div>
<div class="col-lg-3 card-category mb-4"><a href="/geboortekaartje-tweede-kindje"><img alt="" class="card-category-img" height="413" loading="lazy" src="/media/Ingezoomd_2dekindje240322-HierBenIk_245.png" width="414" /> </a><span class="card-category-label"><a href="/geboortekaartje-tweede-kindje">2e kindje</a></span></div>
</div>
</div>
</div>
<!-- end tablet and desktop --><!-- Alleen mobiel -->
<p><a name="alle mogelijkheden"></a></p>
<div class="bs-container-xxxl container-1400px" id="trends-block">
<div class="dropdown d-block d-lg-none">
<button class="dropdown-toggle" id="categoryDropdownBtn">Categorieën</button>
<div class="dropdown-content" id="categoryDropdownContent">
<div class="row py-3">
<div class="col-12"><a class="card card-horizontal" href="/geboortekaartjes/foliedruk"><img alt="" class="card-img" src="/media/Dropdown_jongens_Foliedruk240322-HierBenIk_455kopie.png" /> <span class="card-text-wrapper px-3 py-2 p-md-4"> <span class="card-title">Foliedruk</span></span> </a></div>
<div class="col-12"><a class="card card-horizontal" href="/geboortekaartjes-dieren"><img alt="" class="card-img" height="77" src="/media/DropdownDieren240322-HierBenIk_086kopie.png" width="117" /> <span class="card-text-wrapper px-3 py-2 p-md-4"> <span class="card-title">Dieren</span></span> </a></div>
<div class="col-12"><a class="card card-horizontal" href="/geboortekaartjes/aparte-speciale-vorm"><img alt="" class="card-img" height="77" src="/media/Dropwdown_Bijzondere_vorm240322-HierBenIk_381kopie.png" width="117" /> <span class="card-text-wrapper px-3 py-2 p-md-4"> <span class="card-title">Bijzondere vormen</span></span> </a></div>
<div class="col-12"><a class="card card-horizontal" href="/geboortekaartje-tweede-kindje"><img alt="" class="card-img" height="77" src="/media/Dropwdown_2dekindje240322-HierBenIk_245kopie1.png" width="117" /> <span class="card-text-wrapper px-3 py-2 p-md-4"> <span class="card-title">2e kindje</span></span> </a></div>
</div>
</div>
<!-- End mobiele dropdown -->
</div>
</div>
<div class="cat-dropdown-open d-block d-lg-none">
<!-- Als de dropdown open is, worden de kaarten verder naar beneden gelegd zodat ze niet in de geopende dropdown vallen. -->
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var dropdownBtn = document.getElementById("categoryDropdownBtn");
var dropdownContent = document.getElementById("categoryDropdownContent");
var catDropdownOpen = document.querySelector(".cat-dropdown-open");
dropdownBtn.addEventListener("click", function() {
dropdownContent.style.display = dropdownContent.style.display === "block" ? "none" : "block";
// Add padding/margin to cat-dropdown-open when dropdown is open
if (dropdownContent.style.display === "block") {
catDropdownOpen.style.marginBottom = dropdownContent.clientHeight + 'px'; // Adjust for padding if needed
} else {
catDropdownOpen.style.marginBottom = 0;
}
});
document.addEventListener("click", function(event) {
if (!dropdownContent.contains(event.target) && event.target !== dropdownBtn) {
dropdownContent.style.display = "none";
catDropdownOpen.style.marginBottom = 0; // Reset margin when dropdown is closed
}
});
});
</script>
