Naar Core

Colors

DUO maakt gebruik van de kleuren uit de rijkshuisstijl. Deze kleuren kunnen ook als achtergrond kleur gebruikt worden

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