Reneste

Stilguide

Strukturklasser

Defineret og fleksibel kernestruktur, som vi kan bruge på alle eller de fleste sider.

side-indpakning
main-wrapper
knap-gruppe
container-lille
container-medium
container-stor
udfyldning-global
padding-sektion-lille
padding-sektion-medium
padding-sektion-large

Overskrifter

HTML-tags definerer standardoverskrifter. Brug overskriftsklasser, når typografistilen ikke stemmer overens med standard-HTML-tagget.

H1

Overskrift

overskrift-stil-h1

Overskrift

H2

Overskrift

overskrift-stil-h2

Overskrift

H3

Overskrift

overskrift-stil-h3

Overskrift

H4

Overskrift

overskrift-stil-h4

Overskrift

H5
Overskrift
overskrift-stil-h5
Overskrift
H6
Overskrift
overskrift-stil-h6
Overskrift

Andre HTML-tags

HTML-tags definerer standardtekststile.

Alle afsnit

Eksempeltekst bruges som en pladsholder for rigtig tekst, der normalt er til stede. Eksempeltekst hjælper dig med at forstå, hvordan rigtig tekst kan se ud på din hjemmeside. Eksempeltekst bruges som pladsholder for rigtig tekst.

Alle links
Alle links
Alle citater
Eksempeltekst bruges som en pladsholder for rigtig tekst, der normalt er til stede. Prøvetekst hjælper dig med at forstå, hvordan rigtig tekst kan se ud på din hjemmeside.
Alle ordnede lister
  1. Eksempelteksten bruges som pladsholder for den rigtige tekst, der normalt er til stede.
  2. Eksempelteksten bruges som pladsholder for den rigtige tekst, der normalt er til stede.
  3. Eksempelteksten bruges som pladsholder for den rigtige tekst, der normalt er til stede.
Alle uordnede lister
  • Eksempelteksten bruges som pladsholder for den rigtige tekst, der normalt er til stede.
  • Eksempelteksten bruges som pladsholder for den rigtige tekst, der normalt er til stede.
  • Eksempelteksten bruges som pladsholder for den rigtige tekst, der normalt er til stede.

Tekstklasser

Tekstklasser, når typografistilen ikke matcher standard-HTML-tagget.

Tekststørrelser

tekst-xs

Prøve

tekst-sm

Prøve

tekst-base

Prøve

tekst-lg

Prøve

tekst-xl

Prøve

tekst-2xl

Prøve

tekst-3xl

Prøve

tekst-4xl

Prøve

tekst-5xl

Prøve

tekst-6xl

Prøve

tekst-7xl

Prøve

tekst-8xl

Prøve

tekst-9xl

Prøve

Tekst-stilarter

tekst-stil-overstregning

tekst-stil-overstregning

tekst-stil-kursiv

tekst-stil-kursiv

tekst-stil-dæmpet

tekst-stil-dæmpet

text-style-allcaps

text-style-allcaps

tekst-stil-nowrap

tekst-stil-nowrap

tekst-stil-link
tekst-stil-citat

Eksempelteksten bruges som pladsholder.

Vægtning af tekst

tekst-vægt-let
tekst-vægt-let
tekst-vægt-normal
tekst-vægt-normal
tekst-vægt-medium
tekst-vægt-medium
tekst-vægt-semibold
tekst-vægt-medium
tekst-vægt-fed
tekst-vægt-medium

Justering af tekst

tekst-align-venstre
tekst-align-venstre
tekst-align-center
tekst-align-center
tekst-align-højre
tekst-align-højre

Knapper

Knapkombi-klassesystem.

knap
er-sekundær
Knaptekst
knap
er-hvid
Knaptekst
knap
er-omrids
Knaptekst
knap
er-outline-blå
Knaptekst

Farver

Administrer tilbagevendende tekst- og baggrundsfarver.

Tekstfarver

tekst-farve-primær
tekst-farve-primær
tekst-farve-sekundær
tekst-farve-sekundær
tekst-farve-alternativ
tekst-farve-alternativ

Baggrundsfarver

bg-primær
bg-sekundær
bg-tertiær

Max bredder

Brug CSS-egenskaben max-width til at begrænse det indre indhold til en maksimal bredde.

max-bredde-fuld
max-bredde-fuld-tablet
max-bredde-fuld-mobil-portræt
max-bredde-fuld-mobil-landskab
max-bredde-xxlarge
max-bredde-stor
max-bredde-stor
max-bredde-medium
max-bredde-lille
max-bredde-xsmall
max-bredde-xxsmall

Udfyldninger

Utility spacing system - padding-klasser. [padding-retning] + [padding-størrelse].

Retningsklasser

polstring-bund
padding-top
Udfyldning - lodret
polstring-horisontal
Udfyldning til venstre
padding-højre

Størrelsesklasser

padding-0
polstring-bitte
polstring-xxsmall
polstring-xsmall
polstring-lille
polstring-medium
polstring-stor
polstring-xlarge

Margener

Utility spacing-system - padding-klasser. [margin-retning] + [margin-størrelse].

Retningsklasser

margin-bund
margin-top
margin-vertikal
margin-horisontal
margin-venstre
margin-højre

Størrelsesklasser

margin-0
margin-bitte
margin-xxsmall
margin-xsmall
margin-lille
margin-medium
margin-stor
margin-xlarge

Afstandsstykker

Samlet afstandssystem til projektet.

afstandsstykke-bitte
afstandsstykke-xxsmall
afstandsstykke-xsmall
afstandsstykke-lille
afstandsstykke-medium
afstandsstykke-stor
afstandsstykke-xlarge
afstandsstykke-xxlarge
afstandsstykke-kæmpe
afstandsstykke-xhuge

Ikoner

Ensret ikonstørrelser. icon-height indstiller ikonernes højde. icon-1x1 indstiller både højde og bredde på ikonerne.

ikon-højde-lille
ikon-højde-medium
ikon-højde-stor
icon-1x1-extra-small
ikon-1x1-lille
ikon-1x1-medium
ikon-1x1-stor

Billeder

Brug altid en ombrydning til at indeholde billedets dimensioner.

img
img-parallakse

Nyttige forsyningssystemer

Utility-klasser, som vi gerne bruger i de fleste af vores projekter for at bygge hurtigere.

gemme sig
Dette element er skjult
skjul-tablet
skjul-mobil-portræt
skjul-mobil-landskab
overflow-synlig
overflow-skjult
overløb-auto
overflow-rulle
pointer-events-auto
pointer-events-none
lag
afstand-ren
Juster midten
display-inlineflex
arve-farve

Webflow-elementer

Native Webflow-elementer med Client-First-klasser anvendt.

form_komponent

Eksempel på en formular-komponent, der bruger Folders

Tak skal du have! Din indsendelse er modtaget!
Ups! Der gik noget galt, da jeg indsendte formularen.
tekst-rig-tekst

Overskrift 1

Overskrift 2

Overskrift 3

Overskrift 4

Overskrift 5
Rubrik 6

Eksempeltekst med et link bruges som en pladsholder for rigtig tekst, der normalt er til stede. Eksempeltekst hjælper dig med at forstå, hvordan rigtig tekst kan se ud på din hjemmeside. Eksempeltekst bruges som pladsholder for rigtig tekst. Eksempeltekst bruges som pladsholder for rigtig tekst. Eksempeltekst bruges som pladsholder for rigtig tekst.

  • Eksempelteksten bruges som pladsholder for den rigtige tekst, der normalt er til stede.
  • Eksempelteksten bruges som pladsholder for den rigtige tekst, der normalt er til stede.
  • Eksempelteksten bruges som pladsholder for den rigtige tekst, der normalt er til stede.
  1. Eksempelteksten bruges som pladsholder for den rigtige tekst, der normalt er til stede.
  2. Eksempelteksten bruges som pladsholder for den rigtige tekst, der normalt er til stede.
  3. Eksempelteksten bruges som pladsholder for den rigtige tekst, der normalt er til stede.
Eksempeltekst bruges som en pladsholder for rigtig tekst, der normalt er til stede. Eksempeltekst hjælper dig med at forstå, hvordan rigtig tekst kan se ud på din hjemmeside. Eksempeltekst bruges som pladsholder for rigtig tekst, der normalt er til stede.
Navbar-komponent