Tipografia
Font size
| Classe | Esempio |
|---|---|
fs-h1 ... fs-h6 | fs-h1 fs-h2 fs-h3 fs-h4 fs-h5 fs-h6 |
fs-xs | fs-xs |
fs-sm | fs-sm |
fs-md | fs-md |
fs-lg | fs-lg |
fs-xl | fs-xl |
fs-xxl | fs-xxl |
fs-xxxl | fs-xxxl |
Font weight
| Classe | Esempio |
|---|---|
fw-lighter | Lorem ipsum dolor sit amet |
fw-light | Lorem ipsum dolor sit amet |
fw-regular | Lorem ipsum dolor sit amet |
fw-bold | Lorem ipsum dolor sit amet |
fw-bolder | Lorem ipsum dolor sit amet |
Headings
Utilizzo mediante i tag da h1 ad h6
| Heading | Example |
|---|---|
| Heading H1 |
| Heading H2 |
| Heading H3 |
| Heading H4 |
| Heading H5 |
| Heading H6 |
E' possibile applicare lo stile di heading anche mediante una classe con l'heading equivalente.
Nota: applicando la classe su uno span (o più in generale un elemento con display: inline) il margine non viene applicato.
| Heading | Example |
|---|---|
Heading h1 | Heading H1 |
| ... | |
Colori
| Classe | Esempio |
|---|---|
color-white | Lorem ipsum dolor sit amet |
color-black | Lorem ipsum dolor sit amet |
color-primary | Lorem ipsum dolor sit amet |
color-primary-light | Lorem ipsum dolor sit amet |
color-accent | Lorem ipsum dolor sit amet |
color-red | Lorem ipsum dolor sit amet |
color-yellow | Lorem ipsum dolor sit amet |
color-green | Lorem ipsum dolor sit amet |
Background
Tinta unita
.bg-primary
.bg-primary-light
.bg-header
.bg-main
.bg-section-tone-1
.bg-section-tone-2
.bg-section-tone-3
Gradiente
.bg-header
.bg-section-tone-3
Elementi HTML
Link
Badges
-30%
Promo
Promo
10
-30%
Promo
Promo
Alerts
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
Tabs standard
Tab 1Tab 2Tab 3
Contenuto 1
Contenuto 2
Contenuto 3
Tabs variante Light
Tab 1Tab 2Tab 3
Contenuto 1
Contenuto 2
Contenuto 3
Tabs variante Boxed
Tab 1Tab 2Tab 3
Contenuto 1
Contenuto 2
Contenuto 3
Tabs verticali - Controls a sinistra
Tab 1Tab 2Tab 3
Contenuto 1
Contenuto 2
Contenuto 3
Tabs verticali - Controls a destra
Tab 1Tab 2Tab 3
Contenuto 1
Contenuto 2
Contenuto 3
Tabs verticali - Stile light
Tab 1Tab 2Tab 3
Contenuto 1
Contenuto 2
Contenuto 3
Tabs verticali - Stile Boxed
Tab 1Tab 2Tab 3
Contenuto 1
Contenuto 2
Contenuto 3
Tabs Scheda articolo con Label allineate a sinistra (text-start)
DescrizioneScheda tecnicaAllegati
Contenuto 1
Contenuto 2
Contenuto 3
Boxes
.box
.box-primary
Altri esempi
Tabella
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |