Guida Stile Relume

Client-First V2.1 • Ultimo aggiornamento 09 Gen, 2024
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

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.

Tutti i link
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
  1. Nessun elenco puntato

  2. Nessun elenco puntato

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

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-size-medium

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-size-regular

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-size-small

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-size-tiny

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.

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-italic
text-style-strikethrough
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-link
text-style-2lines
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-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
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-left
text-align-center
text-align-center
text-align-right
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
  1. Elemento dell'elenco
  2. Elemento dell'elenco
  3. Elemento dell'elenco
Icona immagine segnaposto con uno sfondo grigio e un simbolo di montagna e sole al centro.
La didascalia va qui
Colori
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-white
text-color-black
text-color-black
text-color-primary
text-color-primary
text-color-secondary
text-color-secondary
text-color-alternate
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
button
is-small
button
is-secondary
button
is-secondary
is-small
button
is-tertiary
button
is-tertiary
is-small
button
is-link
Per usarlo su uno sfondo scuro, usa semplicemente la classe aggiuntiva è-alternativo
button
è-alternativo
button
è-alternativo
is-small
button
is-secondary
è-alternativo
button
is-secondary
is-small
è-alternativo
button
is-link
è-alternativo
Bottone
Pulsanti con icone
button
is-icon
button
is-small
is-icon
button
is-secondary
is-icon
button
is-secondary
is-small
is-icon
button
is-link
is-icon
button
is-link
is-icon
text-color-red
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_input
is-text-area
form_input
is-select-input
form_checkbox
form_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