Gebruik
De achtergrondkleur kan gezet worden met een class .content-background
en een modifier voor de kleur, de tekstkleur verandert automatisch mee zodat er
voldoende contrast wordt behouden.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non tellus dapibus mauris ullamcorper imperdiet hendrerit eu lorem. Nulla convallis tincidunt lacinia. Pellentesque blandit dolor non ante ullamcorper, id bibendum urna porta.
Nesting
Wanneer er binnen een content vlak een nieuw vlak met een andere kleur nodig is,
gebruik je een .inner-section
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non tellus dapibus mauris ullamcorper imperdiet hendrerit eu lorem. Nulla convallis tincidunt lacinia. Pellentesque blandit dolor non ante ullamcorper, id bibendum urna porta.
Nulla convallis tincidunt lacinia. Pellentesque blandit dolor non ante ullamcorper, id bibendum urna porta.
Beschikbare kleuren
-
background--
violet -
background--
violet-tint-1 -
background--
violet-tint-2 -
background--
roze -
background--
roze-tint-1 -
background--
roze-tint-2 -
background--
rood -
background--
rood-tint-1 -
background--
rood-tint-2 -
background--
robijnrood -
background--
robijnrood-tint-1 -
background--
robijnrood-tint-2 -
background--
paars -
background--
paars-tint-1 -
background--
paars-tint-2 -
background--
oranje -
background--
oranje-tint-1 -
background--
oranje-tint-2 -
background--
lichtblauw -
background--
lichtblauw-tint-1 -
background--
lichtblauw-tint-2 -
background--
hemelblauw -
background--
hemelblauw-tint-1 -
background--
hemelblauw-tint-2 -
background--
donkerblauw -
background--
donkerblauw-tint-1 -
background--
donkerblauw-tint-2 -
background--
geel -
background--
geel-tint-1 -
background--
geel-tint-2 -
background--
donkergeel -
background--
donkergeel-tint-1 -
background--
donkergeel-tint-2 -
background--
mintgroen -
background--
mintgroen-tint-1 -
background--
mintgroen-tint-2 -
background--
mosgroen -
background--
mosgroen-tint-1 -
background--
mosgroen-tint-2 -
background--
groen -
background--
groen-tint-1 -
background--
groen-tint-2 -
background--
donkergroen -
background--
donkergroen-tint-1 -
background--
donkergroen-tint-2 -
background--
bruin -
background--
bruin-tint-1 -
background--
bruin-tint-2 -
background--
donkerbruin -
background--
donkerbruin-tint-1 -
background--
donkerbruin-tint-2
Grijstinten
-
background--
grijs-1 -
background--
grijs-2 -
background--
grijs-3 -
background--
grijs-4 -
background--
grijs-5 -
background--
grijs-6 -
background--
grijs-7 -
background--
grijs-8 -
background--
grijs-9 -
background--
grijs-10 -
background--
grijs-11 -
background--
grijs-12 -
background--
grijs-13 -
background--
grijs-14 -
background--
grijs-15 -
background--
grijs-16 -
background--
grijs-17 -
background--
grijs-18 -
background--
grijs-19 -
background--
grijs-20