fbpx
100% Exclusivitate
Click Maximo Imobiliare

Ghid de Stilizare

Această pagină conține ghidul de stilizare pentru site-ul web Click Maximo Imobiliare.

Culori

O prezentare a culorilor acestui site web.

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

Accent

Accent

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

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

Butoane

Butoanele solide și cu contur sunt disponibile în toate seturile de culori, inclusiv în alb și negru.

Butoane pe fundal deschis

ActionAction OutlinePrimaryPrimary OutlineSecondarySecondary OutlineAccentAccent OutlineBaseBase Outline

Butoane pe fundal închis

ActionAction OutlinePrimaryPrimary OutlineSecondarySecondary OutlineAccentAccent OutlineWhiteWhite Outline
Mărimi butoane
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 tipografice responsive pentru acest site. Acestea sunt calculate pornind de la o dimensiune de bază și o scară matematică.
Titluri
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
Texte
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)

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 puteți utiliza pentru a controla lățimea elementului. Acestea răspund automat.
--width-xs
--width-s
--width-m
--width-l
--width-xl
--width-xxl

Umplutură Secțiuni

Umplutura pentru secțiuni este sensibilă și se bazează pe un multiplicator al sistemului de spațiere a miezurilor.
None
XS
S
M
L
XL
XXL

Spațiere

Există șase niveluri de spațiere receptivă calculate pe baza unei dimensiuni de bază și a unei scale matematice. Acest lucru asigură că marja, umplutura și spațiile se potrivesc perfect.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl

Umplutură Elemente

Iată cele șase niveluri de spațiere vizualizate sub formă de umplutură.

Card

Acesta este un card cu umplutură XS. Conținutul său este destul de aproape de margini.

Card

Acesta este un card cu umplutură S. Are o umplutură puțin mai strânsă.

Card

Acesta este un card cu umplutură M. Are spațiu liber standard.

Card

Acesta este un card cu umplutură L. Are spațiu liber suplimentar.

Card

Acesta este un card cu umplutură XL. Are un spațiu liber semnificativ.

Card

Acesta este un card cu umplutură XXL. Evitați să o folosiți într-un spațiu restrâns.

Umbre

Aveți posibilitatea de a alege dintre trei umbre de cutie multistrat.
Box shadow M
Box shadow L
Box shadow XL

Raza marginii

Există șase valori ale razei marginii calculate pe baza unei dimensiuni de bază și a unei scale matematice.
Rounded XS
Rounded S
Rounded M
Rounded L
Rounded XL
Rounded XXL