styleguide

Kleuren

#768D85 #EACCBD #000000 #FFFFFF

Typografie

Headers

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

Special headers

Header Asap HeartAndSoul

Header HeartAndSoul

<h1 class="multiple-font-header">Header Asap <span class="heart-and-soul">HeartAndSoul</span></h1>
<h1 class="heart-and-soul">Header HeartAndSoul</h1>
            

Paragraphs

<p>Paragraph</p>

  1. font-family: Asap, sans-serif
  2. font-weight: 400
  3. font-size: 16px
  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 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>
            

Afbeelding landingspagina

<div class="cols sm-cols-spacing">
    <div class="xs-12 mb-3">
        <img class="img-responsive" src="/media/studio-marjolein-vormgeving-header-contact.jpg">
    </div>
</div>
            

2 Afbeeldingen

<div class="cols sm-cols-spacing">
    <div class="xs-12 sm-6 mb-3">
        <img class="img-responsive"
             src="/media/studio-marjolein-vormgeving-home-ontwerp-op-maat-trouwkaarten-geboortekaartjes.jpg">
    </div>
    <div class="xs-12 sm-6">
        <img class="img-responsive"
             src="/media/studio-marjolein-vormgeving-home-ontwerp-op-maat-trouwkaarten-geboortekaartjes.jpg">
    </div>
</div>
            

3 Afbeeldingen met label met achtergrond

<div class="banner banner-top">
    <div class="container">
        <div class="banner-wrapper">
            <div class="cols cols-eq-height">
                <div class="xs-6 sm-4 mb-2 mb-sm-0">
                    <a class="card" href="#">
                        <img class="card-img" src="/media/studio-marjolein-vormgeving-home-zelf-maken.jpg"/>
                        <span class="card-btn button">LABEL</span>
                    </a>
                </div>
                <div class="xs-6 display-sm-none">
                    <a class="card" href="#">
                        <img class="card-img" src="/media/studio-marjolein-vormgeving-home-zelf-maken.jpg"/>
                        <span class="card-btn button">LABEL</span>
                    </a>
                </div>
                <div class="xs-6 sm-4 mb-2 mb-sm-0">
                    <a class="card" href="#">
                        <img class="card-img" src="/media/studio-marjolein-vormgeving-home-zelf-maken.jpg"/>
                        <span class="card-btn button">LABEL</span>
                    </a>
                </div>
                <div class="xs-6 sm-4 mb-2 mb-sm-0">
                    <a class="card" href="#">
                        <img class="card-img" src="/media/studio-marjolein-vormgeving-home-zelf-maken.jpg"/>
                        <span class="card-btn button">LABEL</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
            

4 Afbeeldingen met label en tekst met achtergrond

<div class="banner banner-happy">
    <div class="container">
        <div class="cols cols-eq-height">
            <div class="xs-6 sm-3 mb-2 mb-sm-4">
                <a class="card" href="#">
                    <img class="card-img" src="/media/studio-marjolein-vormgeving-home-trouwhuisstijl.jpg"/>
                    <span class="card-btn button">LABEL</span>
                </a>
                <p class="display-none display-sm-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Aenean vitae augue sed ligula blandit
                    luctus. Integer a mattis mauris.</p>
            </div>
            <div class="xs-6 sm-3 mb-2 mb-sm-4">
                <a class="card" href="#">
                    <img class="card-img" src="/media/studio-marjolein-vormgeving-home-trouwhuisstijl.jpg"/>
                    <span class="card-btn button">LABEL</span>
                </a>
                <p class="display-none display-sm-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Aenean vitae augue sed ligula blandit
                    luctus. Integer a mattis mauris.</p>
            </div>
            <div class="xs-6 sm-3 mb-2 mb-sm-4">
                <a class="card" href="#">
                    <img class="card-img" src="/media/studio-marjolein-vormgeving-home-trouwhuisstijl.jpg"/>
                    <span class="card-btn button">LABEL</span>
                </a>
                <p class="display-none display-sm-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Aenean vitae augue sed ligula blandit
                    luctus. Integer a mattis mauris.</p>
            </div>
            <div class="xs-6 sm-3 mb-2 mb-sm-4">
                <a class="card" href="#">
                    <img class="card-img" src="/media/studio-marjolein-vormgeving-home-trouwhuisstijl.jpg"/>
                    <span class="card-btn button">LABEL</span>
                </a>
                <p class="display-none display-sm-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Aenean vitae augue sed ligula blandit
                    luctus. Integer a mattis mauris.</p>
            </div>
        </div>
    </div>
</div>
            

3 Afbeeldingen met tekst

HEADER H1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. Nunc consequat finibus tempor.

HEADER H1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. Nunc consequat finibus tempor.

HEADER H1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. Nunc consequat finibus tempor.

<div class="cols">
    <div class="xs-12 sm-4">
        <div class="card mb-3">
            <a class="card-thumbnail" href="#">
                <img class="card-img"
                    src="/media/studio-marjolein-vormgeving-home-veelgestelde-vragen.jpg"/>
            </a>
            <div class="card-content">
                <h1>HEADER H1</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit
                luctus. Integer a mattis mauris. Nunc consequat finibus tempor.</p>
            </div>
        </div>
    </div>
    <div class="xs-12 sm-4">
        <div class="card mb-3">
            <a class="card-thumbnail" href="#">
                <img class="card-img"
                    src="/media/studio-marjolein-vormgeving-home-veelgestelde-vragen.jpg"/>
            </a>
            <div class="card-content">
                <h1>HEADER H1</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit
                luctus. Integer a mattis mauris. Nunc consequat finibus tempor.</p>
            </div>
        </div>
    </div>
    <div class="xs-12 sm-4">
        <div class="card mb-3">
            <a class="card-thumbnail" href="#">
                <img class="card-img"
                    src="/media/studio-marjolein-vormgeving-home-veelgestelde-vragen.jpg"/>
            </a>
            <div class="card-content">
                <h1>HEADER H1</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit
                luctus. Integer a mattis mauris. Nunc consequat finibus tempor.</p>
            </div>
        </div>
    </div>
</div>
            

Banner zelf ontwerpen

<div class="banner banner-design-yourself">
    <div class="container">
        <div class="cols">
            <div class="xs-12">
                <div class="banner-content">
                    <h4 class="banner-header">HEADER:</h4>
                    <p class="mb-2"><span class="bold">Lorem ipsum</span> dolor sit amet, consectetur adipiscing
                        elit. Aenean vitae augue sed ligula blandit
                        luctus. Integer a mattis mauris.</p>
                </div>
                <div class="banner-button-group">
                    <a class="button button-primary" href="#">Button primary</a>
                </div>
            </div>
        </div>
    </div>
</div>
            

Afbeeldingen Instagram

<div class="cols sm-cols-spacing">
    <div class="xs-4 md-2">
        <a class="card" href="#">
            <img class="card-img" src="/media/studio-marjolein-vormgeving-home-instagram-1.jpg"/>
        </a>
    </div>
    <div class="xs-4 md-2">
        <a class="card" href="#">
            <img class="card-img" src="/media/studio-marjolein-vormgeving-home-instagram-1.jpg"/>
        </a>
    </div>
    <div class="xs-4 md-2">
        <a class="card" href="#">
            <img class="card-img" src="/media/studio-marjolein-vormgeving-home-instagram-1.jpg"/>
        </a>
    </div>
    <div class="xs-4 md-2 xs-padding-t-14 pt-md-0">
        <a class="card" href="#">
            <img class="card-img" src="/media/studio-marjolein-vormgeving-home-instagram-1.jpg"/>
        </a>
    </div>
    <div class="xs-4 md-2 xs-padding-t-14 pt-md-0">
        <a class="card" href="#">
            <img class="card-img" src="/media/studio-marjolein-vormgeving-home-instagram-1.jpg"/>
        </a>
    </div>
    <div class="xs-4 md-2 xs-padding-t-14 pt-md-0">
        <a class="card" href="#">
            <img class="card-img" src="/media/studio-marjolein-vormgeving-home-instagram-1.jpg"/>
        </a>
    </div>
</div>
            

Afbeeldingen Instagram

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris.’

NAAM

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. ’

NAAM

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris.’

NAAM

<div id="reviews">
   <div class="container">
      <div class="reviews-wrapper">
         <div class="cols">
            <div class="xs-12 sm-4 md-3">
               <div class="card mb-3">
                  <a class="card-thumbnail mb-4" href="/reviews"><img class="card-img" loading="lazy" src="/media/studio-marjolein-vormgeving-recensie-1.jpg" /> </a>
                  <div class="card-content">
                     <p>&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. &rsquo;</p>
                  </div>
                  <p class="review-name">NAAM</p>
               </div>
            </div>
            <div class="xs-12 sm-4 md-3">
               <div class="card mb-3">
                  <a class="card-thumbnail mb-4" href="/reviews"><img class="card-img" loading="lazy" src="/media/studio-marjolein-vormgeving-recensie-2.jpg" /> </a>
                  <div class="card-content">
                     <p>&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. &rsquo;</p>
                  </div>
                  <p class="review-name">NAAM</p>
               </div>
            </div>
            <div class="xs-12 sm-4 md-3">
               <div class="card mb-3">
                  <a class="card-thumbnail mb-4" href="/reviews"><img class="card-img" loading="lazy" src="/media/studio-marjolein-vormgeving-recensie-3.jpg" /> </a>
                  <div class="card-content">
                     <p>&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. &rsquo;</p>
                  </div>
                  <p class="review-name">NAAM</p>
               </div>
            </div>
            <div class="xs-12 md-3 display-none display-md-block">
               <div class="card mb-3">
                  <a class="card-thumbnail mb-4" href="/reviews"><img class="card-img" loading="lazy" src="/media/studio-marjolein-vormgeving-recensie-4.jpg" /> </a>
                  <div class="card-content">
                     <p>&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. &rsquo;</p>
                  </div>
                  <p class="review-name">NAAM</p>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>