Classi di struttura

Larghezze massime

Imbottiture

Margini

Distanziatori

Utilità

Guida allo stile di Relume

Client-First V2.1 - Ultimo aggiornamento 09 gennaio 2024

Documenti orientati al cliente

Tipografia

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

Tutti i titoli H1

Titolo 1

Tutti i titoli H2

Rubrica 2

Tutti i titoli H3

Rubrica 3

Tutti i titoli H4

Rubrica 4

Tutti i titoli H5

Rubrica 5

Tutti i titoli H6

Rubrica 6

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

stile-intestazione-h1

Stile di intestazione-h1

stile-intestazione-h2

Stile di intestazione-h2

stile-intestazione-h3

Stile di intestazione-h3

stile-intestazione-h4

Stile di intestazione-h4

stile-intestazione-h5

Stile di intestazione-h5

stile-intestazione-h6

Stile di intestazione-h6

stile-intestazione

Stile di intestazione-h6

Testo evidenziato
Per il testo che deve risaltare in una Landing Page senza intestazione.

testo-illustrato-piccolo

testo evidenziato

testo-illustrato-medio

testo evidenziato

testo evidenziato-grande

testo evidenziato

testo evidenziato-xl

testo

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

Tutti i paragrafi

Tutti i link

Tutte le citazioni di Block

Citazione del blocco

Tutti gli elenchi non ordinati

Nessun elenco puntato
Nessun elenco puntato

Tutti gli elenchi non ordinati

Nessun elenco puntato
Nessun elenco puntato

Tutti gli elenchi ordinati

Nessun elenco puntato
Nessun elenco puntato
Nessun elenco puntato

Dimensioni del testo
Classi di dimensioni del testo quando le dimensioni della tipografia non corrispondono al tag HTML predefinito.

dimensione testo grande

dimensione testo-media

dimensione testo-regolare

dimensione-testo-piccola

dimensione del testo piccola

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

peso del testo-semibold

peso del testo-semibold (600)

peso del testo-normale

peso del testo-normale (400)

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

testo-stile-italico

stile testo-traverso

stile testo-allcaps

stile testo-nowrap

testo-stile-citazione

link in stile testo

stile-testo-link-no-gradiente

Link al testo

stile testo-2 linee

stile testo-3 linee

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

stile testo-muto

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

allineare il testo a sinistra

allineamento del testo al centro

allineamento del testo a destra

Testo ricco

testo-ricco-testo

Titolo 1

Rubrica 2

Rubrica 3

Rubrica 4

Rubrica 5

Rubrica 6

Questa è una citazione a blocchi

L'elemento Rich Text ti permette di creare e formattare titoli, paragrafi, virgolette, immagini e video in un unico posto invece di doverli aggiungere e formattare singolarmente. Basta un doppio clic per creare facilmente i contenuti.

Questo è un link all'interno di un testo ricco

Elenco articoli
Elenco articoli
Elenco articoli

Elenco articoli
Elenco articoli
Elenco articoli

Colori

Colore di sfondo
Gestisci i colori di sfondo ricorrenti.

colore di sfondo nero

colore di sfondo bianco

sfondo-colore-primario

sfondo-colore-secondario

colore di sfondo terziario

sfondo-colore scuro-grigio-blu

sfondo-gradiente-1

sfondo-gradiente-2

sfondo-gradiente-3

Colore del testo
Gestisci i colori del testo ricorrenti.

testo-colore-bianco

testo-colore-nero

testo-colore-primario

testo-colore-blu

testo-colore-verde

testo-colore-gradiente

colore del testo-grigio-blu scuro

colore del testo-TR-primario

Effetti

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

shadow-xxsmall

shadow-xsmall

ombra-piccola

ombra-media

ombra-grande

shadow-xlarge

shadow-xxlarge

Elementi UI

Pulsanti

pulsante

Pulsante

pulsante

è-piccolo

Pulsante

pulsante

è-grigio-blu scuro

Pulsante

pulsante

è-grigio-blu scuro

è-piccolo

Pulsante

pulsante

è-secondario

Pulsante

pulsante

è-secondario

è-piccolo

Pulsante

pulsante

è-terziario

Pulsante

pulsante

è-terziario

è-piccolo

Pulsante

pulsante

è-link

Pulsante

Pulsanti con icone

pulsante

is-icon

Pulsante

pulsante

è-piccolo

is-icon

Pulsante

pulsante

è-secondario

is-icon

Pulsante

pulsante

è-secondario

è-piccolo

is-icon

Pulsante

pulsante

è-link

is-icon

Pulsante

pulsante

is-icon-only

pulsante

è-piccolo

is-icon-only

pulsante

è-secondario

is-icon-only

pulsante

è-secondario

è-piccolo

is-icon-only

pulsante

è-terziario

is-icon-only

pulsante

è-terziario

è-piccolo

is-icon-only

pulsante

è-link

is-icon-only

Elementi di forma

Grazie! Il tuo messaggio è stato ricevuto!

Oops! Qualcosa è andato storto durante l'invio del modulo.

Icone (Immagine)

icona-altezza-xxpiccola

icona-altezza-xpiccola

icona-altezza-piccola

icona-altezza-media

icona-altezza-grande

icona-altezza-custom1

icona-1x1-xxpiccola

icona-1x1-xsmall

icona-1x1-piccola

icona-1x1-media

icona-1x1-grande

icona-1x1-xlarge

icona-1x1-custom1

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

icona-embed-xxsmall

icona-embed-xsmall

icona-embed-small

icona-embed-medium

icona-embed-grande

icona-embed-xlarge

icona-embed-custom1

Classi di struttura

Una struttura di base definita e flessibile che possiamo utilizzare su tutte o sulla maggior parte delle pagine.

page-wrapper

main-wrapper

contenitore-piccolo

contenitore-medio

contenitore-grande

imbottitura globale

imbottitura-sezione-piccola

imbottitura-sezione-media

imbottitura-sezione-grande

gruppo di pulsanti

Larghezze massime

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

max-larghezza-piena

max-larghezza-pieno-tablet

max-width-full-mobile-landscape

max-width-full-mobile-portrait

max-width-xxlarge

max-width-xlarge

max-larghezza-grande

max-larghezza-media

max-larghezza-piccola

max-width-xsmall

max-width-xxsmall

Imbottiture

Classi di direzione

padding-bottom

imbottitura-top

padding-verticale

imbottitura orizzontale

padding-sinistra

padding-destra

Classi di dimensioni

imbottitura-0

imbottitura-minuscola

imbottitura-xxsmall

imbottitura-xsmall

imbottitura-piccola

imbottitura-media

imbottitura-grande

imbottitura-xlarge

imbottitura-xxlarge

imbottitura enorme

imbottitura-xhuge

imbottitura-xxhuge

imbottitura-custom1

imbottitura-custom2

imbottitura-custom3

Margini

Classi di direzione

margine inferiore

margine superiore

margine-verticale

margine orizzontale

margine-sinistra

margine destro

Classi di dimensioni

margine-0

margine-minuscolo

margine-xxpiccolo

margine-xsmall

margine-piccolo

margine-medio

margine-grande

margine-xlarge

margine-xxlarge

margine-ingente

margine-xhuge

margine-xxhuge

margine-custom1

margine-custom2

margine-custom3

Distanziatori

Sistema di distanziatori unificato per il progetto.

distanziatore-minuscolo

distanziatore-xsmall

distanziatore-piccolo

distanziatore-medio

distanziatore-grande

distanziatore-xlarge

distanziatore-xxlarge

distanziatore-grande

distanziatore-xhuge

distanziatore-xxhuge

Classi di utilità

Utili classi di utilità che ci piace utilizzare nella maggior parte dei nostri progetti per costruire più velocemente.

nascondersi

Questo elemento è nascosto

nascondi-tablet

hide-mobile-portrait

hide-mobile-landscape

overflow-visibile

overflow-nascosto

overflow-auto

overflow-scroll

puntatore-eventi-auto

puntatore-eventi-nessuno

strato

spaziatura-pulizia

allineare al centro

z-index-1

z-index-2

display-inlineflex

margin-top-auto

rapporto d'aspetto-quadrato

aspect-ratio-portrait

aspetto-rapporto-paesaggio

aspect-ratio-widescreen

ereditare il colore