Content Sjabloon
Typographie
Titel 1:
Lorem ipsum dolor sit amet
<header>
<h1>zet hier je eigen tekst neer</h1>
</header>
Titel 2:
Lorem ipsum dolor sit amet
<header>
<h2>zet hier je eigen tekst neer</h2>
</header>
Titel 3:
Lorem ipsum dolor sit amet
<header>
<h3>zet hier je eigen tekst neer</h3>
</header>
Paragraaf
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec pretium dui. Duis gravida placerat sapien. Nulla facilisi. Donec molestie volutpat nisi, ut faucibus dolor pharetra tincidunt. Nullam at gravida ipsum.
<p class="lead">zet hier je eigen tekst neer</p>
Buttons
Soorten buttons
<div class="button-group">
<a class="btn configuration_button_listing justify-content-xs-center justify-content-lg-start" href="/">
<span>button tekst hier</span>
</a>
</div>
<div class="button-group">
<a class="btn configuration_button_general justify-content-xs-center justify-content-lg-start" href="/">
<span>button tekst hier</span>
</a>
</div>
<div class="button-group">
<a class="btn configuration_button_productinfo justify-content-xs-center justify-content-lg-start" href="/">
<span>button tekst hier</span>
</a>
</div>
Twee buttons naast elkaar
<div class="button-group d-flex flex-xs-column flex-lg-row">
<a class="btn configuration_button_listing justify-content-xs-center justify-content-lg-start" href="/">
<span>button tekst hier</span>
</a>
<a class="btn configuration_button_general justify-content-xs-center justify-content-lg-start" href="/">
<span>button tekst hier</span>
</a>
</div>
Gecentreerde buttons
<div class="button-group d-flex justify-content-center flex-xs-column flex-lg-row">
<a class="btn configuration_button_listing justify-content-xs-center justify-content-lg-start" href="/">
<span>button tekst hier</span>
</a>
<a class="btn configuration_button_general justify-content-xs-center justify-content-lg-start" href="/">
<span>button tekst hier</span>
</a>
</div>
Button link
<div class="button-group d-flex justify-content-end">
<a class="btn btn-link link-icon-right justify-content-xs-center justify-content-lg-start" href="/">
<span>button tekst hier</span>
<i class="icon icon-arrow-right8"<​</i>
</a>
</div>
Bulletlists
USP list
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
<div class="usp-list">
<ul>
<li class="d-flex">
<i class="icon icon-checkmark">​</i>
<span>zet hier je tekst neer</span>
</li>
<li class="d-flex">
<i class="icon icon-checkmark">​</i>
<span>zet hier je tekst neer</span>
</li>
<li class="d-flex">
<i class="icon icon-checkmark">​</i>
<span>zet hier je tekst neer</span>
</li>
</ul>
</div>
Unordered list
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
<ul>
<li>
<span>zet hier je tekst neer</span>
</li>
<li>
<span>zet hier je tekst neer</span>
</li>
<li>
<span>zet hier je tekst neer</span>
</li>
</ul>
Unordered link list met arrow icons
<ul class="no-bullets">
<li>
<i class="icon icon-arrow-right5">​</i>
<a href="/"><span>zet hier je tekst neer</span></a>
</li>
<li>
<i class="icon icon-arrow-right5">​</i>
<a href="/"><span>zet hier je tekst neer</span></a>
</li>
<li>
<i class="icon icon-arrow-right5">​</i>
<a href="/"><span>zet hier je tekst neer</span></a>
</li>
</ul>
Contact
Contact information list
<div class="contact-info">
<a href="mailto:info@reisgemak-online.nl" class="d-flex flex-row">
<div>
<i class="icon icon-envelop5">​</i>
</div>
<div>
<span>info@reisgemak-online.nl</span>
</div>
</a>
<a href="tel:+31618119184" class="d-flex flex-row">
<div>
<i class="icon icon-phone">​</i>
</div>
<div>
<span>+31 (0)6 - 181 19 184</span>
</div>
</a>
<div class="whatsapp d-flex">
<a href="https://api.whatsapp.com/send?phone=0627323506" target="_blank" title="whatsapp-number" class="d-flex flex-row align-items-center">
<i class="whatsapp-icon">​</i>
<span>+31 (0)6 - 273 23 506</span>
</a>
</div>
<p>Btw: NL850942822B01<br>
KvK: 53597605</p>
</div>
Overige Elementen
Extra CTA Blokken
GRATIS
aansteker bij aanschaf van een COBB BBQ
EXTRA
cadeaubon bij aanschaf van een COBB BBQ
<div class="CtaExtrasDiv" id="CtaExtrasDiv">
<div class="CtaExtrasDivRegel d-flex flex-column flex-lg-row">
<div class="CtaExtrasDivItem1">
<div class="CtaExtrasDivItem">
<div class="CtaExtrasDivItemLeft"><img alt="GRATIS aansteker" src="/images/GratisAansteker2.jpg" style="width: 250px;" /></div>
<div class="CtaExtrasDivItemMiddle d-flex align-items-center">
<span class="d-flex align-items-center"><strong>GRATIS</strong></span>
<p>plaats hier je tekst</p>
</div>
</div>
</div>
<div class="CtaExtrasDivItem1">
<div class="CtaExtrasDivItem">
<div class="CtaExtrasDivItemLeft"><img alt="Cadeaubon" src="/images/GratisCadeaubon.jpg" style="width: 250px;" /></div>
<div class="CtaExtrasDivItemMiddle d-flex align-items-center">
<span class="d-flex align-items-center"><strong>EXTRA</strong></span>
<p>plaats hier je tekst</p>
</div>
</div>
</div>
</div>
</div>
Warning tekst
Let op:
Om de code te kunnen gebruiken dient u ook de toilettas in de winkelwagen te plaatsen. Daarna zal de couponcode dit bedrag weer als korting verrekenen.
<div class="warning d-flex align-items-center">
<span class="warning-text d-flex align-items-center">Let op:</span>
<p>warning tekst hier plaatsen</p>
</div>
Kleuren
Black
Night Rider
Dim Grey
Dark Grey
Whisper
White Smoke 2
White Smoke
White
Eden
Gulf Stream
Downly
Morning Glory
Parsley
Light Green
Fruit Salad
Granny Apple
Crusta
Mandys Pink
Watusi
Old Lace
Summer Sky
Light Sky Blue
Pattens Blue
Alice Blue
Turbo
Kournikova
Cream Brulee
Floral White
Sunflower
Golden Sand
Pale Goldenrod
Promenade
Cardinal
Amaranth
Mauvelous
Pink Lace
Facebook 1
Facebook 2
Facebook 3
Facebook 4
Instagram 1
Instagram 2
Instagram 3
Instagram 4
Twitter 1
Twitter 2
Twitter 3
Twitter 4
Om een kleur te gebruiken in de CSS kan je een van de volgende root variabelen gebruiken:
:root {
--white: #FFF;
--white-smoke: #F8F8F8;
--white-smoke-2: #F0F0F0;
--whisper: #E5E5E5;
--dark-grey: #ABABAB;
--dim-grey: #6E6E6E;
--night-rider: #222;
--black: #000;
--eden: #195B51;
--gulf-stream: #76B9B5;
--downy: #73C7C7;
--morning-glory: #8CDCDC;
--parsley: #2A5B2C;
--light-green: #E1F8E4;
--fruit-salad: #45C456;
--granny-apple: #CCF3D7;
--crusta: #E78953;
--mandys-pink: #F0B491;
--watusi: #F5CFB9;
--old-lace: #FCF6E8;
--summer-sky: #37A6EC;
--light-sky-blue: #7FC6F3;
--pattens-blue: #BDE1F9;
--alice-blue: #F2FAFF;
--turbo: #FFC61B;
--kournikova: #FFD149;
--cream-brulee: #FFE7A1;
--floral-white: #FFFDF7;
--sunflower: #D9C410;
--golden-sand: #E7D966;
--pale-goldenrod: #F3ECB1;
--promenade: #F5F3E2;
--cardinal: #B61534;
--amaranth: #D43553;
--mauvelous: #E997A7;
--pink-lace: #F7CED6;
--facebook-1: #3B5998;
--facebook-2: #8B9DC3;
--facebook-3: #DFE3EE;
--facebook-4: #F7F7F7;
--twitter-1: #0084B4;
--twitter-2: #00ACED;
--twitter-3: #C0DEED;
--twitter-4: #1DCAFF;
--instagram-1: #C32AA3;
--instagram-2: #4C68D7;
--instagram-3: #FBAD50;
--instagram-4: #FCCC63;
}
Stel je wilt bijvoorbeeld de body een witte achtergrond geven, dan moet je het volgende schrijven in CSS:
body {
background-color: var(--white);
}
