Asociația pentru Prevenirea și Controlul Infecțiilor – APCI
Ghid de stil
Această pagină prezintă stilurile și standardele curente pentru site-ul web Asociația pentru Prevenirea și Controlul Infecțiilor – APCI.
Culori
O prezentare generală a culorilor mărcii acestui site.
Action
Action
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
Primary
Primary
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
Secondary
Secondary
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
Base
Base
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
Shade
Shade
Ultra Light
Light
Medium
Dark
Ultra Dark
Action
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
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
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
Success
Success
Success Light
Success Dark
Success Hover
Danger
Danger
Danger Light
Danger Dark
Danger Hover
Warning
Warning
Warning Light
Warning Dark
Warning Hover
info
Info
Info Light
Info Dark
Info Hover
Butoane
Butoanele solide și conturate sunt disponibile în toate seturile de culori, inclusiv alb-negru.
BUTOANELE DE PE FUNDAL LUMINOS
ActionAction OutlinePrimaryPrimary Outline
BUTOANELE DE PE FUNDAL ÎNTUNECAT
ActionAction OutlinePrimaryPrimary OutlineWhiteWhite Outline
Scala butonului
Button XS
btn--primary / btn--xs
Button S
btn--primary / btn--s
Button M
btn--primary / btn--m
Button L
btn--primary / btn--l
Button XL
btn--primary / btn--xl
Button XXL
btn--primary / btn--xxl
Tipografie
Mai jos este o prezentare generală a dimensiunilor și greutăților tipografiei receptive pentru acest site. Acestea sunt calculate dintr-o dimensiune de bază și o scală matematică.
Titlurile
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 3 Medium
Heading 3 Bold
H4 (--m)
Heading 4 Regular
Heading 4 Medium
Heading 4 Bold
H5 (--s)
Heading 5 Regular
Heading 5 Medium
Heading 5 Bold
H6 (--xs)
Heading 6 Regular
Heading 6 Medium
Heading 6 Bold
Textul corpului
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
Exemple
Heading 1 (H1)
Acesta este un text mare. 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.
Lăţimi
Există șase valori pe care le vom utiliza pentru a controla lățimea elementului. Sunt adaptive automat.
Margini de secțiune
Marginile pentru secțiuni sunt adaptive și se bazează pe un multiplicator al sistemului de spațiere a sistemului.
Spaţiere
Există șase niveluri de spațiere adaptivă calculate dintr-o dimensiune de bază și o scală matematică. Acest lucru asigură că marginea și golurile se potrivesc perfect.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl
Marginea elementelor
Aici sunt cele șase niveluri de spațiere vizualizate ca margine.
Card
Acesta este un card cu margine XS. Conținutul său este destul de aproape de margini.
Card
Acesta este un card cu margine S. Are o margine puțin mai strânsă.
Card
Acesta este un card cu margine M. Are o desparțire standard.
Card
Acesta este un card cu margine L. Are spațiu suplimentar de desfășurare.
Card
Acesta este un card cu margine XL. Are spațiu semnificativ de desfășurare.
Card
Acesta este un card cu margine XXL. Evitați să utilizați această spațiere într-un spațiu închis.
Umbre
Există trei umbre de casetă cu mai multe straturi din care să alegem.
Box shadow M
Box shadow L
Box shadow XL
Rotunjimea bordurii
Există șase valori ale rotunijimii bordurii calculate dintr-o dimensiune de bază și o scală matematică.
Rounded XS
Rounded S
Rounded M
Rounded L
Rounded XL
Rounded XXL