Styleguide

styleguide

Kleuren

#D9F4F7 #B7DFE3 #79C4C7 #EB5E5D #FFFFFF #999999 #F2C2B3 #F8E9E0 #B99897 #D1DFE2 #EBEAE5 #F4E4DD #F9C268

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: 'Muli', sans-serif
  2. font-weight: 300
  3. font-size: 1em
  4. color: #6F6F6E;

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 primary button default button success
<a class="button button-primary" href="#">button primary</a>
<a class="button button-default" href="#">button default</a>
<a class="button button-success" href="#">button success</a>
            

Tekstblok

Persoonlijke service en snelle levering

Wij leveren mooie kaarten voor speciale gebeurtenissen in het leven. 
Onze service is persoonlijk, zorgvuldig en gericht is op jouw gemak, wensen en tevredenheid.

Bestel je op werkdagen voor 18.00 uur dan produceren we nog dezelfde dag!

Of het geboortekaartjes, trouwkaarten of rouwkaartjes zijn, je wil ze zo snel mogelijk in huis hebben.
Probeer daarom op werkdagen voor 18.00 uur te bestellen, dan gaan de geboortekaartjes dezelfde avond nog in productie!

<div class="container">
   <div class="cols">
      <div class="xs-12 sm-12 md-12 lg-12">
         <h3 class="h1 text-center" style="color:#a37c7b;">Persoonlijke service en snelle levering</h3>
         <p style="text-align: center;">Wij leveren mooie kaarten voor speciale gebeurtenissen in het leven.&nbsp;<br />
            Onze service is persoonlijk, zorgvuldig en gericht is op jouw gemak, wensen en tevredenheid.
         </p>
         <h3 class="h1 text-center" style="color:#a37c7b;">Bestel je op werkdagen voor 18.00 uur dan produceren we nog dezelfde dag!</h3>
         <p style="text-align: center;">Of het geboortekaartjes, trouwkaarten of rouwkaartjes zijn, je wil ze zo snel mogelijk in huis hebben.<br />
            Probeer daarom op werkdagen voor 18.00 uur te bestellen, dan gaan de geboortekaartjes dezelfde avond nog in productie!
         </p>
      </div>
   </div>
            

2 Tekstblokken

Persoonlijke service en snelle levering

Wij leveren mooie kaarten voor speciale gebeurtenissen in het leven. 
Onze service is persoonlijk, zorgvuldig en gericht is op jouw gemak, wensen en tevredenheid.

Bestel je op werkdagen voor 18.00 uur dan produceren we nog dezelfde dag!

Of het geboortekaartjes, trouwkaarten of rouwkaartjes zijn, je wil ze zo snel mogelijk in huis hebben.
Probeer daarom op werkdagen voor 18.00 uur te bestellen, dan gaan de geboortekaartjes dezelfde avond nog in productie!

Onze klantenservice is beschikbaar van maandag tot en met vrijdag

Onze klantenservice doet er alles aan om jou als klant snel en goed op weg te helpen.
We staan paraat om al jouw vragen te beantwoorden en je te ondersteunen.
Heb je vragen of wensen over het functioneren van de editor, verzenden, bestellingen of noem maar op, we zijn telefonisch beschikbaar
van maandag tot en met vrijdag, van 09.00 tot 20.00 uur.

Speciale wens?

Wij vinden het leuk en ook een uitdaging om een kaart te creëren die helemaal voldoet aan jouw wensen.
Heb je een speciale wens voor je kaart of mis je een illustratie in onze editor, neem gerust contact met ons op. Wij maken ontwerp aanpassingen zonder daar extra kosten voor te berekenen.

<div class="container">
<div class="cols">
<div class="xs-12 sm-6 md-6 lg-6">
<h3 class="h1 text-center" style="color:#a37c7b;">Persoonlijke service en snelle levering</h3>

<p style="text-align: center;">Wij leveren mooie kaarten voor speciale gebeurtenissen in het leven.&nbsp;<br />
Onze service is persoonlijk, zorgvuldig en gericht is op jouw gemak, wensen en tevredenheid.</p>

<h3 class="h1 text-center" style="color:#a37c7b;">Bestel je op werkdagen voor 18.00 uur dan produceren we nog dezelfde dag!</h3>

<p style="text-align: center;">Of het geboortekaartjes, trouwkaarten of rouwkaartjes zijn, je wil ze zo snel mogelijk in huis hebben.<br />
Probeer daarom op werkdagen voor 18.00 uur te bestellen, dan gaan de geboortekaartjes dezelfde avond nog in productie!</p>
  </div>

<div class="xs-12 sm-6 md-6 lg-6">
<h3 class="h1 text-center" style="color:#a37c7b;">Onze klantenservice is beschikbaar van maandag tot en met vrijdag</h3>

<p style="text-align: center;">Onze klantenservice doet er alles aan om jou als klant snel en goed op weg te helpen.<br />
We staan&nbsp;paraat om al jouw vragen te beantwoorden en je te ondersteunen.<br />
Heb je vragen of wensen over het functioneren van de editor, verzenden, bestellingen of noem maar op,&nbsp;we zijn telefonisch beschikbaar<br />
van maandag tot en met vrijdag, van 09.00 tot 20.00 uur.</p>
<h3 class="h1 text-center" style="color:#a37c7b;">Speciale wens?</h3>

<p style="text-align: center;">Wij vinden het leuk en ook een uitdaging om een kaart te cre&euml;ren die helemaal voldoet aan jouw wensen.<br />
Heb je een speciale wens voor je kaart of mis je een illustratie in onze editor, neem gerust contact met ons op. Wij maken ontwerp aanpassingen zonder daar extra kosten voor te berekenen.</p>
</div>
</div>
</div>
            

2 Afbeeldingen met label

<div class="cols">
    <div class="xs-12 xsm-6">
        <a class="thumbnail thumbnail-fluid" href="#">
            <img  class="img-responsive img-center" src="/media/trouwen.jpg"/>
            <span class="thumbnail-footer">Label</span>
        </a>
    </div>

    <div class="xs-12 xsm-6">
        <a class="thumbnail thumbnail-fluid thumbnail-medium" href="#">
            <img class="img-responsive img-center" src="/media/trouwen.jpg"/>
            <span class="thumbnail-footer">Label</span>
        </a>
    </div>
</div>
            

3 Afbeeldingen met label

<div class="cols">
    <div class="xs-6 sm-4">
        <a class="thumbnail thumbnail-fluid thumbnail-medium" href="#">
            <img class="img-responsive img-center" src="/media/rouw.jpg"/>
            <span class="thumbnail-footer">Label</span>
        </a>
    </div>

    <div class="xs-6 sm-4">
        <a class="thumbnail thumbnail-fluid thumbnail-medium" href="#">
            <img class="img-responsive img-center" src="/media/rouw.jpg"/>
            <span class="thumbnail-footer">Label</span>
        </a>
    </div>

    <div class="xs-6 sm-4">
        <a class="thumbnail thumbnail-fluid thumbnail-medium" href="#">
            <img class="img-responsive img-center" src="/media/rouw.jpg"/>
            <span class="thumbnail-footer">Label</span>
        </a>
    </div>
</div>
            

4 Afbeeldingen met label

<div class="cols">
    <div class="xs-6 sm-3">
        <a class="thumbnail thumbnail-fluid" href="#">
            <img class="img-responsive img-center" src="/media/2-site-foliedruk-clipje-bewerkt-klein-goed-2.jpg"/>
            <span class="thumbnail-footer">Label</span>
        </a>
    </div>

    <div class="xs-6 sm-3">
        <a class="thumbnail thumbnail-fluid" href="#">
            <img class="img-responsive img-center" src="/media/2-site-foliedruk-clipje-bewerkt-klein-goed-2.jpg"/>
            <span class="thumbnail-footer">Label</span>
        </a>
    </div>

    <div class="xs-6 sm-3">
        <a class="thumbnail thumbnail-fluid" href="#">
            <img class="img-responsive img-center" src="/media/2-site-foliedruk-clipje-bewerkt-klein-goed-2.jpg"/>
            <span class="thumbnail-footer">Label</span>
        </a>
    </div>

    <div class="xs-6 sm-3">
        <a class="thumbnail thumbnail-fluid" href="#">
            <img class="img-responsive img-center" src="/media/2-site-foliedruk-clipje-bewerkt-klein-goed-2.jpg"/>
            <span class="thumbnail-footer">Label</span>
        </a>
    </div>
</div>
            

5 Afbeeldingen met label

<div class="cols">
    <div class="xs-12 sm-15">
        <a class="thumbnail thumbnail-fluid" href="#">
            <img alt="Enveloppen" class="img-responsive img-center" src="/media/site-enveloppen-bewerkt-def-kleinst.jpg"/>
            <span class="thumbnail-footer">Label</span>
        </a>
    </div>

    <div class="xs-12 sm-15">
        <a class="thumbnail thumbnail-fluid" href="#">
            <img alt="Enveloppen" class="img-responsive img-center" src="/media/site-enveloppen-bewerkt-def-kleinst.jpg"/>
            <span class="thumbnail-footer">Label</span>
        </a>
    </div>

    <div class="xs-12 sm-15">
        <a class="thumbnail thumbnail-fluid" href="#">
            <img alt="Enveloppen" class="img-responsive img-center" src="/media/site-enveloppen-bewerkt-def-kleinst.jpg"/>
            <span class="thumbnail-footer">Label</span>
        </a>
    </div>

    <div class="xs-12 sm-15">
        <a class="thumbnail thumbnail-fluid" href="#">
            <img alt="Enveloppen" class="img-responsive img-center" src="/media/site-enveloppen-bewerkt-def-kleinst.jpg"/>
            <span class="thumbnail-footer">Label</span>
        </a>
    </div>

    <div class="xs-12 sm-15">
        <a class="thumbnail thumbnail-fluid" href="#">
            <img alt="Enveloppen" class="img-responsive img-center" src="/media/site-enveloppen-bewerkt-def-kleinst.jpg"/>
            <span class="thumbnail-footer">Label</span>
        </a>
    </div>
</div>
            

7 Afbeeldingen in cirkel met label

<div class="cols">
    <div class="xs-6 sm-17">
        <a class="thumbnail thumbnail-circle" href="#">
            <span class="thumbnail-img beige">
                <img class="img-responsive img-center" src="/media/1-illustratie-prijzen.png"/>
            </span>
            <span class="thumbnail-footer">Label</span>
        </a>
    </div>

   <div class="xs-6 sm-17">
        <a class="thumbnail thumbnail-circle" href="#">
            <span class="thumbnail-img yellow">
                <img class="img-responsive img-center" src="/media/1-illustratie-prijzen.png"/>
            </span>
            <span class="thumbnail-footer">Label</span>
        </a>
    </div>

    <div class="xs-6 sm-17">
        <a class="thumbnail thumbnail-circle" href="#">
            <span class="thumbnail-img green">
                <img class="img-responsive img-center" src="/media/1-illustratie-prijzen.png"/>
            </span>
            <span class="thumbnail-footer">Label</span>
        </a>
    </div>

    <div class="xs-6 sm-17">
        <a class="thumbnail thumbnail-circle" href="#">
            <span class="thumbnail-img beige">
                <img class="img-responsive img-center" src="/media/1-illustratie-prijzen.png"/>
            </span>
            <span class="thumbnail-footer">Label</span>
        </a>
    </div>

    <div class="xs-6 sm-17">
        <a class="thumbnail thumbnail-circle" href="#">
            <span class="thumbnail-img yellow">
                <img class="img-responsive img-center" src="/media/1-illustratie-prijzen.png"/>
            </span>
            <span class="thumbnail-footer">Label</span>
        </a>
    </div>

    <div class="xs-6 sm-17">
        <a class="thumbnail thumbnail-circle" href="#">
            <span class="thumbnail-img green">
                <img class="img-responsive img-center" src="/media/1-illustratie-prijzen.png"/>
            </span>
            <span class="thumbnail-footer">Label</span>
        </a>
    </div>

    <div class="xs-6 sm-17">
        <a class="thumbnail thumbnail-circle" href="#">
            <span class="thumbnail-img beige">
                <img class="img-responsive img-center" src="/media/1-illustratie-prijzen.png"/>
            </span>
            <span class="thumbnail-footer">Label</span>
        </a>
    </div>
</div>