home > Styleguide

Kleuren

#6e7277 #50341e #4e5c2c #9aa6a5 #a28f79

#706f6f #111111 #54666b; #736860; #fafafa;

Buttons

<a class="button button-success" href="#">Button success</a>

Typografie

Header 1

Header 2

Header 3

Header 4

Paragraph

Hyperlink

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<p>Paragraph</p>
<a href="#" target="_blank">Hyperlink</a>

Paragraaf

font-family: 'Poppins', sans-serif
font-weight: 300
font-size: .9em
color: #000000

Marzipan dessert cupcake jujubes pastry gingerbread. Sesame snaps halvah donut jelly beans liquorice donut dessert cake. Dessert cheesecake marshmallow chocolate bar cheesecake. Cotton candy oat cake jelly-o liquorice sugar plum fruitcake sugar plum danish. Bonbon halvah pudding pie jelly-o topping chocolate cake.

Tekstkolommen

Dragée fruitcake cake halvah sugar plum sesame snaps chupa chups biscuit sugar plum. Candy canes pastry caramels cheesecake dragée. Bonbon cake wafer cake lemon drops cupcake brownie candy. Candy canes jujubes cotton candy liquorice lollipop marzipan. Macaroon cake halvah gingerbread chocolate cake. Halvah tart danish chupa chups marshmallow sweet. Pie sweet bear claw topping pastry cheesecake. Danish cupcake jelly dessert.

Danish gingerbread tiramisu cotton candy. Chocolate chocolate bar macaroon donut biscuit soufflé sweet lemon drops fruitcake. Apple pie dessert marzipan toffee liquorice cheesecake cotton candy marshmallow. Dessert lollipop marzipan candy canes marzipan. Biscuit croissant candy pastry lemon drops pastry lollipop. Muffin cheesecake pudding gingerbread apple pie croissant gummies cheesecake.

<div class="container">
   <div class="cols">
      <div class="xs-6">
         <p> Text </p>
      </div>
      <div class="xs-6">
         <p> Text </p>
      </div>
   </div>
</div>

Tekstkolommen gelijke hoogte

Biscuit croissant candy pastry lemon drops pastry lollipop. Muffin cheesecake pudding gingerbread apple pie croissant gummies cheesecake

<div class="container">
   <div class="cols cols-stretch-vertical">
      <div class="xs-6">
         <div class="box stretch-vertical-height"> Text </div>
      </div>
      <div class="xs-6">
         <div class="box stretch-vertical-height"> Text </div>
      </div>
   </div>
</div>

Hoofdcategorieën

Geboortekaartjes

<div class="container main-categories">
    <div class="main-categories__wrapper">
        <div class="main-categories__item">
            <a href="#">
                <img alt="" class="img-responsive" src="/media/Lente2018.png" >
                <div class="main-categories__button"><h3>Titel</h3></div>
            </a>
        </div>
        <div class="main-categories__item">
            <a href="#">
                <img alt="" class="img-responsive" src="/media/Lente2018.png" >
                <div class="main-categories__button"><h3>Titel</h3></div>
            </a>
        </div>
        <div class="main-categories__item">
            <a href="#">
                <img alt="" class="img-responsive" src="/media/Lente2018.png" >
                <div class="main-categories__button"><h3>Titel</h3></div>
            </a>
        </div>
    </div>
</div>

Content 3 kolommen

Trends geboortekaartjes

Cupcake donut tart marzipan tart. Cheesecake topping halvah. Gingerbread cake toffee topping sugar plum jelly dessert. Marshmallow icing candy canes gingerbread cheesecake. Fruitcake lollipop jelly-o chocolate pudding. Pastry cotton candy halvah halvah.
Cupcake donut tart marzipan tart. Cheesecake topping halvah. Gingerbread cake toffee topping sugar plum jelly dessert. Marshmallow icing candy canes gingerbread cheesecake. Fruitcake lollipop jelly-o chocolate pudding. Pastry cotton candy halvah halvah.

Trends geboortekaartjes

 <div class="flex-content-grid">
    <div class="row">
        <div class="column">
            <div class="column__content">
                <h4>Trends geboortekaartjes</h4>
                <img alt="" class="img-responsive" src="/media/Lente2018.png" >
                <p>Text</p>
            </div>

            <div class="column__content">
                <h4>Trends geboortekaartjes</h4>
                <img alt="" class="img-responsive" src="/media/Lente2018.png" >
                <p>Text<br>
                Text</p>
            </div>
        </div>

        <div class="column">
            <div class="column__content">
                <h4>Trends geboortekaartjes</h4>
                <img alt="" class="img-responsive" src="/media/Lente2018.png" >
                <p>Text</p>
                <p>Text</p>
            </div>

            <div class="column__content">
                <h4>Trends geboortekaartjes</h4>
                <img alt="" class="img-responsive" src="/media/Lente2018.png" >
                <p>Text</p>
            </div>
        </div>

        <div class="column">
            <div class="column__content">
                <h4>Trends geboortekaartjes</h4>
                <img alt="" class="img-responsive" src="/media/Lente2018.png" >
                <p>Text</p>
            </div>

            <div class="column__content">
                <h4>Trends geboortekaartjes</h4>
                <img alt="" class="img-responsive" src="/media/Lente2018.png" >
                <p>Text<br>
                Text</p>
            </div>
        </div>
    </div>
</div>

Twee afbeeldingen met button

BUTTON

<div class="container">
    <div class="cols sm-cols-spacing">
      <div class="xs-12 sm-6 md-6">
        <div class="card mb-3">
          <a href="/#"><img class="card-img img-responsive" loading="lazy" src="/media/DSC_0352.jpg"/>
            <span class="card-btn">BUTTON</span>
          </a>
        </div>
      </div>

      <div class="xs-12 sm-6 md-6">
        <div class="card mb-3">
          <a href="/#"><img class="card-img img-responsive" loading="lazy" src="/media/DSC_0019.jpg"/>
            <span class="card-btn">BUTTON</span>
          </a>
        </div>
      </div>
    </div>
  </div>

Block tekst met afbeelding (A)

Heading

Dragée fruitcake cake halvah sugar plum sesame snaps chupa chups
Macaroon cake halvah gingerbread chocolate cake sugar plum.
Halvah tart danish chupa chups marshmallow.

Dragée fruitcake cake halvah sugar plum sesame snaps chupa chups
Macaroon cake halvah gingerbread.

Button

<div class="container">
    <div class="cols">
      <div class="xs-12 sm-6 md-6">
        <div class="block-content">
          <h2 class="block-content-heading">Heading</h2>

          <p>Dragée fruitcake cake halvah sugar plum sesame snaps chupa chups<br/>
            Macaroon cake halvah gingerbread chocolate cake sugar plum.<br/>
            Halvah tart danish chupa chups marshmallow.</p>

          <p>Dragée fruitcake cake halvah sugar plum sesame snaps chupa chups<br/>
            Macaroon cake halvah gingerbread.</p>
          <a class="button button-green" href="#">Button</a></div>
      </div>

      <div class="xs-12 sm-6 md-6">
        <div class="card mb-3"><img class="img-responsive" loading="lazy" src="/media/IMG_6180.jpg"/>
        </div>
      </div>
    </div>
  </div>

Block tekst met afbeelding (B)

Heading

Dragée fruitcake cake halvah sugar plum sesame snaps chupa chups
Macaroon cake halvah gingerbread chocolate cake sugar plum.
Halvah tart danish chupa chups marshmallow.

Dragée fruitcake cake halvah sugar plum sesame snaps chupa chups
Macaroon cake halvah gingerbread.

Button

<div class="container">
    <div class="cols sm-cols-spacing">
      <div class="xs-12 sm-6 md-6">
        <div class="block-content bg-brown">
          <h2 class="block-content-heading text-white">Heading</h2>

          <p class="text-white">Dragée fruitcake cake halvah sugar plum sesame snaps chupa chups<br/>
            Macaroon cake halvah gingerbread chocolate cake sugar plum.<br/>
            Halvah tart danish chupa chups marshmallow.</p>

          <p class="text-white">Dragée fruitcake cake halvah sugar plum sesame snaps chupa chups<br/>
            Macaroon cake halvah gingerbread.</p>
          <a class="button button-grey" href="#">Button</a></div>
      </div>

      <div class="xs-12 sm-6 md-6">
        <div class="card mb-3"><img class="img-responsive" loading="lazy" src="/media/IMG_6180.jpg"/>
        </div>
      </div>
    </div>
  </div>

Block tekst met afbeelding (B)

HEADING

<div class="container mt-3">
    <div class="cols sm-cols-spacing">
      <div class="xs-6 md-4">
        <div class="card mb-3">
          <a href="#"><img class="card-img img-responsive" loading="lazy" src="/media/DSC_0001.jpg"/>
            <span class="card-btn subcat-btn">HEADING</span>
          </a>
        </div>
      </div>

      <div class="xs-6 md-4">
        <div class="card mb-3">
          <a href="/enveloppen-info"><img class="card-img img-responsive" loading="lazy" src="/media/DSC_0001.jpg"/>
          <span class="card-btn subcat-btn">HEADING</span>
          </a>
        </div>
      </div>

      <div class="display-none display-md-block md-4">
        <div class="card mb-3">
          <a href="#"><img class="card-img img-responsive" loading="lazy" src="/media/DSC_0001.jpg"/>
            <span class="card-btn subcat-btn">HEADING</span>
          </a>
        </div>
      </div>
    </div>
  </div>

Kleuren

Buttons

Typografie

Header 1

Header 2

Header 3

Header 4

Paragraaf

Tekstkolommen

Tekstkolommen gelijke hoogte

Hoofdcategorieën

Geboortekaartjes

Geboortekaartjes

Geboortekaartjes

Content 3 kolommen

Trends geboortekaartjes

Trends geboortekaartjes

Trends geboortekaartjes

Trends geboortekaartjes

Trends geboortekaartjes

Trends geboortekaartjes

Twee afbeeldingen met button

Block tekst met afbeelding (A)

Heading

Block tekst met afbeelding (B)

Heading

Block tekst met afbeelding (B)

Geboortekaartjes

Vragen? Wij helpen graag

Volg ons:

Stijlen

Trends

Informatie & service

Kleuren

Buttons

Typografie

Header 1

Header 2

Header 3

Header 4

Paragraaf

Tekstkolommen

Tekstkolommen gelijke hoogte

Hoofdcategorieën

Geboortekaartjes

Geboortekaartjes

Geboortekaartjes

Content 3 kolommen

Trends geboortekaartjes

Trends geboortekaartjes

Trends geboortekaartjes

Trends geboortekaartjes

Trends geboortekaartjes

Trends geboortekaartjes

Twee afbeeldingen met button

Block tekst met afbeelding (A)

Heading

Block tekst met afbeelding (B)

Heading

Block tekst met afbeelding (B)

Geboortekaartjes

Vragen? Wij helpen graag

Volg ons:

Stijlen

Trends

Informatie & service

Toegevoegd aan je collectie

Verwijderd uit eigen collectie