Le Chique Design > Styleguide

Banner columns - 2 columns




<div class="container container-fluid mobile__margin">
    <div class="cols">
        <div class="xs-6 sm-6 md-6">
            <div class="thumbnail thumbnail__custom thumbnail-fluid" onclick="location.href ='/trouwkaarten';">
                <img class="img-responsive img-center" src="/media/Banner_homepage_trouwkaart.png" />
                <div class="thumbnail-footer thumbnail-footer__custom text-center">
                    <h3>Trouwkaarten</h3>
                </div>
            </div>
        </div>
        <div class="xs-6 sm-6 md-6">
            <div class="thumbnail thumbnail-fluid thumbnail__custom" onclick="location.href ='/save-the-date';">
                <img class="img-responsive img-center" src="/media/Banner_homepage_savethedate.png" />
                <div class="thumbnail-footer thumbnail-footer__custom text-center">
                    <h3>Save the date</h3>
                </div>
            </div>
        </div>
    </div>
</div>
            

Banner columns - 3 columns




<div class="container container-fluid mobile__margin">          
    <div class="cols">
        <div class="xs-12 md-4">
            <div class="thumbnail thumbnail-fluid thumbnail__custom" onclick="location.href ='/alle-geboortekaartjes';">
                <img class="img-responsive img-center mobile__hide" src="/media/Banner_homepage_geboorte.png" />
                <div class="thumbnail-footer thumbnail-footer__custom text-center">
                    <h3>Geboorte</h3>
                </div>
            </div>
        </div>
        <div class="xs-12 md-4">
            <div class="thumbnail thumbnail-fluid thumbnail__custom" onclick="location.href ='/verlovingskaarten';">
                <img class="img-responsive img-center mobile__hide" src="/media/Banner_homepage_verloving.png" />
                <div class="thumbnail-footer thumbnail-footer__custom text-center">
                    <h3>Verloving</h3>
                </div>
            </div>
        </div>
        <div class="xs-12 md-4">
            <div class="thumbnail thumbnail-fluid thumbnail__custom" onclick="location.href ='/zelf-ontwerpen';">
                <img class="img-responsive img-center mobile__hide" src="/media/Banner_homepage_zelfmaken.png" />
                <div class="thumbnail-footer thumbnail-footer__custom text-center">
                    <h3>Zelf maken</h3>
                </div>
            </div>
        </div>
    </div>
</div>
            

Banner columns - 4 columns




<div class="container container-fluid mobile__margin">
    <div class="cols">
        <div class="xs-12 md-3">
            <div class="thumbnail thumbnail-fluid thumbnail__custom" onclick="location.href ='/grafisch-ontwerp';">
                <img class="img-responsive img-center mobile__hide" src="/media/Banner_homepage_designstudio.png" />
                <div class="thumbnail-footer thumbnail-footer__custom text-center">
                    <h3>Design studio</h3>
                </div>
            </div>
        </div>
        <div class="xs-12 md-3">
            <div class="thumbnail thumbnail-fluid thumbnail__custom" onclick="location.href ='/prijzen';">
                <img class="img-responsive img-center mobile__hide" src="/media/Banner_homepage_prijzen.png" />
                <div class="thumbnail-footer thumbnail-footer__custom text-center">
                    <h3>Prijzen</h3>
                </div>
            </div>
        </div>
        <div class="xs-12 md-3">
            <div class="thumbnail thumbnail-fluid thumbnail__custom" onclick="location.href ='/enveloppen-info';">
                <img class="img-responsive img-center mobile__hide" src="/media/Banner_homepage_enveloppen.png" />
                <div class="thumbnail-footer thumbnail-footer__custom text-center">
                    <h3>Enveloppen</h3>
                </div>
            </div>
        </div>
        <div class="xs-12 md-3">
            <div class="thumbnail thumbnail-fluid thumbnail__custom" onclick="location.href ='#';">
                <img class="img-responsive img-center mobile__hide" src="/media/Banner_homepage_extras.png" />
                <div class="thumbnail-footer thumbnail-footer__custom text-center">
                    <h3>Extra's</h3>
                </div>
            </div>
        </div>
    </div>
</div>
            

Tekst columns - 2 columns


Maak gebruik van onze Design Studio

Ben je op zoek naar een unieke kaart, geheel afgestemd op jouw wensen? Dan kunnen wij ook speciaal voor jou een exclusief ontwerp maken. Een ontwerp dat past bij jouw persoonlijkheid, gelegenheid en stijl. Neem vrijblijvend contact met ons op, zodat we samen kunnen bespreken wat de mogelijkheden zijn.

Zelf ontwerpen: extra persoonlijk

Wanneer je klaar bent met het ontwerpen van de kaart, sla je hem op in je account. Via dit account is het heel gemakkelijk om een echte proefdruk te bestellen voor €1,-. Ben je tevreden over de proefdruk? Bestel dan vanuit je account snel en eenvoudig je gepersonaliseerde kaarten.



<div class="container container-fluid mobile__margin">
    <div class="cols">
        <div class="xs-12 md-6">
            <h3>Maak gebruik van onze Design Studio</h3>
            <p>
                Ben je op zoek naar een unieke kaart, geheel afgestemd op jouw wensen? Dan kunnen wij ook
                speciaal voor jou een <a href="/grafisch-ontwerp"><b>exclusief ontwerp</b></a> maken. Een
                ontwerp dat past bij jouw persoonlijkheid, gelegenheid en stijl. Neem vrijblijvend
                <a href="/contact"><b>contact</b></a> met ons op, zodat we samen kunnen bespreken wat de
                mogelijkheden zijn.
            </p>
        </div>

        <div class="xs-12 md-6">
            <h3>Zelf ontwerpen: extra persoonlijk</h3>
            <p>
                Wanneer je klaar bent met het ontwerpen van de kaart, sla je hem op in je
                <a href="/account"><b>account</b></a>. Via dit account is het heel gemakkelijk om een
                <a href="/proefdruk"><b>echte proefdruk</b></a> te bestellen voor €1,-. Ben je tevreden
                over de proefdruk? Bestel dan vanuit je <a href="/account"><b>account</b></a> snel en eenvoudig
                je gepersonaliseerde kaarten.
            </p>
        </div>
    </div>
</div>
            

Button




<button button-primary button-primary__mobile" onclick="location.href='/pocketfolds';">Pocketfolds</button>
            

Advanced columns - 3 columns


Foliedruk

Foliedruk kaarten hebben een luxe en chique uitstraling! Deze unieke collectie kan je zelf aanpassen.

Pocketfolds

Je trouwkaart een exclusief en chique tintje geven? Verstuur jullie trouwkaart dan in een pocketfold!

Proefdruk

Wil je zien hoe jouw kaart er in het echt uit komt te zien? Ontwerp en bestel dan een echte proefdruk!



<div class="container container-fluid mobile__margin">
        <div class="cols">
            <div class="xs-12 sm-4 md-4">
                <div class="thumbnail thumbnail-fluid thumbnail__custom" onclick="location.href ='/trouwkaarten-foliedruk';">
                    <img class="img-responsive img-center" src="/media/Banner_homepage_foliedruk.png" />
                </div>
                <h3>Foliedruk</h3>
                <p>
                    Foliedruk kaarten hebben een luxe en chique uitstraling! Deze unieke collectie kan je zelf aanpassen.
                </p>
                <div class="text-center">
                    <button class="button button-primary button-primary__mobile" onclick="location.href='/trouwkaarten-foliedruk';">Foliedruk</button>
                </div>
            </div>
            <div class="xs-12 sm-4 md-4">
                <div class="thumbnail thumbnail-fluid thumbnail__custom" onclick="location.href ='/pocketfold-bestellen';">
                    <img class="img-responsive img-center" src="/media/Banner_homepage_pocketfold.png" />
                </div>
                <h3>Pocketfolds</h3>
                <p>
                    Je trouwkaart een exclusief en chique tintje geven? Verstuur jullie <a href="/pocketfold">trouwkaart</a> dan in een pocketfold!
                </p>
                <div class="text-center">
                    <button class="button button-primary button-primary__mobile" onclick="location.href='/pocketfold-bestellen';">Pocketfolds</button>
                </div>
            </div>
            <div class="xs-12 sm-4 md-4">
                <div class="thumbnail thumbnail-fluid thumbnail__custom" onclick="location.href ='/proefdruk-maken-vooraf';">
                    <img class="img-responsive img-center" src="/media/Banner_homepage_proefdruk.png" />
                </div>
                <h3>Proefdruk</h3>
                <p>
                    Wil je zien hoe jouw kaart er in het echt uit komt te zien? Ontwerp en bestel dan een echte proefdruk!
                </p>
                <div class="text-center">
                    <button class="button button-primary button-primary__mobile" onclick="location.href='/proefdruk-maken-vooraf';">Proefdruk</button>
                </div>
            </div>
        </div>
    </div>
</div>
            

Page devider - Header title


Nieuwe collecties
Sophisticated new designs



<div class="container container-fluid mobile__margin">
    <div class="divider-title">
        <div class="divider-title__content">
            <div class="divider-title__text"><span>Nieuwe collecties</span></div>
            <div class="divider-title__sub-text"><span>Sophisticated new designs</span></div>
        </div>
        <hr>
    </div>
</div>
            

Content blocks + thumbs


Exclusief

Trouwkaarten & Letterpress

Modern of klassiek, letterpress is hip!



<div class="container container-fluid mobile__margin">    
    <div class="cols cols-eq-height">
        <div class="xs-12 md-4">
            <div class="thumb" onclick="location.href = '/trouwkaarten/chique';">
                <a href="/trouwkaarten/chique"><img class="img-responsive img-center" src="/media/Bannerletterpresspagina01.png" /></a>
            </div>
        </div>

        <div class="xs-12 md-4">
            <div class="box-title">
                <div class="box-title__overlay">
                    <span class="box-title__title">Exclusief</span>
                </div>
                <div class="box-title__content">
                    <div class="box-title__text"><h3>Trouwkaarten & Letterpress</h3></div>
                    <div class="box-title__sub-text"><p>Modern of klassiek, letterpress is hip!</p></div>
                </div>
            </div>
        </div>

        <div class="xs-12 md-4">
            <div class="thumb" onclick="location.href = '/trouwkaarten/chique';">
                <a href="/trouwkaarten/chique"><img class="img-responsive img-center" src="/media/Bannerletterpresspagina02.png" /></a>
            </div>
        </div>
    </div>
</div>
            

Banner & content block


Enveloppen

29 kleuren

Voor elk formaat een envelop!

    

<div class="container container-fluid mobile__margin">
    <div class="container container-fluid mobile__margin">
        <div class="cols cols-eq-height margin-b-40">
            <div class="xs-12 md-8">
                <div class="thumb" onclick="location.href = '#';">
                    <a href="#"><img class="img-responsive img-center" src="/media/enveloppeninfo02.png"/></a>
                </div>
            </div>

            <div class="xs-12 md-4">
                <div class="box-title">
                    <div class="box-title__overlay">
                        <span class="box-title__title">Enveloppen</span>
                    </div>
                    <div class="box-title__content">
                        <div class="box-title__text"><h3>29 kleuren</h3></div>
                        <div class="box-title__sub-text"><p>Voor elk formaat een envelop!</p></div>
                        <div class="box-title__button"><a class="button button-primary button-sm" href="/bestel_details?keuze=enveloppen">Bestel hier</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
            

Content blocks + buttons


Prijzen

Bekijk onze prijslijst met alle prijzen, formaten, papiersoorten en enveloppen.

Enveloppen

Kies uit een ruim assortiment aan enveloppen in 18 kleuren en alle bijpassende formaten.

Ontwerp tips

Lees altijd even onze ontwerp tips door, dan weet je zeker dat je kaart grafisch en druktechnisch altijd klopt!

      

<div class="container container-fluid mobile__margin">
    <div class="cols cols-eq-height">
        <div class="xs-12 md-4">
            <div class="box-title">
                <div class="box-title__content">
                    <div class="box-title__text"><h3>Prijzen</h3></div>
                    <div class="box-title__sub-text"><p>Bekijk onze prijslijst met alle prijzen, formaten, papiersoorten en enveloppen.</p></div>
                    <div class="box-title__button"><a class="button button-primary button-sm" href="prijzen">Bekijk Prijzen</a></div>
                </div>
            </div>
        </div>
        <div class="xs-12 md-4">
            <div class="box-title">
                <div class="box-title__content">
                    <div class="box-title__text"><h3>Enveloppen</h3></div>
                    <div class="box-title__sub-text"><p>Kies uit een ruim assortiment aan enveloppen in 18 kleuren en alle bijpassende formaten.</p></div>
                    <div class="box-title__button"><a class="button button-primary button-sm" href="/enveloppen-info">Bekijk Enveloppen</a></div>
                </div>
            </div>
        </div>
        <div class="xs-12 md-4">
            <div class="box-title">
                <div class="box-title__content">
                    <div class="box-title__text"><h3>Ontwerp tips</h3></div>
                    <div class="box-title__sub-text"><p>Lees altijd even onze ontwerp tips door, dan weet je zeker dat je kaart grafisch en
                            druktechnisch altijd klopt!</p></div>
                    <div class="box-title__button"><a class="button button-primary button-sm" href="/ontwerp-tips">Bekijk tips</a></div>
                </div>
            </div>
        </div>
    </div>
</div>
            

Content blocks + images


Letterpress

Exclusieve kaarten met een prachtige indruk op luxueus katoenpapier

Pocketfold

De perfecte manier om jullie trouwkaarten chic te verpakken

Exclusief

Een persoonlijk design voor jullie unieke wedding stationery!



<div class="container container-fluid mobile__margin">
    <div class="cols cols-eq-height margin-b-40">
        <div class="xs-12 md-4">
            <div class="box-title">
                <div class="box-title__img"><a href="/letterpress"><img class="img-responsive img-center" src="/media/0banner251020170706.png"/></a></div>
                <div class="box-title__content">
                    <div class="box-title__text"><h3>Letterpress</h3></div>
                    <div class="box-title__sub-text"><p>Exclusieve kaarten met een prachtige indruk op luxueus katoenpapier</p></div>
                    <div class="box-title__button"><a class="button button-primary button-sm" href="/letterpress">Bekijk Letterpress</a></div>
                </div>
            </div>
        </div>

        <div class="xs-12 md-4">
            <div class="box-title">
                <div class="box-title__img"><a href="/pocketfold-bestellen"><img class="img-responsive img-center" src="/media/0banner251020170807.png"/></a></div>
                <div class="box-title__content">
                    <div class="box-title__text"><h3>Pocketfold</h3></div>
                    <div class="box-title__sub-text"><p>De perfecte manier om jullie trouwkaarten chic te verpakken</p></div>
                    <div class="box-title__button"><a class="button button-primary button-sm" href="/enveloppen-info">Bekijk Pocketfold</a></div>
                </div>
            </div>
        </div>

        <div class="xs-12 md-4">
            <div class="box-title">
                <div class="box-title__img"><a href="/grafisch-ontwerp"><img class="img-responsive img-center" src="/media/banner2017oktexclusief09.png"/></a></div>
                <div class="box-title__content">
                    <div class="box-title__text"><h3>Exclusief</h3></div>
                    <div class="box-title__sub-text"><p>Een persoonlijk design voor jullie unieke wedding stationery!</p></div>
                    <div class="box-title__button"><a class="button button-primary button-sm" href="/ontwerp-tips">Ontwerp op maat</a></div>
                </div>
            </div>
        </div>
    </div>
</div>
            

Showcase - slider




<div id="showcase_swiper" class="swiper__custom">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img class="img-responsive img-center" src="/media/2019januari03.png"/></div>
        <div class="swiper-slide"><img class="img-responsive img-center" src="/media/2019januari04.png"/></div>
        <div class="swiper-slide"><img class="img-responsive img-center" src="/media/2019januari06.png"/></div>
        <div class="swiper-slide"><img class="img-responsive img-center" src="/media/2019januari07.png"/></div>
        <div class="swiper-slide"><img class="img-responsive img-center" src="/media/NCdec20170606.png"/></div>
    </div>
</div>
            

Showcase - slider + buttons




<div id="showcase_swiper" class="swiper__custom">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div><a href="/dagprogramma"><img class="img-responsive img-center" src="/media/Sliderhuwelijksdrukwerkfeb201701.png"/></a></div>
            <div><a class="button button-extra button-xs" href="/dagprogramma">Programma’s</a></div>
        </div>
        <div class="swiper-slide">
            <div><a href="/informatiekaartje"><img class="img-responsive img-center" src="/media/Sliderhuwelijksdrukwerkfeb201704.png"/></a></div>
            <div><a class="button button-extra button-xs" href="/informatiekaartje">Informatiekaarten</a></div>
        </div>
        <div class="swiper-slide">
            <div><a href="/rsvp-kaart"><img class="img-responsive img-center" src="/media/Sliderhuwelijksdrukwerkfeb201703.png"/></a></div>
            <div><a class="button button-extra button-xs" href="/rsvp-kaart">RSVP kaarten</a></div>
        </div>
        <div class="swiper-slide">
            <div><a href="/naamkaartje"><img class="img-responsive img-center" src="/media/Sliderhuwelijksdrukwerkfeb201705.png"/></a></div>
            <div><a class="button button-extra button-xs" href="/naamkaartje">naamkaartjes</a></div>
        </div>
        <div class="swiper-slide">
            <div><a href="/gastenboek-kaartjes"><img class="img-responsive img-center" src="/media/Sliderhuwelijksdrukwerkfeb201706.png"/></a></div>
            <div><a class="button button-extra button-xs" href="/gastenboek-kaartjes">Wedding wishes</a></div>
        </div>
        <div class="swiper-slide">
            <div><a href="/wedding-vow-kaarten"><img class="img-responsive img-center" src="/media/Sliderhuwelijksdrukwerkfeb201702.png"/></a></div>
            <div><a class="button button-extra button-xs" href="/wedding-vow-kaarten">Wedding vows</a></div>
        </div>
    </div>
</div>
            

Prijscalculator ×

Kies een categorie

Soort kaart

Formaat

Papiersoort

Enveloppen

Aantal kaarten

Aantal enveloppen

Totaalprijs: