Styleguide
Buroleo > Styleguide

styleguide

Kleuren

#E28377 #FBF5F5 #404040 #FFFFFF

Typografie

Headers

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

Special headers

header klein

header groot

<div class="header-multiple-font">
    <h6 class="header-small text-center">header klein</h6>
    <h1 class="header-big text-center">header groot</h1>
</div>
                    

Paragraphs

<p>Paragraph</p>

  1. font-family: Cutive Mono, monospace
  2. font-weight: normal
  3. font-size: .9rem
  4. color: #404040;

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 full width mobile
<a class="button button-primary" href="#">button primary</a>
<a class="button button-primary btn-full-width-mobile" href="#">full width mobile</a>
            

Banner design yourself

<div class="banner banner-design-yourself">
    <div class="container">
        <div class="cols">
            <div class="xs-12 sm-8 md-8 lg-8 sm-offset-2">
                <div class="banner-wrapper">
                    <div class="banner-header header-multiple-font display-none display-sm-block">
                        <h6 class="header-small text-center">header small</h6>
                        <h1 class="header-big text-center">header-big</h1>
                    </div>
                    <div class="banner-content display-none display-sm-block">
                        <p>Nisi ut aliquid ex ea commodi consequatur.
                            Quis autem vel eum iure reprehenderit. Nisi ut aliquid ex ea commodi consequatur.</p>
                    </div>
                    <div class="banner-button-group">
                        <a class="button button-primary btn-full-width-mobile" href="#">button primary</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
            

Carrousel met reviews

<div class="banner banner-swiper mb-4">
    <div class="container">
        <div class="cols">
            <div class="xs-12 sm-12 md-12 lg-12">
                <div class="banner-wrapper">
                    <div class="banner-header header-multiple-font">
                        <h6 class="header-small text-center">blije</h6>
                        <h1 class="header-big text-center">klanten</h1>
                    </div>
                    <div class="banner-content">
                        <div class="swiper-container" id="swiper-feedback">
                            <div class="swiper-wrapper" id="customer-reviews">
                                <div class="swiper-slide">
                                    <div class="swiper-slide_text">
                                        <p>Review 1</p>
                                        <p><strong>Blije klant</strong></p>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="swiper-slide_text">
                                        <p>Review 2</p>
                                        <p><strong>Blije klant</strong></p>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="swiper-slide_text">
                                        <p>Review 3</p>
                                        <p><strong>Blije klant</strong></p>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-buttons__wrapper">
                                <div class="swiper-button-next">
                                    <i class="shopicons shopicons-navigate-next">&nbsp;</i>
                                </div>
                                <div class="swiper-button-prev">
                                    <i class="shopicons shopicons-navigate-before">&nbsp;</i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
            

Tekstblok met afbeelding

H1 title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum leo at accumsan lobortis. Ut tempor est ut neque gravida aliquet. Curabitur accumsan viverra nunc, ac cursus magna laoreet ac. Integer mattis id metus sed tempor. Nam id luctus magna. Curabitur dapibus vulputate lorem sed laoreet.

<div class="container">
    <div class="cols cols-stretch-vertical">
        <div class="xs-12 sm-6">
            <div class="stretch-vertical-height">
                <h1>H1 title</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum leo at accumsan
                    lobortis. Ut tempor est ut neque gravida aliquet. Curabitur accumsan viverra nunc, ac cursus
                    magna laoreet ac. Integer mattis id metus sed tempor. Nam id luctus magna. Curabitur dapibus
                    vulputate lorem sed laoreet.</p>
            </div>
        </div>
        <div class="xs-12 sm-6">
            <div class="stretch-vertical-height">
                <img class="img-responsive" src="/media/buroleo_instagram1.jpg">
            </div>
        </div>
    </div>
</div>
            

2 Categorieën met label

<div class="cols">
    <div class="xsm-12 xs-12 sm-6 md-6 lg-6 mb-4">
        <a class="card" href="/geboortekaartjes">
            <img class="card-img" src="/media/buroleo_geboortekaartjes_v2.jpg"/>
            <span class="card-btn button button-default">label</span>
        </a>
    </div>
    <div class="xsm-12 xs-12 sm-6 md-6 lg-6 mb-4">
        <a class="card" href="/geboortekaartjes">
            <img class="card-img" src="/media/buroleo_geboortekaartjes_v2.jpg"/>
            <span class="card-btn button button-default">label</span>
        </a>
    </div>
</div>
            

3 Categorieën met label

<div class="cols">
    <div class="xsm-12 xs-12 sm-4 md-4 lg-4 mb-4">
        <a class="card" href="#">
            <img class="card-img" src="/media/buroleo_trends_foliedruk.jpg"/>
            <span class="card-btn button button-default">label</span>
        </a>
    </div>
    <div class="xsm-12 xs-12 sm-4 md-4 lg-4 mb-4">
        <a class="card" href="#">
            <img class="card-img" src="/media/buroleo_trends_foliedruk.jpg"/>
            <span class="card-btn button button-default">label</span>
        </a>
    </div>
    <div class="xsm-12 xs-12 sm-4 md-4 lg-4 mb-4">
        <a class="card" href="#">
            <img class="card-img" src="/media/buroleo_trends_foliedruk.jpg"/>
            <span class="card-btn button button-default">label</span>
        </a>
    </div>
</div>
            

4 Categorieën met label

<div class="cols">
    <div class="xsm-12 xs-12 sm-3 md-3 lg-3">
        <a class="card" href="#">
            <img class="card-img display-none display-sm-block" src="/media/buroleo_afbeeldingen_extras.jpg"/>
            <span class="card-btn button button-default btn-full-width-mobile">label</span>
        </a>
    </div>
    <div class="xsm-12 xs-12 sm-3 md-3 lg-3">
        <a class="card" href="#">
            <img class="card-img display-none display-sm-block" src="/media/buroleo_afbeeldingen_extras.jpg"/>
            <span class="card-btn button button-default btn-full-width-mobile">label</span>
        </a>
    </div>
    <div class="xsm-12 xs-12 sm-3 md-3 lg-3">
        <a class="card" href="#">
            <img class="card-img display-none display-sm-block" src="/media/buroleo_afbeeldingen_extras.jpg"/>
            <span class="card-btn button button-default btn-full-width-mobile">label</span>
        </a>
    </div>
    <div class="xsm-12 xs-12 sm-3 md-3 lg-3">
        <a class="card" href="#">
            <img class="card-img display-none display-sm-block" src="/media/buroleo_afbeeldingen_extras.jpg"/>
            <span class="card-btn button button-default btn-full-width-mobile">label</span>
        </a>
    </div>
</div>

Afbeeldingen Instagram

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