Studio Bitterzoet > Styleguide

styleguide

Kleuren

#CBA9A3 #A3B19C #D1D8CD #000000 #FFFFFF

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: 'Josefin Sans', sans-serif
  2. font-weight: 300
  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 default >> Button primary >> Button success >>
<a class="button button-default" href="#">Button default>></a>
<a class="button button-primary" href="#">Button primary>></a>
<a class="button button-success" href="#">Button success >></a>
            

Banner

<div class="banner">
    <div class="cols">
        <div class="xs-12 xsm-12 sm-6 md-5 lg-5">
            <div class="banner-wrapper">
                <div class="banner-header">
                    <span class="header display-none display-sm-block">Header</span><br/>
                    <span class="subheader display-none display-sm-block">Subheader desktop</span>
                    <span class="header header-mobile display-sm-none">Header mobiel<br/><span class="semi-bold">Vetgedrukte header mobiel<br/></span></span>
                </div>
                <div class="banner-content">
                    <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
                </div>
                <div class="banner-button-group">
                    <a class="button button-default lg-button" href="#">Button groot >></a>
                </div>
            </div>
        </div>
    </div>
</div>
            

3 Categorieën met button

<div class="cols">
    <div class="xsm-12 xs-12 sm-4 md-4 lg-4 mb-4">
        <a class="card mb-sm-5 mb-md-0" href="#">
            <img class="card-img" src="/media/row1_image01_geboortekaartjes.jpg"/>
            <span class="card-btn button button-primary">Button >></span>
        </a>
    </div>
    <div class="xsm-12 xs-12 sm-4 md-4 lg-4 mb-4">
        <a class="card mb-sm-5 mb-md-0" href="#">
            <img class="card-img" src="/media/row1_image01_geboortekaartjes.jpg"/>
            <span class="card-btn button button-primary">Button >></span>
        </a>
    </div>
    <div class="xsm-12 xs-12 sm-4 md-4 lg-4 mb-4">
        <a class="card mb-sm-5 mb-md-0" href="#">
            <img class="card-img" src="/media/row1_image01_geboortekaartjes.jpg"/>
            <span class="card-btn button button-primary">Button >></span>
        </a>
    </div>
</div>
            

4 Categorieën met label

<div class="cols">
    <div class="xsm-6 xs-6 sm-3 md-3 lg-3">
        <a class="card" href="#">
            <img class="card-img" src="/media/row2_image01_enveloppen.jpg"/>
            <span class="card-label">Label >></span>
        </a>
    </div>
    <div class="xsm-6 xs-6 sm-3 md-3 lg-3">
        <a class="card" href="#">
            <img class="card-img" src="/media/row2_image01_enveloppen.jpg"/>
            <span class="card-label">Label >></span>
        </a>
    </div>
    <div class="xsm-6 xs-6 sm-3 md-3 lg-3">
        <a class="card" href="#">
            <img class="card-img" src="/media/row2_image01_enveloppen.jpg"/>
            <span class="card-label">Label >></span>
        </a>
    </div>
    <div class="xsm-6 xs-6 sm-3 md-3 lg-3">
        <a class="card" href="#">
            <img class="card-img" src="/media/row2_image01_enveloppen.jpg"/>
            <span class="card-label">Label >></span>
        </a>
    </div>
</div>

3 Categorieën met tekstkolom

<div class="cols cols-eq-height">
    <div class="xs-12 xsm-12 sm-4 md-4 lg-4">
        <div class="card card-eq-height">
            <a class="display-none display-sm-block" href="#">
                <img class="card-img" src="/media/row4_image01_verzendservice.jpg"/>
            </a>
            <div class="card-content display-none display-sm-block">
                <h1>Header</h1>
                <p>Paragraaf 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                            incididunt ut labore et dolore magna aliqua.</p>
                <p>Paragraaf 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                            incididunt ut labore et dolore magna aliqua.</p>
                <p class="semi-bold">Vetgedrukte tekst</p>
            </div>
            <div class="card-button-group">
                <a class="button button-success" href="#">Button >></a>
            </div>
        </div>
    </div>
    <div class="xs-12 xsm-12 sm-4 md-4 lg-4">
        <div class="card card-eq-height">
            <a class="display-none display-sm-block" href="#">
                <img class="card-img" src="/media/row4_image01_verzendservice.jpg"/>
            </a>
            <div class="card-content display-none display-sm-block">
                <h1>Header</h1>
                <p>Paragraaf 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                            incididunt ut labore et dolore magna aliqua.</p>
                <p>Paragraaf 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                            incididunt ut labore et dolore magna aliqua.</p>
                <p class="semi-bold">Vetgedrukte tekst</p>
            </div>
            <div class="card-button-group">
                <a class="button button-success" href="#">Button >></a>
            </div>
        </div>
    </div>
    <div class="xs-12 xsm-12 sm-4 md-4 lg-4">
        <div class="card card-eq-height">
            <a class="display-none display-sm-block" href="#">
                <img class="card-img" src="/media/row4_image01_verzendservice.jpg"/>
            </a>
            <div class="card-content display-none display-sm-block">
                <h1>Header</h1>
                <p>Paragraaf 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                            incididunt ut labore et dolore magna aliqua.</p>
                <p>Paragraaf 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                            incididunt ut labore et dolore magna aliqua.</p>
                <p class="semi-bold">Vetgedrukte tekst</p>
            </div>
            <div class="card-button-group">
                <a class="button button-success" href="#">Button >></a>
            </div>
        </div>
    </div>
</div>
            

Afbeeldingen Instagram

<div class="cols m-0 mx-sm-n2">
    <div class="xs-4 xsm-4 sm-2 md-2 lg-2 mb-sm-3 p-0 px-sm-2">
        <a class="card" href="#">
            <img class="card-img" src="/media/Insta_image_01.jpg"/>
        </a>
    </div>
    <div class="xs-4 xsm-4 sm-2 md-2 lg-2 mb-sm-3 p-0 px-sm-2">
        <a class="card" href="#">
            <img class="card-img" src="/media/Insta_image_01.jpg"/>
        </a>
    </div>
    <div class="xs-4 xsm-4 sm-2 md-2 lg-2 mb-sm-3 p-0 px-sm-2">
        <a class="card" href="#">
            <img class="card-img" src="/media/Insta_image_01.jpg"/>
        </a>
    </div>
    <div class="xs-4 xsm-4 sm-2 md-2 lg-2 mb-3 p-0 px-sm-2">
        <a class="card" href="#">
            <img class="card-img" src="/media/Insta_image_01.jpg"/>
        </a>
    </div>
    <div class="xs-4 xsm-4 sm-2 md-2 lg-2 mb-3 p-0 px-sm-2">
        <a class="card" href="#">
            <img class="card-img" src="/media/Insta_image_01.jpg"/>
        </a>
    </div>
    <div class="xs-4 xsm-4 sm-2 md-2 lg-2 mb-3 p-0 px-sm-2">
        <a class="card" href="#">
            <img class="card-img" src="/media/Insta_image_01.jpg"/>
        </a>
    </div>
</div>