home > Styleguide

styleguide

Kleuren

#C78477 #F0E8E5 #FCF2ED #FFFFFF

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: Open Sans, sans-serif;
  2. font-weight: normal;
  3. font-size: 14px;
  4. color: #1d1d1b;

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 SPECIAL > button default button success

<a class="button button-secondary" href="#">BUTTON SPECIAL &gt; </a>
<a class="button button-default" href="#">button default</a>
<a class="button button-success" href="#">button success</a>
            

Banner

<div class="block1 block-banner">
    <div class="container">
        <div class="cols">
            <div class="sm-6 mb-4 mb-sm-0 big">
                <div class="thumb">
                    <a href="#">
                        <img class="w-100" loading="lazy" src="/media/home-trouwkaarten.jpg"/>
                    </a>
                </div>

                <div class="button special">
                    <a href="#">BUTTON &gt; </a>
                </div>
            </div>

            <div class="xs-6 sm-3 small mb-4">
                <div class="thumb">
                    <a href="#">
                        <img class="w-100" loading="lazy" src="/media/home-save-the-date-kaarten.jpg"/>
                    </a>
                </div>

                <div class="button special">
                    <a href="#">BUTTON &gt; </a>
                </div>
            </div>

            <div class="xs-6 sm-3 small mb-4">
                <div class="thumb">
                    <a href="#">
                        <img class="w-100" loading="lazy" src="/media/home-save-the-date-kaarten.jpg"/>
                    </a>
                </div>

                <div class="button special">
                    <a href="#">BUTTON &gt; </a>
                </div>
            </div>
        </div>
    </div>
</div>
            

1 Tekstkolom gecentreerd

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="cols">
    <div class="xs-12 text-center">
        <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>
            

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="cols">
    <div class="xs-12 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="xs-12 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>
            

Tekstblok met afbeelding onder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque scelerisque nisl sed pulvinar. Nullam tempus consequat molestie. Sed malesuada volutpat neque vel maximus. Aliquam erat volutpat. Duis vel dui massa. Fusce accumsan scelerisque augue vel aliquam. Aliquam eget ullamcorper sem, vitae interdum orci. Morbi convallis sapien nec nunc suscipit, nec laoreet mauris fermentum. Fusce porta fermentum lorem ac lacinia.

<div class="container">
    <div class="sm-12 mb-4"
         style="background-color:#F0E8E5;padding: 15px;background-repeat:no-repeat;background-position:right top">
        <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque
            scelerisque nisl sed pulvinar. Nullam tempus consequat molestie. Sed malesuada volutpat neque vel
            maximus. Aliquam erat volutpat. Duis vel dui massa. Fusce accumsan scelerisque augue vel aliquam.
            Aliquam eget ullamcorper sem, vitae interdum orci. Morbi convallis sapien nec nunc suscipit, nec laoreet
            mauris fermentum. Fusce porta fermentum lorem ac lacinia.</p>
        <img class="img-center" loading="lazy" src="/media/dieren.png"/></div>
</div>
            

Afbeelding met tekstblok links

Titel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque scelerisque nisl sed pulvinar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque scelerisque nisl sed pulvinar. Nullam tempus consequat molestie.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque scelerisque nisl sed pulvinar.

* Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 

MEER INFO >>>

<div class="cols">
    <div class="container">
        <div class="xs-12 sm-6 p-3" style="line-height: 1.3">
            <p style="font-family: &quot;Old Standard TT&quot;; font-size: 16pt; text-align: right;">
                <em>Titel</em></p>

            <p style="font-size: 10pt; text-align: right;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Ut scelerisque scelerisque nisl sed pulvinar.</p>

            <p style="font-size: 10pt; text-align: right;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Ut scelerisque scelerisque nisl sed pulvinar. Nullam tempus consequat molestie.<br/>
                <br/>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Ut scelerisque scelerisque nisl sed pulvinar.<br/>
                <br/>
                <sub>* Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sub><br/>
                <br/>
            </p>

            <p style="font-size: 10pt; text-align: right;">
                <a href="#"><strong>MEER INFO &gt;&gt;&gt;</strong></a></p>
        </div>

        <div class="xs-12 sm-6 p-3">
            <img class="img-responsive img-center" loading="lazy" src="/media/home-proefdruk.jpg"/>
        </div>
    </div>
</div>
            

Afbeelding met tekstblok rechts

Titel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque scelerisque nisl sed pulvinar. Nullam tempus consequat molestie.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque scelerisque nisl sed pulvinar.

* Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 

MEER INFO >>>

<div class="cols">
    <div class="container">
        <div class="xs-12 sm-6 p-3">
            <img class="img-responsive img-center" loading="lazy" src="/media/home-proefdruk.jpg"/>
        </div>

        <div class="xs-12 sm-6 p-3" style="line-height: 1.3">
            <p style="font-family: &quot;Old Standard TT&quot;; font-size: 16pt; text-align: right;">
                <em>Titel</em></p>

            <p style="font-size: 10pt; text-align: right;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Ut scelerisque scelerisque nisl sed pulvinar. Nullam tempus consequat molestie.<br/>
                <br/>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Ut scelerisque scelerisque nisl sed pulvinar.<br/>
                <br/>
                <sub>* Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sub><br/>
                <br/>
            </p>

            <p style="font-size: 10pt; text-align: right;">
                <a href="#"><strong>MEER INFO &gt;&gt;&gt;</strong></a></p>
        </div>
    </div>
</div>
            

1 Afbeelding met label

<div class="container">
      <div class="cols sm-cols-spacing cols-multi">
        <div class="xs-6 sm-6 mb-4 text-center">
          <a href="/"><img alt="" class="img-responsive img-center" loading="lazy" src="/media/home-marjolein-illustrator.jpg"/></a>
          <div class="button"><a href="/">LABEL &gt; </a></div>
        </div>
      </div>
 </div>

            

2 Afbeeldingen met label

<div class="container">
      <div class="cols sm-cols-spacing cols-multi">
        <div class="xs-6 sm-6 mb-4 text-center">
          <a href="/"><img alt="" class="img-responsive img-center" loading="lazy" src="/media/home-marjolein-illustrator.jpg"/></a>
          <div class="button"><a href="/">LABEL &gt; </a></div>
        </div>

        <div class="xs-6 sm-6 mb-4 text-center">
          <a href="/"><img alt="" class="img-responsive img-center" loading="lazy" src="/media/home-marjolein-illustrator.jpg"/></a>
          <div class="button"><a href="/">LABEL&gt; </a></div>
        </div>

      </div>
    </div>
            

3 Afbeeldingen met label

    <div class="container">
      <div class="cols sm-cols-spacing cols-multi">
        <div class="xs-6 sm-4 mb-4 text-center">
          <a href="/"><img alt="" class="img-responsive img-center" loading="lazy" src="/media/home-marjolein-illustrator.jpg"/></a>
          <div class="button"><a href="/">LABEL &gt; </a></div>
        </div>

        <div class="xs-6 sm-4 mb-4 text-center">
          <a href="/"><img alt="" class="img-responsive img-center" loading="lazy" src="/media/home-marjolein-illustrator.jpg"/></a>
          <div class="button"><a href="/">LABEL&gt; </a></div>
        </div>

        <div class="xs-6 sm-4 mb-4 text-center">
          <a href="/"><img alt="" class="img-responsive img-center" loading="lazy" src="/media/home-marjolein-illustrator.jpg"/></a>
          <div class="button"><a href="/">LABEL &gt; </a></div>
        </div>

      </div>
    </div>
            

4 Afbeeldingen met label

    <div class="container">
      <div class="cols sm-cols-spacing cols-multi">
        <div class="xs-6 sm-3 mb-4 text-center">
          <a href="/"><img alt="Save the Date kaarten maken" class="img-responsive img-center" loading="lazy" src="/media/home-save-the-date-kaarten.jpg"/></a>
          <div class="button"><a href="/">SAVE THE DATES &gt; </a></div>
        </div>

        <div class="xs-6 sm-3 mb-4 text-center">
          <a href="/"><img alt="Save the Date kaarten maken" class="img-responsive img-center" loading="lazy" src="/media/home-save-the-date-kaarten.jpg"/></a>
          <div class="button"><a href="/">SAVE THE DATES &gt; </a></div>
        </div>

        <div class="xs-6 sm-3 mb-4 text-center">
          <a href="/"><img alt="Save the Date kaarten maken" class="img-responsive img-center" loading="lazy" src="/media/home-save-the-date-kaarten.jpg"/></a>
          <div class="button"><a href="/">SAVE THE DATES &gt; </a></div>
        </div>

        <div class="xs-6 sm-3 mb-4 text-center">
          <a href="/"><img alt="Save the Date kaarten maken" class="img-responsive img-center" loading="lazy" src="/media/home-save-the-date-kaarten.jpg"/></a>
          <div class="button"><a href="/">SAVE THE DATES &gt; </a></div>
        </div>
      </div>
    </div>
            

Afbeeldingen Instagram

<p>
    <a href="#" target="_blank">
        <img class="img-responsive img-center" loading="lazy" src="/media/instagram-footer.jpg"/>
    </a>
</p>