Classi Struttura

Guida Stile Relume

Client-First V2.1 • Ultimo aggiornamento 09 Gen, 2024

Documentazione Client-First

Tipografia

Tag Intestazioni HTML
I tag HTML definiscono gli stili di intestazione predefiniti.

Tutte le Intestazioni H1

Titolo 1

Tutte le Intestazioni H2

Titolo 2

Tutte le Intestazioni H3

Titolo 3

Tutte le Intestazioni H4

Titolo 4

Tutte le Intestazioni H5

Titolo 5

Tutte le intestazioni H6

Titolo 6

Classi di intestazione
Classi di intestazione quando lo stile tipografico non corrisponde al tag HTML predefinito.

stile-intestazione-h1

Intestazione-stile-h1

stile-intestazione-h2

Intestazione-stile-h2

stile-intestazione-h3

Intestazione-stile-h3

stile-intestazione-h4

Intestazione-stile-h4

stile-intestazione-h5

Intestazione-stile-h5

stile-intestazione-h6

Intestazione-stile-h6

Altri tag HTML
I tag HTML definiscono gli stili di testo predefiniti.

Tutti i paragrafi

Tutti i link

Tutte le citazioni in blocco

Citazione in blocco

Tutti gli elenchi puntati

Nessun elenco puntato
Nessun elenco puntato

Tutti gli elenchi puntati

Nessun elenco puntato
Nessun elenco puntato

Tutti gli elenchi numerati

Nessun elenco puntato
Nessun elenco puntato
Nessun elenco puntato

Dimensioni testo
Classi per le dimensioni del testo quando la dimensione della tipografia non corrisponde al tag HTML predefinito.

text-size-large

text-size-medium

text-size-regular

text-size-small

text-size-tiny

Pesi del testo
Classi di peso del testo quando il peso della tipografia non corrisponde al tag HTML predefinito.

text-weight-xbold

text-weight-xbold (800)

text-weight-bold

text-weight-bold (700)

text-weight-semibold

text-weight-semibold (600)

text-weight-medium

text-weight-medium (500)

text-weight-normal

text-weight-normal (400)

text-weight-light

text-weight-light (300)

Stili del testo
Classi di stile del testo quando lo stile tipografico non corrisponde al tag HTML predefinito.

text-style-italic

text-style-strikethrough

text-style-allcaps

text-style-nowrap

text-style-quote

text-style-link

text-style-2lines

text-style-3lines

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

text-style-muted

Allineamento Testo
Classi di allineamento del testo quando l'allineamento della tipografia non corrisponde al tag HTML predefinito.

text-align-left

text-align-center

text-align-right

Testo Rich Text

text-rich-text

Titolo 1

Titolo 2

Titolo 3

Titolo 4

Titolo 5

Titolo 6

Questa è una citazione di blocco

L'elemento di testo rich text ti consente di creare e formattare titoli, paragrafi, citazioni di blocco, immagini e video in un unico posto invece di doverli aggiungere e formattare individualmente. Fai semplicemente doppio clic e crea facilmente contenuti.

Questo è un link all'interno di un testo rich text

Elemento dell'elenco
Elemento dell'elenco
Elemento dell'elenco

Elemento dell'elenco
Elemento dell'elenco
Elemento dell'elenco

Icona immagine segnaposto con uno sfondo grigio e un simbolo di montagna e sole al centro. — La didascalia va qui

Colori

Scopri come usare le variabili per gestire i colori

Progetto Esempio

Colore di Sfondo
Gestisci colori di sfondo ricorrenti.

background-color-black

background-color-white

background-color-primary

background-color-secondary

background-color-tertiary

background-color-alternative

Colore Testo
Gestisci colori di testo ricorrenti.

text-color-white

text-color-black

text-color-primary

text-color-secondary

text-color-alternate

Effetti

Ombre Box
‍Le ombre ti permettono di aggiungere profondità e realismo ai design posizionando gli elementi su un asse z.

shadow-xxsmall

shadow-xsmall

shadow-small

shadow-medium

shadow-large

shadow-xlarge

shadow-xxlarge

Elementi UI

Pulsanti

button

Bottone

button

is-small

Bottone

button

is-secondary

Bottone

button

is-secondary

is-small

Bottone

button

is-tertiary

Bottone

button

is-tertiary

is-small

Bottone

button

is-link

Bottone

Per usarlo su uno sfondo scuro, usa semplicemente la classe aggiuntiva è-alternativo

button

è-alternativo

Bottone

button

è-alternativo

is-small

Bottone

button

is-secondary

è-alternativo

Bottone

button

is-secondary

is-small

è-alternativo

Bottone

button

is-link

è-alternativo

Bottone

Pulsanti con icone

button

is-icon

Bottone

button

is-small

is-icon

Bottone

button

is-secondary

is-icon

Bottone

button

is-secondary

is-small

is-icon

Bottone

button

is-link

is-icon

Bottone

button

is-link

is-icon

text-color-red

Bottone

button

is-icon-only

button

is-small

is-icon-only

button

is-secondary

is-icon-only

button

is-secondary

is-small

is-icon-only

button

is-tertiary

is-icon-only

button

is-tertiary

is-small

is-icon-only

button

is-link

is-icon-only

Elementi Modulo

etichetta_campo_modulo

form_input

.form_field-label

form_input

is-text-area

.form_field-label

form_input

is-select-input

.form_field-label

form_checkbox

Casella di controllo

form_radio

Radio

button

Grazie! La tua richiesta è stata ricevuta!

Ops! Si è verificato un errore durante l'invio del modulo.

Icone (Immagine)

icon-height-xxsmall

icon-height-xsmall

icon-height-small

icon-height-medium

icon-height-large

icon-height-xlarge

icon-height-custom1

icon-1x1-xxsmall

icon-1x1-xsmall

icon-1x1-small

icon-1x1-medium

icon-1x1-large

icon-1x1-xlarge

icon-1x1-custom1

Icone (incorporazione HTML)
Le icone con incorporazione HTML ti permettono di controllare il colore dell'icona al passaggio del mouse.

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-custom1

Classi Struttura

Struttura di base definita e flessibile che possiamo usare su tutte o la maggior parte delle pagine.

page-wrapper

main-wrapper

container-small

container-medium

container-large

padding-global

padding-section-small

padding-section-medium

padding-section-large

button-group

Larghezze Massime

Utilizza la proprietà CSS max-width per limitare il contenuto interno a una larghezza massima.

max-width-full

max-width-full-tablet

max-width-full-mobile-landscape

max-width-full-mobile-portrait

max-width-xxlarge

max-width-xlarge

larghezza-massima-large

larghezza-massima-medium

larghezza-massima-small

larghezza-massima-xsmall

larghezza-massima-xxsmall

Padding

Classi di direzione

padding-bottom

padding-top

padding-vertical

padding-horizontal

padding-left

padding-right

Classi di dimensione

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

Margini

Classi di direzione

margin-bottom

margin-top

margin-vertical

margin-horizontal

margin-left

margin-right

Classi di dimensione

margin-0

margin-tiny

margine-xxpiccolo

margine-xpiccolo

margine-piccolo

margine-medio

margine-grande

margine-xgrande

margine-xxgrande

margine-enorme

margine-xenorme

margine-xxenorme

margine-personalizzato1

margine-personalizzato2

margine-personalizzato3

Spaziatrici

Sistema di spaziatrici unificato per il progetto.

spaziatrice-minuscola

spaziatrice-xxpiccola

spaziatrice-xpiccola

spaziatrice-piccola

spaziatrice-media

spacer-large

spacer-xlarge

spacer-xxlarge

spacer-huge

spacer-xhuge

spacer-xxhuge

Classi di utilità

Classi di utilità utili che usiamo nella maggior parte dei nostri progetti per costruire più velocemente.

nascondi

Questo elemento è nascosto

nascondi-tablet

nascondi-mobile-portrait

nascondi-mobile-landscape

overflow-visibile

overflow-nascosto

overflow-auto

overflow-scroll

eventi-puntatore-auto

eventi-puntatore-nessuno

strato

spaziatura-pulita

allinea-centro

z-index-1

z-index-2

display-inlineflex

margine-superiore-automatico

rapporto-aspettuale-quadrato

rapporto-aspettuale-verticale

rapporto-aspettuale-orizzontale

rapporto-aspettuale-widescreen

colore-ereditato