JilleJille > 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

Header h1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque purus, accumsan malesuada arcu id, venenatis efficitur metus. Aenean congue eget ante quis hendrerit. Integer molestie tellus eu quam semper rhoncus. Praesent mattis nisi id odio malesuada, vitae tempor massa imperdiet. Nunc ac volutpat libero, sit amet vulputate enim.

<div class="text-center">
    <h1 class="mb-4">Header h1</h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque purus, accumsan malesuada arcu id,
        venenatis efficitur metus. Aenean congue eget ante quis hendrerit. Integer molestie tellus eu quam semper
        rhoncus. Praesent mattis nisi id odio malesuada, vitae tempor massa imperdiet. Nunc ac volutpat libero, sit
        amet vulputate enim.
    </p>
</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>