NG Dialogue
Nettsideoppsett
Denne siden viser alle variasjoner av knapper, farger, størrelser for NG Dialogue sin nettside.
Farger
Et overblikk over fargeprofilen
Farger og variasjoner
Gjennomsiktighetsgrad
hoved
Primary
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
alternativ
Secondary
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
aksent
Accent
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
base
Base
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
variasjon
Shade
Ultra Light
Light
Medium
Dark
Ultra Dark
primary
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
secondary
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
accent
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
base
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
shade
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Typografi
Nedenfor er en oversikt over responsive typografistørrelser og -vekter for dette nettstedet. Disse er beregnet fra en grunnstørrelse og en matematisk skala.
Overskrifter
H1 (--xxl)
Heading 1 Regular
Heading 1 Medium
Heading 1 Bold
H2 (--xl)
Heading 2 Regular
Heading 2 Medium
Heading 2 Bold
H3 (--l)
Heading 3 Regular
Heading Medium
Heading 3 Bold
H4 (--m)
Heading 4 Regular
Heading 4 Medium
Heading 4 Bold
H5 (--s)
Heading 5 Regular
Heading Medium
Heading 5 Bold
H6 (--xs)
Heading 6 Regular
Heading 6 Medium
Heading 6 Bold
Innholdstekst
BODY TEXT (--m)
Text m Regular
Text m Medium
Text m Bold
SMALL TEXT (--s)
Text s Regular
Text s Medium
Text s Bold
XTRA SMALL TEXT (--xs)
Text xs Regular
Text xs Medium
Text xs Bold
Eksempler
Heading 1 (H1)
This is large text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 2 (H2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 3 (H3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 4 (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 5 (H5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 6 (H6)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Knapper
Solid- og konturknapper er tilgjengelige i alle fargesett, inkludert svart og hvit.
KNAPPER PÅ LYS BAKGRUNN
KNAPPER PÅ MØRK BAKGRUNN
Bredder
Det er seks verdier du kan bruke til å kontrollere elementbredden. De er responsive og tilpasser seg skjermstørrelsen.
Seksjon luft
Polstring for seksjoner er responsiv og basert på en multiplikator av kjerneavstandssystemet.
Avstand
Det er seks nivåer med responsiv avstand beregnet fra en grunnstørrelse og en matematisk skala. Dette sikrer at margin, polstring og mellomrom passer perfekt.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl
Element med luft
Her er seks eksempler på mengde luft i et element
Card
This is a card with XS padding. Its content is pretty close to the edges.
Card
This is a card with S padding. It has a little bit tighter padding.
Card
This is a card with M padding. It has standard breathing room.
Card
This is a card with L padding. It has extra breathing room.
Card
This is a card with XL padding. It has significant breathing room.
Card
This is a card with XXL padding. Avoid using this in a confined space.
Skygger
Det er tre flerlags boksskygger å velge mellom.
Box shadow M
Box shadow L
Box shadow XL
Kantradius
Det er seks grenseradiusverdier beregnet fra en grunnstørrelse og en matematisk skala.
Rounded XS
Rounded S
Rounded M
Rounded L
Rounded XL
Rounded XXL