Client-eerst - Versie 2.1

Stijlgids

Client-First is een verzameling richtlijnen en strategieën gemaakt door Finsweet om u te helpen Webflow websites te bouwen.

Structuur Klassen

Gedefinieerde en flexibele kernstructuur die we op alle of de meeste pagina's kunnen gebruiken.

Pagina-inpakker
Hoofdwikkelaar
Container Klein
Container Medium
Container Groot
Opvulling Wereldwijd
Vulling Sectie Klein
Vulling Sectie Medium
Vulling Sectie Groot
Knoppengroep

Rubrieken

HTML-tags definiëren standaardkopstijlen. Gebruik koptekstklassen als de typografische stijl niet overeenkomt met de standaard HTML-tag.

H1

Voorbeeldtekst helpt je te begrijpen hoe echte tekst eruit kan zien.

Stijl kop H1

Voorbeeldtekst helpt je te begrijpen hoe echte tekst eruit kan zien.

H2

De voorbeeldtekst wordt gebruikt als plaatshouder. Voorbeeldtekst helpt je te begrijpen hoe echte tekst eruit kan zien.

Titel stijl H2

De voorbeeldtekst wordt gebruikt als plaatshouder. Voorbeeldtekst helpt je te begrijpen hoe echte tekst eruit kan zien.

H3

Voorbeeldtekst helpt u te begrijpen hoe echte tekst eruit kan zien op uw website. De voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is.

Stijl kop H3

Voorbeeldtekst helpt u te begrijpen hoe echte tekst eruit kan zien op uw website. De voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is.

H4

De voorbeeldtekst wordt gebruikt als plaatshouder. Voorbeeldtekst helpt je te begrijpen hoe echte tekst eruit kan zien. Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is.

Stijl kop H4

De voorbeeldtekst wordt gebruikt als plaatshouder. Voorbeeldtekst helpt je te begrijpen hoe echte tekst eruit kan zien. Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is.

H5
De voorbeeldtekst wordt gebruikt als plaatshouder. Voorbeeldtekst helpt je te begrijpen hoe echte tekst eruit kan zien. Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is. Voorbeeldtekst helpt je te begrijpen hoe echte tekst eruit kan zien.
Stijl kop H5

De voorbeeldtekst wordt gebruikt als plaatshouder. Voorbeeldtekst helpt je te begrijpen hoe echte tekst eruit kan zien. Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is. Voorbeeldtekst helpt je te begrijpen hoe echte tekst eruit kan zien.

H6
Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is. Voorbeeldtekst helpt je te begrijpen hoe echte tekst eruit kan zien. Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is. Voorbeeldtekst helpt je te begrijpen hoe echte tekst eruit kan zien.
Stijl kop H6

Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is. Voorbeeldtekst helpt je te begrijpen hoe echte tekst eruit kan zien. Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is. Voorbeeldtekst helpt je te begrijpen hoe echte tekst eruit kan zien.

Andere HTML-tags

HTML-tags definiëren standaardtekststijlen.

Alle alinea's

Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is. Voorbeeldtekst helpt je te begrijpen hoe echte tekst eruit kan zien op je website. Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst.

Alle koppelingen
Alle koppelingen
Alle citaten
Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is. Voorbeeldtekst helpt u te begrijpen hoe echte tekst eruit kan zien op uw website.
Alle geordende lijsten
  1. De voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is.
  2. De voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is.
  3. De voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is.
Alle ongeordende lijsten
  • De voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is.
  • De voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is.
  • De voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is.

Tekstklassen

Tekstklassen wanneer de typografiestijl niet overeenkomt met de standaard HTML-tag.

Tekstformaten

Tekstgrootte groot

De voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is.

Tekstgrootte Medium

Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal op je website staat.

Tekstgrootte Normaal

Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is. Voorbeeldtekst helpt u te begrijpen hoe echte tekst eruit kan zien op uw website.

Tekstgrootte klein

Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal op uw website staat. Voorbeeldtekst helpt u te begrijpen hoe echte tekst eruit kan zien op uw website.

Tekstgrootte klein

Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal op uw website staat. Voorbeeldtekst helpt u te begrijpen hoe echte tekst eruit kan zien op uw website.

Tekststijlen

Tekststijl Doorhalen

tekststijl doorhalen

Tekst Stijl Cursief

tekststijl-hoofdletters

Tekst Gedempt

tekststijl-muted

Tekst met hoofdletters

tekststijl-allcaps

Tekststijl Nowrap

tekststijl-nowrap

Tekst Stijl Link
Quote tekststijl

De voorbeeldtekst wordt gebruikt als plaatshouder.

Tekst Stijl 2 regels
Deze CSS-stijl wordt niet ondersteund voor Rich Texts op iOS.

Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is. Voorbeeldtekst helpt je te begrijpen hoe echte tekst eruit kan zien op je website. Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst tekst-stijl-2 regels

Tekststijl 3 regels
Deze CSS-stijl wordt niet ondersteund voor Rich Texts op iOS.

Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is. Voorbeeldtekst helpt je te begrijpen hoe echte tekst eruit kan zien op je website. Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst. Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is. Voorbeeldtekst helpt u te begrijpen hoe echte tekst eruit kan zien op uw website. Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst.

Tekst Gewichten

Tekst Gewicht Xvet
tekst-gewicht-xbold
Tekst Gewicht Vet
vetgedrukt
Tekstgewicht Vetgedrukt
tekst-gewicht-semibold
Tekst Gewicht Medium
tekst-gewicht-middel
Tekst Gewicht Normaal
tekst-gewicht-normaal
Tekst Gewicht Licht
tekst-gewicht-licht

Tekstuitlijningen

Tekst links uitlijnen
tekst-links uitlijnen
Tekst centreren uitlijnen
tekst-uitlijning-centraal
Tekst rechts uitlijnen
tekst-uitlijning-rechts

Knoppen

Knop combo klasse systeem.

Knop
Is klein
Knoptekst
Knop
Is groot
Knoptekst

Kleuren

Beheer terugkerende tekst- en achtergrondkleuren.

Tekstkleuren

Tekstkleur primair
Tekstkleur primair
Tekstkleur secundair
Tekstkleur secundair
Afwisselende tekstkleur
Afwisselende tekstkleur

Achtergrondkleuren

Achtergrondkleur Primair
Achtergrondkleur Secundair
Achtergrondkleur Tertiair
Achtergrondkleur Afwisselend

Max breedtes

Gebruik de CSS-eigenschap max-width om de binneninhoud een maximale breedte te geven.

Max Breedte Volledig
Max. breedte volledig tablet
Max. breedte volledig mobiel portret
Max. breedte Volledig mobiel liggend
Max. breedte Xxlarge
Max. breedte Xlarge
Max Breedte Groot
Max Breedte Medium
Max Breedte Klein
Max. breedte Xsmall
Max Breedte Xxsmall

Vullingen

Utility spatiëringssysteem - opvulklassen. [opvulrichting] + [opvulgrootte].

Richting Klassen

Vulling Bodem
Vulling Bovenkant
Vulling verticaal
Vulling Horizontaal
Vulling links
Vulling rechts

Grootteklassen

Opvulling 0
Vulling Klein
Vulling Xxsmall
Vulling Xsmall
Vulling Klein
Vulling Medium
Vulling Groot
Vulling Xlarge
Vulling Xxlarge
Enorme opvulling
Vulling Xhuge
Vulling Xxhuge
Opvulling Custom1
Vulling Custom2
Opvulling Custom3

Marges

Utility spatiëringssysteem - opvulklassen. [marge-richting] + [marge-grootte].

Richting Klassen

Marge onderkant
Marge boven
Marge verticaal
Marge Horizontaal
Marge links
Marge rechts

Grootteklassen

Marge 0
Kleine marge
Marge Xxsmall
Marge Xsmall
Marge Klein
Marge Medium
Marge groot
Marge Xlarge
Marge Xxlarge
Enorme marge
Marge Xhuge
Marge Xxhuge
Marge Aangepast1
Marge Custom2
Marge Aangepast3

Afstandhouders

Uniform afstandssysteem voor het project.

Afstandhouder Klein
Afstandhouder Xxsmall
Afstandhouder Xsmall
Afstandhouder Klein
Afstandhouder Medium
Afstandhouder Groot
Afstandhouder Xlarge
Afstandhouder Xxlarge
Grote afstandhouder
Afstandsbediening Xhuge
Afstandsbediening Xxhuge

Pictogrammen

Icoon-hoogte stelt de hoogte van iconen in. Icoon-1x1 stelt zowel de hoogte als de breedte van iconen in.

Pictogram Hoogte Klein
Pictogram Hoogte Medium
Pictogram Hoogte Groot
Pictogram 1x1 Klein
Pictogram 1x1 Medium
Pictogram 1x1 groot

Nuttige nutsvoorzieningen

Utility-klassen die we graag gebruiken in de meeste van onze projecten om sneller te bouwen.

Verberg
Dit element is verborgen
Tablet verbergen
Verberg mobiel portret
Verberg mobiel landschap
Overloop zichtbaar
Overloop verborgen
Overloop Auto
Overloop Scroll
Wijzergebeurtenissen Auto
Pointergebeurtenissen Geen
Laag
Afstand Schoon
Centrum uitlijnen
Z-index 1
Z-index 2
Inlineflex weergeven
Kleur erven
Beeldverhouding vierkant
Beeldverhouding Staand
Beeldverhouding Landschap
Beeldverhouding breedbeeld

Webflow-elementen

Inheemse Webflow-elementen met Client-First klassen toegepast.

Vorm Onderdeel

Voorbeeld van een formuliercomponent die mappen gebruikt

Hartelijk dank! Je inzending is ontvangen!
Oeps! Er is iets misgegaan bij het verzenden van het formulier.
Tekst Rijke tekst

Rubriek 1

Rubriek 2

Rubriek 3

Rubriek 4

Rubriek 5
Rubriek 6

Voorbeeldtekst met een link wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is. Voorbeeldtekst helpt je te begrijpen hoe echte tekst eruit kan zien op je website. Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst. Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst. Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst.

  • De voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is.
  • De voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is.
  • De voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is.
  1. De voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is.
  2. De voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is.
  3. De voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is.
Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is. Voorbeeldtekst helpt je te begrijpen hoe echte tekst eruit kan zien op je website. Voorbeeldtekst wordt gebruikt als plaatshouder voor echte tekst die normaal aanwezig is.