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

Gradiëntoverlays

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

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

Je hebt de keuze uit verschillende kleuren.

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

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.