Alt tekst for google

Image with class 'text-center header-visual'

Primaire kleuren







hoofdkleur, basiskleur voor alle links en primaire e-com functionaliteiten
.bg-brandcolor
achtergrond
.c-brandcolor
tekst
HEX
#009647
RGB
0 150 71
CMYK
100 0 96 0
Pantone
348 C
RAL
6024






wit, basiskleur voor alle basis achtergronden
.bg-white
achtergrond
.c-white
tekst
HEX
#FFFFFF
RGB
255 255 255

Secundaire kleuren




basiskleur voor alle links en als ondersteunende kleur
.bg-green
achtergrond
.c-green
tekst
HEX
#89BE2B
RGB
0 150 71
CMYK
100 0 96 0
Pantone
348 C
RAL
6024



hoofd call to action kleur op een niet ecom pagina
.bg-purple
achtergrond
.c-purple
tekst
HEX
#524596
RGB
82 69 150
CMYK
82 69 150



ondersteunende achtergrondkleur
.bg-mint
achtergrond
.c-mint
tekst
HEX
#CEE6D4
RGB
206 230 212
CMYK
24 0 22 0
Pantone
566 C
RAL
6019



basiskleur voor alle links en als ondersteunende kleur
.bg-black
achtergrond
.c-black
tekst
HEX
#1D1D1B
RGB
0 0 0
CMYK
0 0 0 100

basic-sans,sans-serif

Basic Sans

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTU

0123456789

:;/!?&%€

 

Basic Sans regular

Basic Sans bold

Basic Sans black italic

NeueCampton-Regular

Campton

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTU

0123456789

:;/!?&%€

 

Campton book

Campton Bold

Solucious Styleguide

Solucious theme build upon Bootstrap 3, v3.3.7.

Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only. Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto, and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. 

https://getbootstrap.com/docs/3.3/css/

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Paragraph text ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.

Heading 1 class bold c-green-1

Heading 2 class bold c-bluelight

Heading 3 class bold text-center

Heading 4

Heading 5

Heading 3 class h1

  • Text element with class 'custom_list li-pink' other colors:
  • li-coffee
  • li-coffee-3
  • li-coffee-4
  • li-pink
  • li-purple
  • li-orange-3
  • li-blue
  • li-yellow
  • li-green

Button tags

Link





<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Margin & Padding

Margin

m = margin
t = top
r = right
b = bottom
l = left

Space: 1 - 10, 1=10px, 10=100px

Classes to remove margins:

  • m-0
  • mt-0
  • mr-0
  • mb-0
  • ml-0

 

Example: mt-3 = margin-top: 30px

Padding

p = padding
t = top
r = right
b = bottom
l = left

Space: 1 - 10, 1=10px, 10=100px

Classes to remove padding:

  • p-0
  • pt-0
  • pr-0
  • pb-0
  • pl-0

 

Example: pt-3 = padding-top: 30px

Color classes

'c-' stands for color, to use on text elements

'bg-' stands for background-color, useful on articles / full width rows

c-brandcolor
bg-brandcolor
#9CC929

c-green-1
bg-green-1
#8FC302

c-green-2
bg-green-2
#7BA703

c-orange-1
bg-orange-1
#ff7900

c-orange-2
bg-orange-2
#e06a00

c-bluelight
bg-bluelight
#0077c0

c-red
bg-red
#D0021B

c-black
bg-black
#000000

c-white
bg-white
#FFFFFF

c-gray-1
bg-gray-1
#58363F

c-gray-2
bg-gray-2
#E5E5E5

c-gray-3
bg-gray-3
#D8D8D8

c-gray-4
bg-gray-4
#9B9B9B

c-gray-5
bg-gray-5
#5d5d5d

c-gray-6
bg-gray-6
#282828

c-gray-7
bg-gray-7
#4C4C4C

c-gray-8
bg-gray-8
#F7F5F5

c-gray-9
bg-gray-9
#58363F

c-coffee
bg-coffee
#C8A177

c-coffee-2
bg-coffee-2
#b5814a

c-coffee-3
bg-coffee-3
#815e64

c-coffee-4
bg-coffee-4
#61363d

c-pink
bg-pink
#eb70b1

c-orange-3
bg-orange-3
#5e3940

c-purple
bg-purple
#f56644

c-blue
bg-blue
#5599ac

Hoe bestel je?

Vul je winkelmandje

Kies je bezorgmoment

Plaats je bestelling

Ontvang je bestelling

Log in

Article with container ID

Col md 4

The article has an Id 'container' and a Class 'row'. This content element has a class 'col-md-4 pt-3 pb-3'. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. https://getbootstrap.com/docs/3.3/css/#grid-example-basic

Col md 4

The article has an Id 'container' and a Class 'row'. This content element has a class 'col-md-4 pt-3 pb-3'. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. https://getbootstrap.com/docs/3.3/css/#grid-example-basic

Col md 4

The article has an Id 'container' and a Class 'row'. This content element has a class 'col-md-4 pt-3 pb-3'. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. https://getbootstrap.com/docs/3.3/css/#grid-example-basic

Article without container ID

Image with a class 'stretch' will set the image to 100% width

Col md 4

The article has only a Class 'row'. This content element has a class 'col-md-4 pt-3 pb-3'. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. https://getbootstrap.com/docs/3.3/css/#grid-example-basic

Col md 4

The article has only a Class 'row'. This content element has a class 'col-md-4 pt-3 pb-3'. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. https://getbootstrap.com/docs/3.3/css/#grid-example-basic

Col md 4

The article has only a Class 'row'. This content element has a class 'col-md-4 pt-3 pb-3'. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. https://getbootstrap.com/docs/3.3/css/#grid-example-basic