Stilguide

Version 1.1

Typografi

HTML-overskrifter

Udgiftsområde 1

Udgiftsområde 2

Udgiftsområde 3

Udgiftsområde 4

Udgiftsområde 5

Udgiftsområde 6

Overskriftsklasser

rubrik-xxlarge

rubrik-xlarge

rubrik-large

rubrik-medium

rubrik-lille

rubrik-xsmall

Andre HTML-tags

Alle afsnit (HTML Tag)A 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 links

Blok citat

Ingen punktliste
Ingen punktliste

Ingen punktliste
Ingen punktliste

Ingen punktliste
Ingen punktliste
Ingen punktliste

Tekststørrelser

A 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.

Vægtning af tekst

text-weight-xbold

text-weight-bold

text-weight-semibold

text-weight-medium

text-weight-normal

text-weight-light

Teksttyper

text-style-italic

text-style-strikethrough

text-style-allcaps

text-style-nowrap

text-style-quote

text-style-link

tekst-stil-2 linjer

tekst-stil-3 linjer

text-style-muted

Tekstfarver

text-color-black

text-color-white

Justering af tekst

text-align-left

text-align-center

text-align-right

Rig tekst

Udgiftsområde 1

Udgiftsområde 2

Udgiftsområde 3

Udgiftsområde 4

Udgiftsområde 5

Udgiftsområde 6

Dette er et blokcitat

Med rich text-elementet kan du oprette og formatere overskrifter, afsnit, blokcitater, billeder og video ét sted i stedet for at skulle tilføje og formatere dem enkeltvis. Du skal blot dobbeltklikke, og du kan nemt oprette indhold.

Dette er et link i en tekst med rig tekst

Liste element
Liste element
Liste element

Liste element
Liste element
Liste element

UDESLY-START-PHPecho udesly_get_image(_u('in6a2a92d', 'img'))->altUDESLY-END-PHP — Billedteksten skal stå her

Farver

Farveprøve

.sort

.hvid

.lysegrå

Baggrundsfarve

.background-color-black

.background-color-white

.background-color-lightgrey

UI-elementer

Knapper

.knap .button-secondary .button.button-small .button-secondary.button-small

.button-tertiær

Brug add-on-klasse .invert-colors når knappen placeres på en mørk baggrund

.knap .button-secondary .button.button-small .button-secondary.button-small

.button-tertiær

Formularelementer

Tak! Vi har modtaget din ansøgning!

Ups! Noget gik galt under indsendelse af formularen.

Faner

Ikoner

.icon-xxsmall

.icon-xsmall

.icon-small

.icon-medium

.icon-large

.icon-xlarge

.icon-1x1-xxsmall

.icon-1x1-xsmall

.icon-1x1-small

.icon-1x1-medium

.icon-1x1-large

.icon-1x1-xlarge

Billeder

Billedformatforhold 1:1

Billedformat 4:3

Billedformatforhold 3:2

Billedformat 16:9

Afstand

Margin Retning

.margin-top

.margin-bottom

.margin-left

.margin-højre

.margin-horisontal

.margin-vertikal

Margin-størrelse

.margin-0

.margin-tiny

.margin-xxsmall

.margin-xsmall

.margin-small

.margin-medium

.margin-large

.margin-xlarge

.margin-xxlarge

.margin-huge

.margin-xhuge

.margin-xxhuge

.margin-custom1

.margin-custom2

.margin-custom3

Polstring Retning

.padding-top

.padding-bottom

.padding-left

.padding-right

.padding-horizontal

.padding-vertical

Størrelse af polstring

.padding-0

.padding-tiny

.padding-xxsmall

.padding-xsmall

.padding-small

.padding-medium

.padding-large

.padding-xlarge

.padding-xxlarge

.padding-huge

.padding-xhuge

.padding-xxhuge

.padding-custom1

.padding-custom2

.padding-custom3

Layout

Container

.container-large

.container-medium

.container-small

Max-bredder

.max-width-full

.max-width-full-tablet

.max-width-full-mobile-landscape

max-width-full-mobile-portrait

.max-width-xxsmall

.max-width-xsmall

.max-width-small

.max-width-medium

.max-width-large

.max-width-xlarge

.max-width-xxlarge

Andre klasser

Reaktionsdygtighed

.hide - skjul på alle enheder

.hide-tablet - skjul fra tablet-opløsning

.hide-mobile-landscape - skjul fra mobil landskabsopløsning

.hide-mobile-portrait - skjul fra mobilens portrætopløsning

.show - vises på alle enheder

.show-tablet - skærm med udgangspunkt i tablet-opløsning

.show-mobile-landscape - visning fra mobil landskabsopløsning

.show-mobile-portrait - display med udgangspunkt i mobil portrætopløsning

Brugsgode

.z-index-1 - bringer et element tættere på z-indekset, sætter z-indekset til 1

.z-index-2 - bringer et element tættere på z-indekset, sætter z-indekset til 2

.align-center - sætter margin venstre og højre til auto, centrerer et element inden for dets overordnede div

.spacing-clean - sætter alle mellemrum til 0, herunder marginer og padding

.div-kvadrat - opretter og opretholder en 1:1 dimension af et div. CSS-magi

.lag - sætter absolut position med 0% på alle sider - tilføj denne klasse til en div for at få den til at udvide hele det overordnede elementets størrelse, og sørg for at den overordnede div har 'position: relative'

.clickable-off - sætter pointer-events til ingen, forhindrer al klik- og hover-interaktion med et element

.clickable-on - sætter pointer-events til auto, aktiverer al klik- og hover-interaktion med et element

.overflow-hidden - sætter overløb til skjult

.overflow-scroll - indstiller overløb til rulning

.overflow-auto - sætter overløb til auto