Stijlgids

Typografie
HTML Headings Tags
HTML tags definiëren standaard kop stijlen.
Alle H1-koppen

Rubriek 1

Alle H2-koppen

Rubriek 2

Alle H3-koppen

Rubriek 3

Alle H4-koppen

Rubriek 4

Alle H5 rubrieken
Rubriek 5
Alle H6-koppen
Rubriek 6
Koptekstklassen
Koptekstklassen wanneer de typografiestijl niet overeenkomt met de standaard HTML-tag.
opmaak-h1

Titel-stijl-h1

opmaak-h2

Titel-stijl-h2

opmaak-h3

Titel-stijl-h3

opmaak-h4

Titel-stijl-h4

opmaak-h5

Titel-stijl-h5

opmaak-h6

Titel-stijl-h6

Andere HTML Tags
HTML tags definiëren standaard tekststijlen.
Alle alinea's

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Alle koppelingen
Alle koppelingen
Alle Blok Citaten
Blok quota
Alle ongeordende lijsten

  • Geen opsommingsteken

  • Geen opsommingsteken

Alle ongeordende lijsten

  • Geen opsommingsteken

  • Geen opsommingsteken

Alle geordende lijsten

  1. Geen opsommingsteken

  2. Geen opsommingsteken

  3. Geen opsommingsteken

Tekstgrootte
Tekstgrootteklassen wanneer de typografische grootte niet overeenkomt met de standaard HTML-tag.
tekstgrootte-groot

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

tekstgrootte-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

tekstgrootte-regelmatig

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

tekst-grootte-klein

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

tekstgrootte-tiny

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Tekstgewichten
Tekstgewichtklassen wanneer het typografiegewicht niet overeenkomt met de standaard HTML-tag.
tekst-gewicht-xbold
tekst-gewicht-xbold (800)
vetgedrukt
tekst-gewicht-vet (700)
tekst-gewicht-semibold
tekst-gewicht-semibold (600)
tekst-gewicht-middel
tekst-gewicht-gemiddeld (500)
tekst-gewicht-normaal
tekst-gewicht-normaal (400)
tekst-gewicht-licht
tekst-gewicht-licht (300)
Tekststijlen
Tekststijlklassen wanneer de typografische stijl niet overeenkomt met de standaard HTML-tag.
tekststijl-hoofdletters
tekststijl-hoofdletters
tekststijl doorhalen
tekststijl doorhalen
tekststijl-allcaps
tekststijl-allcaps
tekststijl-nowrap
tekststijl-nowrap
tekst-stijl-quote
tekst-stijl-quote
tekststijl-link
tekststijl-link
tekststijl-2 regels
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
tekststijl-3 regels
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
tekststijl-muted
tekststijl-muted
Tekstuitlijning
Tekstuitlijningsklassen wanneer de typografische uitlijning niet overeenkomt met de standaard HTML-tag.
tekst-links uitlijnen
tekst-links uitlijnen
tekst-uitlijning-centraal
tekst-uitlijning-centraal
tekst-uitlijning-rechts
tekst-uitlijning-rechts
Rijke tekst
tekst-rijk-tekst

Rubriek 1

Rubriek 2

Rubriek 3

Rubriek 4

Rubriek 5
Rubriek 6
Dit is een blokcitaat

Met het rich text-element kun je koppen, alinea's, blokcitaten, afbeeldingen en video's maken en opmaken, allemaal op één plek, in plaats van dat je ze afzonderlijk moet toevoegen en opmaken. Dubbelklik gewoon en maak eenvoudig inhoud.

Dit is een link in een rijke tekst

  • Lijst item
  • Lijst item
  • Lijst item
  1. Lijst item
  2. Lijst item
  3. Lijst item
Onderschrift komt hier
Kleuren
Kleurenpalet
is-zwart
is-wit
is-grijs
Voeg vooraf gemaakte Kleurpaletten toe
Krijg toegang tot vooraf gemaakte Kleurpaletten en plak ze hieronder.
Kleurenpaletten bekijken
Kleurenpalet klikken en plakken
Achtergrondkleur
Beheer terugkerende achtergrondkleuren.
achtergrondkleur-zwart
achtergrondkleur-wit
achtergrondkleur-grijs
Voeg kant-en-klare achtergrondkleuren toe
Krijg toegang tot kant-en-klare kleurenpaletten en plak ze hieronder.
Achtergrondkleuren weergeven
Kleurenpalet klikken en plakken
Tekstkleur
Beheer terugkerende tekstkleuren.
tekstkleur-wit
tekstkleur-wit
tekstkleur-zwart
tekstkleur-zwart
Voeg vooraf gemaakte tekstkleuren toe
Krijg toegang tot vooraf gemaakte tekstkleuren en plak ze hieronder.
Tekstkleuren weergeven
Kleurenpalet klikken en plakken
Effecten
Box Shadows
‍Met schaduwen kunje diepte en realisme toevoegen aan ontwerpen door elementen op een z-as te plaatsen.
Wil je leren hoe je schaduwklassen op de Client-first manier kunt gebruiken?
Handleiding bekijken
schaduw-xx klein
schaduw-xklein
schaduw-klein
schaduw-medium
schaduw-groot
schaduw-xgroot
schaduw-xx groot
UI-elementen
Knoppen
knop
Knop
knop
is-klein
Knop
knop
is-secundair
Knop
knop
is-secundair
is-klein
Knop
knop
is-link
Knop
Voor gebruik op een donkere achtergrond gebruik je eenvoudig de add-on klasse is-alternate
knop
is-alternatief
Knop
knop
is-alternatief
is-klein
Knop
knop
is-secundair
is-alternatief
Knop
knop
is-secundair
is-klein
is-alternatief
Knop
knop
is-link
is-alternatief
Knop
Knoppen met pictogrammen
knop
is-icon
Knop
knop
is-klein
is-icon
Knop
knop
is-secundair
is-icon
Knop
knop
is-secundair
is-klein
is-icon
Knop
knop
is-link
is-icon
Knop
Vormelementen
veldlabel
formulierinvoer
formulierinvoer
is-tekstgebied
formulierinvoer
is-select-input
formulier-checkbox
formulier-radio
knop
Hartelijk dank! Je inzending is ontvangen!
Oeps! Er is iets misgegaan bij het verzenden van het formulier.
Pictogrammen (Afbeelding)

icoon-hoogte-xx-klein

icoon-hoogte-x-klein

icoon-hoogte-klein

pictogram-hoogte-middel

icoon-hoogte-groot

icoon-hoogte-xlarge

icoon-hoogte-custom1

pictogram-1x1-xx-klein

pictogram-1x1-xklein

pictogram-1x1-klein

pictogram-1x1-medium

pictogram-1x1-groot

pictogram-1x1-xgroot

pictogram-1x1-custom1

Pictogrammen (HTML Embed)
Met HTML embed-pictogrammen kun je de kleur van het pictogram bij zweven bepalen.

pictogram-insluiten-xx-klein

pictogram-afbeelding-x-klein

pictogram-insluiten-klein

pictogram-afbeelding-medium

groot pictogram

pictogram-afbeelding-groot

pictogram-afbeelding-custom1

Structuur Klassen
Gedefinieerde en flexibele kernstructuur die we op alle of de meeste pagina's kunnen gebruiken.
pagina-wrapper
hoofd-wrapper
container-klein
container medium
container-groot
opvulling globaal
opvul-sectie-klein
opvulsectie-medium
opvulsectie-groot
knoppengroep
Max breedtes
Gebruik de CSS-eigenschap max-width om de binneninhoud een maximale breedte te geven.
maximale breedte
max-breedte-volledig-tablet
max-breedte-volledig-portret
max-breedte-volledig-landschap
max-breedte-xx groot
max-breedte-xlarge
maximale breedte
max-breedte-medium
max-breedte-klein
max-breedte-xklein
max-breedte-xx-klein
Vullingen
Richting Klassen
opvulling-onder
opvulling-top
opvulling-verticaal
opvulling-horizontaal
opvulling-links
opvulling-rechts
Grootteklassen
opvulling-0
vulling-tiny
opvulling-xx-klein
opvulling-xklein
opvulling-klein
opvulling-medium
opvulling-groot
opvulling-xlarge
opvulling-xx groot
opvulling-groot
vulling-xhuge
padding-xxhuge
opvulling-custom1
opvulling-custom2
opvulling-custom3
Marges
Richting Klassen
marge-bodem
marge boven
marge-verticaal
marge-horizontaal
marge-links
marge-rechts
Grootteklassen
marge-0
marge-tiny
marge-xx klein
marge-x-klein
marge-klein
marge-medium
marge-groot
marge-ximaal
marge-xx groot
marge-groot
marge-groot
marge-xx groot
marge-custom1
marge-custom2
marge-custom3
Gebruiksklassen
Nuttige utiliteitsklassen die we graag gebruiken in de meeste van onze projecten om sneller te bouwen.
verbergen
Dit element is verborgen
verborgen tablet
verberg-mobiel-portret
verberg-mobiel-landschap
overloop-zichtbaar
overloop-verborg
overloop-auto
overloop-scroll
pointer-events-on
pointer-events-off
laag
div-vierkant
afstand-schoon
uitlijnen-centreren
z-index-1
z-index-2
display-inlineflex
marge-top-auto