styleguide

Kleuren

#eae1d8 #dcccbf #c9958a #ae887b #684843

Typografie

Headers

  • <h1>Header 1</h1>
  • <h2>Header 2</h2>
  • <h3>Header 3</h3>
  • <a href="#" target="_blank">Hyperlink</a>

Paragraphs

<p>Paragraph</p>

  1. font-family: 'Montserrat',sans-serif;
  2. font-weight: 400
  3. font-size: 14px
  4. color: #000000

Paragraph

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.

Buttons

button default button primary button success
<a class="button button-default mt-3 shadow-none" href="#">button default</a>
<a class="btn btn-primary mt-3 shadow-none" href="#">button primary</a>
<a class="btn btn-success mt-3 shadow-none" href="#">button success</a>
            

2 Tekstkolommen

H3 header

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.

H3 header

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="container">
   <div class="row">
      <div class="col-sm-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-sm-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>
            

3 Tekstkolommen

H3 header

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.

H3 header

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.

H3 header

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="container">
   <div class="row">
      <div class="col-sm-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-sm-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-sm-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>
            

USPS

  • usp item
  • usp item
  • usp item
  • usp-item
<div class="bg-beige mb-4">
    <div class="container text-center">
        <ul class="usp">
            <li class="usp-item"><span>usp item</span></li>
            <li class="usp-item d-none d-md-block"><span>usp item</span></li>
            <li class="usp-item d-none d-md-block"><span>usp item</span></li>
            <li class="usp-item d-none d-md-block"><span>usp-item</span></li>
        </ul>
    </div>
</div>

Bullet points

  • Bullet point 1
  • Bullet point 2
  • Bullet point 3
  • Bullet point 4
<ul class="bullets">
    <li><span>Bullet point 1</span></li>
    <li><span>Bullet point 2</span></li>
    <li><span>Bullet point 3</span></li>
    <li><span>Bullet point 4</span></li>
</ul>

Afbeelding met tekst rechts

H3 header

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="container">
   <div class="row">
      <div class="col-sm-6 mb-3"><a class="card" href="#"><img class="card-img aspect-ratio-1" loading="lazy" src="/media/foliekaartjes.jpg" /> </a></div>
      <div class="col-sm-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>

Afbeelding met tekst links

H3 header

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="container">
   <div class="row">
      <div class="col-sm-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-sm-6 mb-3"><a class="card" href="#"><img class="card-img aspect-ratio-1" loading="lazy" src="/media/foliekaartjes.jpg" /> </a></div>
   </div>
</div>
            

4 afbeeldingen met tekst onder

Label

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.

Label

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.

Label

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.

Label

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.

<div class="container">
<div class="row">
   <div class="col-sm-6 col-md-3 mb-3 mb-md-5">
      <a class="card" href="#">
      <img class="card-img aspect-ratio-1" loading="lazy" src="/media/foliekaartjes.jpg" /> 
      <span class="card-label min-width-auto">Label</span> 
      </a>
      <div class="text-block-2 d-none d-md-block">
         <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>
      </div>
   </div>
   <div class="col-sm-6 col-md-3 mb-3 mb-md-5">
      <a class="card" href="#">
      <img class="card-img aspect-ratio-1" loading="lazy" src="/media/foliekaartjes.jpg" /> 
      <span class="card-label min-width-auto">Label</span> 
      </a>
      <div class="text-block-2 d-none d-md-block">
         <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>
      </div>
   </div>
   <div class="col-sm-6 col-md-3 mb-md-5">
      <a class="card" href="#">
      <img class="card-img aspect-ratio-1" loading="lazy" src="/media/foliekaartjes.jpg" /> 
      <span class="card-label min-width-auto">Label</span> 
      </a>
      <div class="text-block-2 d-none d-md-block">
         <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>
      </div>
   </div>
   <div class="col-sm-6 col-md-3 mb-md-5">
      <a class="card" href="#">
      <img class="card-img aspect-ratio-1" loading="lazy" src="/media/foliekaartjes.jpg" /> 
      <span class="card-label min-width-auto">Label</span>
      </a>
      <div class="text-block-2 d-none d-md-block">
         <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>
      </div>
   </div>
</div>
</div>

1 Afbeelding met label

<div class="container">
   <div class="row">
      <div class="col-6 mb-5">
         <a class="card" href="#">
         <img class="card-img aspect-ratio-1" loading="lazy" src="/media/trouwkaarten.jpg" /> 
         <span class="card-label">Label</span> 
         </a>
      </div>
   </div>
</div>

2 Afbeeldingen met label

<div class="container">
   <div class="row">
      <div class="col-6 mb-5">
         <a class="card" href="#">
         <img class="card-img aspect-ratio-1" loading="lazy" src="/media/trouwkaarten.jpg" />
         <span class="card-label">Label</span> 
         </a>
      </div>
      <div class="col-6 mb-5">
         <a class="card" href="#">
         <img class="card-img aspect-ratio-1" loading="lazy" src="/media/trouwkaarten.jpg" /> 
         <span class="card-label">Label</span>
         </a>
      </div>
   </div>
</div>

3 Afbeeldingen met label

<div class="container">
   <div class="row">
       <div class="col-6 col-md-4 mb-5">
         <a class="card" href="#">
         <img class="card-img aspect-ratio-1" loading="lazy" src="/media/trouwkaarten.jpg" /> 
         <span class="card-label">Label</span> 
         </a>
      </div>
      <div class="col-6 col-md-4 mb-5">
         <a class="card" href="#">
         <img class="card-img aspect-ratio-1" loading="lazy" src="/media/trouwkaarten.jpg" /> 
         <span class="card-label">Label</span> 
         </a>
      </div>
      <div class="col-6 col-md-4 mb-5">
         <a class="card" href="#">
         <img class="card-img aspect-ratio-1" loading="lazy" src="/media/trouwkaarten.jpg" /> 
         <span class="card-label">Label</span> 
         </a>
      </div>
   </div>
</div>

4 Afbeeldingen met label

<div class="container">
   <div class="row">
      <div class="col-6 col-md-3 mb-5">
         <a class="card" href="#">
         <img class="card-img aspect-ratio-1" loading="lazy" src="/media/trouwkaarten.jpg" /> 
         <span class="card-label min-width-auto">Label</span>
         </a>
      </div>
      <div class="col-6 col-md-3 mb-5">
         <a class="card" href="#">
         <img class="card-img aspect-ratio-1" loading="lazy" src="/media/trouwkaarten.jpg" /> 
         <span class="card-label min-width-auto">Label</span>
         </a>
      </div>
      <div class="col-6 col-md-3 mb-5">
         <a class="card" href="#">
         <img class="card-img aspect-ratio-1" loading="lazy" src="/media/trouwkaarten.jpg" /> 
         <span class="card-label min-width-auto">Label</span>
         </a>
      </div>
      <div class="col-6 col-md-3 mb-5">
         <a class="card" href="#">
         <img class="card-img aspect-ratio-1" loading="lazy" src="/media/trouwkaarten.jpg" /> 
         <span class="card-label min-width-auto">Label</span>
         </a>
      </div>
   </div>
</div>

Afbeeldingen Instagram

<div class="container d-none d-md-block">
    <div class="row">
        <div class="col">
            <a class="card" href="#">
                <img class="card-img aspect-ratio-1" src="/media/instagram-1.jpg"/>
            </a>
        </div>
        <div class="col">
            <a class="card" href="#">
                <img class="card-img aspect-ratio-1" src="/media/instagram-1.jpg"/>
            </a>
        </div>
        <div class="col">
            <a class="card" href="#">
                <img class="card-img aspect-ratio-1" src="/media/instagram-1.jpg"/>
            </a>
        </div>
        <div class="col">
            <a class="card" href="#">
                <img class="card-img aspect-ratio-1" src="/media/instagram-1.jpg"/>
            </a>
        </div>
        <div class="col">
            <a class="card" href="#">
                <img class="card-img aspect-ratio-1" src="/media/instagram-1.jpg"/>
            </a>
        </div>
        <div class="col">
            <a class="card" href="#">
                <img class="card-img aspect-ratio-1" src="/media/instagram-1.jpg"/>
            </a>
        </div>
    </div>
</div>

PDP - productinformatie

Tent geboortekaartjes zijn exclusief en super origineel!

Dit kaartje heeft een kaki linnen look print en heeft goudfolie op de voorkant. De binnenkant is in de kleur van de tekst gemaakt en de donkere kleur maakt het kaartje heel stijlvol. De kaart op de voorbeeld foto is gedrukt op coated karton. Wil je wat rustigere kleuren, dan is linnen papier ook erg mooi bij deze print! Heb je hulp nodig bij je design? Stuur me een berichtje en ik kijk kosteloos me je mee!

Je kunt dit geboortekaartje compleet maken met een bijpassend geboortebord en/of bijpassende sluitstickers!

  • Formaat tentkaart staand A6: 10,5 cm x 14,8 cm
  • Ongevouwen 36,4 cm x 10,5 cm
  • Eenzijdig coated karton (300 grams) of linnen papier (300 grams)
  • Foliedruk mogelijk
  • Deze tentkaarten kunnen NIET rechtstreeks worden verzonden
  • Eindbestellingen worden ongevouwen verzonden in een blanco verzenddoos
  • Levertijd is 3–5 werkdagen

Teun

 <p><strong>Tent geboortekaartjes zijn exclusief en super origineel!</strong></p>
  <p> Dit kaartje heeft een kaki linnen look print en heeft goudfolie op de voorkant. De
binnenkant is in de kleur van de tekst gemaakt en de donkere kleur maakt het kaartje
heel stijlvol. De kaart op de voorbeeld foto is gedrukt op coated karton. Wil je wat
rustigere kleuren, dan is linnen papier ook erg mooi bij deze print! Heb je hulp nodig bij
je design? Stuur me een berichtje en ik kijk kosteloos me je mee!
  </p>
  <p>
    Je kunt dit geboortekaartje compleet maken met een <a href="/geboortebord-raamsticker">bijpassend geboortebord</a> en/of
<a href="/sluitzegel-op-maat">bijpassende sluitstickers</a>!
  </p>

  <ul class="bullets">
    <li>Formaat tentkaart staand A6: 10,5 cm x 14,8 cm</li>
    <li>Ongevouwen 36,4 cm x 10,5 cm</li>
    <li> Eenzijdig coated karton (300 grams) of linnen papier (300 grams)</li>
    <li>Foliedruk mogelijk</li>
    <li>Deze tentkaarten kunnen <u>NIET</u> rechtstreeks worden verzonden</li>
    <li>Eindbestellingen worden ongevouwen verzonden in een blanco verzenddoos</li>
    <li>Levertijd is 3–5 werkdagen</li>
  </ul>

  <p>Teun</p>