Styleguide

styleguide

Kleuren

#D9C0BD #784D51 #0A0B09 #E3C6C3

Typografie

  • Header 1

  • Header 2

  • Header 3

  • Paragraph

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

Paragraphs

<p>Paragraph</p>

  1. font-family: 'Muli', sans-serif
  2. font-weight: 300
  3. font-size: 13px
  4. color: #2C2C2C

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

2 Categorieën

<div class="cols">
    <div class="xs-6 xsm-6 sm-6 md-6 lg-6">
        <a class="card" href="#">
            <img class="card-img display-none display-md-block" src="/media/Quinn-desktop.jpg"/>
            <img class="card-img display-block display-md-none" src="/media/Quinn-desktop.jpg"/>
        </a>
    </div>
    <div class="xs-6 xsm-6 sm-6 md-6 lg-6">
        <a class="card" href="#">
            <img class="card-img display-none display-md-block" src="/media/Quinn-desktop.jpg"/>
            <img class="card-img display-block display-md-none" src="/media/Quinn-desktop.jpg"/>
        </a>
    </div>
</div>
            

Heading met hartje

Geboorte en trouwkaarten

<h2 class="titel-with-heart">Geboorte en trouwkaarten</h2>
 

3 Categorieën

<div class="cols">
    <div class="xs-12 xsm-12 sm-4 md-4">
        <a class="card sm-mb-5" href="#">
            <img class="card-img display-none display-sm-block mb-2" src="/media/Quinn-desktop.jpg"/>
            <img class="card-img display-block display-sm-none" src="/media/Quinn-desktop.jpg"/>
            <h3 class="text-center display-none display-sm-block mb-md-3">Label</h3>
            <h1 class="display-block display-sm-none">Label</h1>
        </a>
    </div>
    <div class="xs-6 xsm-6 sm-4 md-4">
        <a class="card sm-mb-5" href="#">
            <img class="card-img display-none display-sm-block mb-2" src="/media/Quinn-desktop.jpg"/>
            <img class="card-img display-block display-sm-none" src="/media/Quinn-desktop.jpg"/>
            <h3 class="text-center mb-md-3">Label</h3>
        </a>
    </div>
    <div class="xs-6 xsm-6 sm-4 md-4">
        <a class="card sm-mb-5" href="#">
            <img class="card-img display-none display-sm-block mb-2" src="/media/Quinn-desktop.jpg"/>
            <img class="card-img display-block display-sm-none" src="/media/Quinn-desktop.jpg"/>
            <h3 class="text-center mb-md-3">Label</h3>
        </a>
    </div>
</div>
            

3 Categorieën met tekstkolom

H3 titel

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.

H3 titel

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.

H3 titel

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.

<div class="cols cols-eq-height">
    <div class="xs-12 xsm-12 sm-4 md-4">
        <div class="card card-2">
            <img class="card-img md-mb-4" src="/media/Quinn-desktop.jpg"/>
            <div class="card-content">
                <h3 class="text-center md-mb-4">H3 titel</h3>
                <p>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.</p>
            </div>
            <div class="card-button-group">
                <a class="button button-primary" href="#">Button</a>
            </div>
        </div>
    </div>
    <div class="xs-6 xsm-6 sm-4 md-4">
        <div class="card card-2">
            <img class="card-img md-mb-4" src="/media/Quinn-desktop.jpg"/>
            <div class="card-content">
                <h3 class="text-center md-mb-4">H3 titel</h3>
                <p>Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque
                    aliquam. Donec faucibus. Nunc iaculis suscipit dui.</p>
            </div>
            <div class="card-button-group">
                <a class="button button-primary" href="/faq">Button</a>
            </div>
        </div>
    </div>

    <div class="xs-6 xsm-6 sm-4 md-4">
        <div class="card card-2">
            <img class="card-img md-mb-4" src="/media/Quinn-desktop.jpg"/>
            <div class="card-content">
                <h3 class="text-center md-mb-4">H3 titel</h3>
                <p>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.</p>
            </div>
            <div class="card-button-group">
                <a class="button button-primary" href="#">Button</a>
            </div>
        </div>
    </div>
</div>
            

Afbeeldingen Instagram

<div class="cols cols-multi">
    <div class="xs-4 xsm-4 sm-2 md-2 lg-2 mb-2">
        <a class="card" href="#">
            <img class="card-img" src="/media/Quinn-desktop.jpg"/>
        </a>
    </div>
    <div class="xs-4 xsm-4 sm-2 md-2 lg-2 mb-2">
        <a class="card" href="#">
            <img class="card-img" src="/media/Quinn-desktop.jpg"/>
        </a>
    </div>
    <div class="xs-4 xsm-4 sm-2 md-2 lg-2 mb-2">
        <a class="card" href="#">
            <img class="card-img" src="/media/Quinn-desktop.jpg"/>
        </a>
    </div>
    <div class="xs-4 xsm-4 sm-2 md-2 lg-2 mb-2">
        <a class="card" href="#">
            <img class="card-img" src="/media/Quinn-desktop.jpg"/>
        </a>
    </div>
    <div class="xs-4 xsm-4 sm-2 md-2 lg-2 mb-2">
        <a class="card" href="#">
            <img class="card-img" src="/media/Quinn-desktop.jpg"/>
        </a>
    </div>
    <div class="xs-4 xsm-4 sm-2 md-2 lg-2 mb-2">
        <a class="card" href="#">
            <img class="card-img" src="/media/Quinn-desktop.jpg"/>
        </a>
    </div>
</div>
            

2 Cards with label (desktop en mobiel)

<div class="cols">
 <div class="xs-6 sm-6 mb-3">
  <a class="card" href="/geboortekaartjes">
   <img class="display-block display-md-none card-img" loading="lazy" src="/media/Geboorte-mobiel.png" />
   <img class="display-none display-md-block card-img" loading="lazy" src="/media/Geboorte-desktop.png" /> 
   <span class="card-label">GEBOORTE</span> 
  </a>
  </div>
  <div class="xs-6 sm-6 mb-3">
   <a class="card" href="/trouwen-collectie">
	<img class="display-block display-md-none card-img" loading="lazy" src="/media/Trouwen-mobiel.png" />
	<img class="display-none display-md-block card-img" loading="lazy" src="/media/Trouwen-desktop.png" />
	<span class="card-label">TROUWEN</span> 
   </a>
  </div>
</div>

Lees meer (mobiel)

Geboortekaartjes

Laat iedereen zien dat jullie kindje geboren is met een geboortebord, tuinbord, vlag of raamsticker. Je kunt een geboorte aankodiging ontwerpen helemaal in stijl van het geboortekaartje, hoe leuk is dat! Liever een ander ontwerp? ... Laat je inspireren door de ontwerpen van Lab 1823 designstudio en ga zelf aan de slag met een unieke geboorte aankondiging.

<h2>Geboortekaartjes</h2>

<p><input class="check" id="read-more" type="checkbox" /> Laat iedereen zien dat jullie kindje geboren is met een geboortebord, tuinbord, vlag of raamsticker. Je kunt een geboorte aankodiging ontwerpen helemaal in stijl van het geboortekaartje, hoe leuk is dat! Liever een ander ontwerp? <span id="dots">...</span><span id="more"> Laat je inspireren door de ontwerpen van Lab 1823 designstudio en ga zelf aan de slag met een unieke geboorte aankondiging.</span> <label class="read-more-label display-md-none" for="read-more">Lees meer</label></p>