lumora

Guida allo stile

Struttura Classi

Struttura di base definita e flessibile che possiamo utilizzare su tutte o quasi tutte le pagine.

pagina-wrapper
main-wrapper
container-piccolo
contenitore medio
container grande
container pieno
padding-globale
padding-sezione-piccola
riempimento-sezione-media
padding-sezione-ampia

Titoli

I tag HTML definiscono gli stili predefiniti delle intestazioni. Utilizza le classi di intestazione quando lo stile tipografico non corrisponde al tag HTML predefinito.

Intestazione 1
H1

h1

h1
Titolo 2
H2

h2

h2
Titolo 3
H3

h3

h3
Intestazione 4
H4

h4

h4
Intestazione 5
H5
h5
h5
Titolo 6
H6
h6
h6

Altri tag HTML

I tag HTML definiscono gli stili di testo predefiniti.

Tutti i paragrafi

Il testo di esempio viene utilizzato come segnaposto per il testo reale che è normalmente presente. Il testo di esempio ti aiuta a capire come potrebbe apparire il testo reale sul tuo sito web. Il testo di esempio viene utilizzato come segnaposto per il testo reale.

Tutti i link
Tutti i link
Tutte le citazioni
Il testo di esempio viene utilizzato come segnaposto per il testo reale che è normalmente presente. Il testo di esempio ti aiuta a capire come potrebbe apparire il testo reale sul tuo sito web.
Tutti gli elenchi ordinati
  1. Il testo di esempio viene utilizzato come segnaposto per il testo reale che è normalmente presente.
  2. Il testo di esempio viene utilizzato come segnaposto per il testo reale che è normalmente presente.
  3. Il testo di esempio viene utilizzato come segnaposto per il testo reale che è normalmente presente.
Tutti gli elenchi non ordinati
  • Il testo di esempio viene utilizzato come segnaposto per il testo reale che è normalmente presente.
  • Il testo di esempio viene utilizzato come segnaposto per il testo reale che è normalmente presente.
  • Il testo di esempio viene utilizzato come segnaposto per il testo reale che è normalmente presente.

Dimensioni del testo

testo-xs

Esempio

text-sm

Esempio

base testuale

Esempio

text-lg

Esempio

text-xl

Esempio

text-2xl

Esempio

testo-3xl

Esempio

testo-4xl

Esempio

testo-5xl

Esempio

testo-6xl

Esempio

Stili di testo

stile testo barrato

stile testo barrato

stile-testo-corsivo

stile-testo-corsivo

stile-testo-attenuato

stile-testo-attenuato

testo-stile-tutto maiuscolo

testo-stile-tutto maiuscolo

stile-testo-senza-interruzioni

stile-testo-senza-interruzioni

stile-testo-link

stile-testo-link

stile-citazione-testo

Il testo di esempio viene utilizzato come segnaposto.

Pesi del testo

peso del testo leggero
peso del testo leggero
peso del testo normale
peso del testo normale
peso del testo medio
peso del testo medio
peso del testo semigrassetto
peso del testo medio
peso del testo-grassetto
peso del testo medio

Allineamenti del testo

allineamento testo a sinistra
allineamento testo a sinistra
allineamento testo al centro
allineamento testo al centro
allineamento testo a destra
allineamento testo a destra

Pulsanti

Sistema di classi combo button.

pulsante
Testo pulsante
pulsante
is-secondario
Testo pulsante
pulsante
is-icon
Testo pulsante

Colori

Gestisci i colori ricorrenti del testo e dello sfondo.

colore-testo-primario
colore-testo-primario
colore-testo-secondario
colore-testo-secondario
colore-testo-delicato
colore-testo-alternativo
colore-testo-giallo
colore-testo-alternativo
colore-testo-su-primario
colore-testo-alternativo

Colori Bg

bg-default
bg-primario
bg-secondario
bg-subtle
bg-hover

Distanziatori

Sistema di distanziatori unificato per il progetto.

spacer-tiny
spacer-xxsmall
spacer-xsmall
spacer-small
spacer-medium
spacer-large
spacer-xlarge
spacer-xxlarge
spacer-huge
spacer-xhuge

Icone

Unifica le dimensioni delle icone. icon-height imposta l'altezza delle icone. icon-1x1 imposta sia l'altezza che la larghezza delle icone.

icona-1x1-piccola
icona-1x1-media
icona-1x1-grande

Immagini

Utilizza sempre unimg-wrap per contenere le dimensioni dell'immagine.

img

Sistemi di utilità utili

Classi di utilità che ci piace utilizzare nella maggior parte dei nostri progetti per velocizzare lo sviluppo.

nascondi
Questo elemento è nascosto
nascondi tablet
nascondi-mobile-paesaggio
nascondi-mobile-ritratto
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-auto
pointer-events-none
strato
spaziatura pulita
align-center
display-inlineflex
colore ereditato

Elementi Webflow

Elementi Webflow nativi con classi Client-First applicate.

Spacer

Gli spacer sono utili quando serve spazio aggiuntivo in un layout ma non si desidera creare un nuovo wrapper o una nuova classe.

form_component

Esempio di un componente di modulo che utilizza le cartelle

Grazie! La tua richiesta è stata ricevuta!
Ops! Si è verificato un errore durante l'invio del modulo.
testo-rich-text

Intestazione 1

Titolo 2

Titolo 3

Intestazione 4

Intestazione 5
Titolo 6

Il testo di esempio con un link viene utilizzato come segnaposto per il testo reale che è normalmente presente. Il testo di esempio ti aiuta a capire come potrebbe apparire il testo reale sul tuo sito web. Il testo di esempio viene utilizzato come segnaposto per il testo reale. Il testo di esempio viene utilizzato come segnaposto per il testo reale. Il testo di esempio viene utilizzato come segnaposto per il testo reale.

  • Il testo di esempio viene utilizzato come segnaposto per il testo reale che è normalmente presente.
  • Il testo di esempio viene utilizzato come segnaposto per il testo reale che è normalmente presente.
  • Il testo di esempio viene utilizzato come segnaposto per il testo reale che è normalmente presente.
  1. Il testo di esempio viene utilizzato come segnaposto per il testo reale che è normalmente presente.
  2. Il testo di esempio viene utilizzato come segnaposto per il testo reale che è normalmente presente.
  3. Il testo di esempio viene utilizzato come segnaposto per il testo reale che è normalmente presente.
Il testo di esempio viene utilizzato come segnaposto per il testo reale che è normalmente presente. Il testo di esempio ti aiuta a capire come potrebbe apparire il testo reale sul tuo sito web. Il testo di esempio viene utilizzato come segnaposto per il testo reale che è normalmente presente.