Typografie
Kleuren
Effecten
UI-elementen
Structuur Klassen
Max breedtes
Vullingen
Marges
Afstandhouders
Utility

Relume Stijlgids

Client-First V2.1 - Laatst bijgewerkt op 09 jan 2024
Documenten voor de klant
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 rubrieken
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
koptekst-stijl-voorkoptekst
Titel-stijl-h6
Uitgelichte tekst
Voor tekst die moet opvallen op een landingspagina zonder kop.
tekst-gelicht-klein

tekst uitgelicht

tekst-gemarkeerd-medium

tekst uitgelicht

tekst-groot gemarkeerd

tekst uitgelicht

tekst-verlicht-xl

tekst

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 Quote
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-semibold
tekst-gewicht-semibold (600)
tekst-gewicht-normaal
tekst-gewicht-normaal (400)
Tekststijlen
Tekststijlklassen wanneer de typografische stijl niet overeenkomt met de standaard HTML tag.
tekststijl-hoofdletter
tekststijl-hoofdletter
tekststijl doorhalen
tekststijl doorhalen
tekststijl-allcaps
tekststijl-allcaps
tekststijl-nowrap
tekststijl-nowrap
tekst-stijl-quote
tekst-stijl-quote
tekst-stijl-link
tekst-stijl-link
tekststijl-link-no-gradiënt
Tekstlink
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 typografie-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 allemaal op één plek maken en opmaken, 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
Achtergrondkleur
Beheer terugkerende achtergrondkleuren.
achtergrondkleur-zwart
achtergrondkleur-wit
achtergrondkleur-primair
achtergrondkleur-secundair
achtergrondkleur-tertiair
achtergrondkleur-donker-grijs-blauw
achtergrondverloop-1
achtergrondverloop-2
achtergrondverloop-3
Tekstkleur
Beheer terugkerende tekstkleuren.
tekstkleur-wit
tekstkleur-wit
tekstkleur-zwart
tekstkleur-zwart
tekst-kleur-primair
tekst-kleur-primair
tekst-kleur-blauw
tekst-kleur-blauw
tekstkleur-groen
tekstkleur-groen
tekst-kleurverloop
tekst-kleurverloop
tekst-kleur-donker-grijs-blauw
tekst-kleur-donker-grijs-blauw
tekst-kleur-TR-primair
tekst-kleur-TR-primair
Effecten
Box Shadows
‍Met schaduwenkun je diepte en realisme toevoegen aan ontwerpen door elementen op een z-as te plaatsen.
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-donker-grijs-blauw
Knop
knop
is-donker-grijs-blauw
is-klein
Knop
knop
is-secundair
Knop
knop
is-secundair
is-klein
Knop
knop
is-tertiair
Knop
knop
is-tertiair
is-klein
Knop
knop
is-link
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
knop
alleen is-icon
knop
is-klein
alleen is-icon
knop
is-secundair
alleen is-icon
knop
is-secundair
is-klein
alleen is-icon
knop
is-tertiair
alleen is-icon
knop
is-tertiair
is-klein
alleen is-icon
knop
is-link
alleen is-icon
Vormelementen
formulier_veld-label
formulier_invoer
formulier_invoer
is-tekstgebied
formulier_invoer
is-select-input
formulier_vakje
formulier_radio
knop
Hartelijk dank! Je inzending is ontvangen!
Oeps! Er ging iets mis bij het verzenden van het formulier.
Pictogrammen (Afbeelding)

pictogram-hoogte-xx-klein

pictogram-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-embed-xx-klein

pictogram-afbeelding-x-klein

pictogram-insluiten-klein

pictogram-afbeelding-medium

pictogram-groot

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 binnencontent een maximale breedte te geven.
maximale breedte
max-breedte-volle-tablet
max-breedte-volledig-mobiel-landschap
max-breedte-volledig-mobiel-portret
max-breedte-xx-groot
max-breedte-xlarge
max. breedte-groot
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
opvulling-tiny
opvulling-xx-klein
opvulling-xklein
opvulling-klein
opvulling-medium
opvulling-groot
opvulling-xlarge
opvulling-xx groot
opvulling-groot
vulling-xhuge
opvulling-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-xgroot
marge-xx groot
marge-groot
marge-groot
marge-xxhuge
marge-custom1
marge-custom2
marge-custom3
Afstandhouders
Uniform afstandhoudersysteem voor het project.
afstandhouder-tiny
afstandhouder-xklein
afstandhouder-klein
afstandhouder-medium
afstandhouder-groot
afstandhouder-xlarge
afstandhouder-xx groot
afstandhouder-groot
afstandhouder-xhuge
afstandhouder-xxhuge
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-verboden
overloop-auto
overloop-scroll
pointer-events-auto
pointer-events-none
laag
afstand-schoon
uitlijnen-centreren
z-index-1
z-index-2
display-inlineflex
marge-top-auto
hoogte-breedteverhouding-kwadraat
aspectratio-portret
hoogte-breedteverhouding-landschap
aspectratio-breedbeeld
overerf-kleur