Styleguide
Lab1823 > 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/Vic.jpg"/>
            <img class="card-img display-block display-md-none" src="/media/Vic_mobiel_1.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/Vic.jpg"/>
            <img class="card-img display-block display-md-none" src="/media/Vic_mobiel_1.jpg"/>
        </a>
    </div>
</div>
            

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/Floris.jpg"/>
            <img class="card-img display-block display-sm-none" src="/media/Floris_mobiel.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/Floris.jpg"/>
            <img class="card-img display-block display-sm-none" src="/media/Floris_mobiel.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/Floris.jpg"/>
            <img class="card-img display-block display-sm-none" src="/media/Floris_mobiel.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/Tips.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/Tips.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/Tips.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/Instagram.png"/>
        </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/Instagram.png"/>
        </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/Instagram.png"/>
        </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/Instagram.png"/>
        </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/Instagram.png"/>
        </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/Instagram.png"/>
        </a>
    </div>
</div>