Gradients

Gradients trekken de aandacht. Door gradient-achtergronden te gebruiken, kun je secties zonder afbeeldingen eenvoudig visueel aantrekkelijker maken. Je kunt zo ook CTA-blokken of hero-secties of bepaalde woorden extra benadrukken.

GBC framework gradients

Je kunt gebruik maken van vier soorten gradients:

De gradients hebben een aantal kleurvariaties op basis van de kleuren uit je kleurenpallet.

  1. Gradiënttekst
  2. Gradiëntoverlays
  3. Sectiegradients
  4. CTA-gradiënten

Heading

Gradiënttekst

Met tekstgradients laat je een stukje tekst extra opvallen. Handig in slogans of speciale promoties. Gebruik het spaarzaam om impact te behouden. In Generateblocks is het heel eenvoudig. Maak een container en plaats daar een aantal headline blocks in met Display Inline Flex. Door Display Inline Flex blijft het een doorlopende zin, anders zou elke blok op een nieuwe regel beginnen. Geef een headline block een tekstgradiënt om de tekst te benadrukken. Let op: gebruik wel een harde spatie (non-breaking space:  ). Je kunt kiezen uit twee kleurvariaties:

  • gbc-gradient-tekst–primary
  • gbc-gradient-tekst–secondary

Met een gradiënttekst is

benadrukken

zo eenvoudig!

Met een gradiënttekst is

benadrukken

zo eenvoudig!

Met een gradiënttekst is benadrukken zo eenvoudig!

Met een gradiënttekst is

benadrukken

zo eenvoudig!

Gradiëntoverlays

Tekst op een afbeelding is soms best lastig leesbaar te maken.

Tekst zonder een gradiëntoverlay

Door een gradiëntoverlay te gebruiken wordt de tekst beter leesbaar.

.gbc-gradient-overlay–primary

Je hebt de keuze uit verschillende kleuren.

.gbc-gradient-overlay–secondary

Let op leesbaarheid. Pas eventueel de kleur van je tekst aan.

.gbc-gradient-overlay–contrast

Sectiegradients

135deg of to right

45deg of 135deg
gebruik .gbc-gradient-section om aandacht van gebruiker te trekken en een dynamische indruk te geven.

gbc-gradient-section–primary

gbc-gradient-section–secondary

gbc-gradient-section–contrast

CTA-gradiënten

to right of 90deg gebruik .gbc-gradient-cta om call-to-action knoppen extra te laten opvallen.

gbc-gradient-cta–primary

gbc-gradient-cta–secondary

gbc-gradient-cta–contrast

Gradient Utility Classes voor Richtingen:
.gbc-gradient-direction–to-right: Voor een lineaire gradient van links naar rechts.
.gbc-gradient-direction–to-bottom: Voor een lineaire gradient van boven naar beneden.
.gbc-gradient-direction–45deg: Voor een gradient in een hoek van 45 graden.
.gbc-gradient-direction–135deg: Voor een gradient in een hoek van 135 graden.
.gbc-gradient-direction–to-top-left: Voor een gradient diagonaal van rechtsonder naar linksboven.