Una raccolta degli stili impostati in variables.css e applicati da typography.css. Ridimensiona la finestra per confrontare i testi ai diversi breakpoint.
Ogni riquadro usa direttamente la variabile indicata: cambiando il colore in variables.css, cambia anche questa anteprima.
--first-color--first-color-1--first-color-2--first-color-3--second-color--second-color-1--second-color-2--second-color-3--third-color--third-color-1--third-color-2--third-color-3--grey-scale-1--grey-scale-2--grey-scale-3--grey-scale-4--grey-scale-5--white-color--black-colorQueste utility applicano il colore al testo tramite una classe CSS.
.first-color
.second-color
.third-color
.grey-scale-1-color
.grey-scale-2-color
.grey-scale-3-color
.grey-scale-4-color
.grey-scale-5-color
Questi esempi sono fuori da #editor. I titoli qui sono elementi div: il loro aspetto dipende esclusivamente dalla classe applicata.
.section-label
Etichetta introduttiva di una sezione
.heading-1 su un div, fuori da #editor
.heading-2 su un div, fuori da #editor
.heading-3 su un div, fuori da #editor
.heading-4 su un div, fuori da #editor
.heading-5 su un div, fuori da #editor
.heading-6 su un div, fuori da #editor
.font-1 / --font-1
.font-2 / --font-2
.font-3 / --font-3
p fuori da #editor, senza classe
Questo paragrafo riceve gli stili --paragraphs-* anche fuori dall'editor. La regola p è globale e non richiede una classe CSS.
I titoli e le liste qui sotto sono elementi HTML senza classi tipografiche. Ricevono gli stili perché si trovano dentro il contenitore con id editor.
#editor h1 — senza classe .heading-1
#editor h2 — senza classe .heading-2
#editor h3 — senza classe .heading-3
#editor h4 — senza classe .heading-4
#editor h5 — senza classe .heading-5
#editor h6 — senza classe .heading-6
#editor p — stessa regola globale dei paragrafi
Un testo editoriale con una parte in grassetto e una parte in corsivo. Questo esempio permette di confrontare font, dimensione, colore e interlinea del testo.
Un secondo paragrafo mostra la separazione tra blocchi di contenuto.
#editor ul e li — lista puntata
#editor ol e li — lista numerata
#editor h2.heading-4 — la classe sceglie l'aspetto
Passa il mouse sui pulsanti o raggiungili con Tab per provare hover, focus e transizione. L'anteprima a fianco mostra i colori hover senza interazione.
.btn-1 / variabili --btn-1-*
.btn-2 / variabili --btn-2-*
.btn-3 / variabili --btn-3-*
.btn-4 / variabili --btn-4-*
Entrambi gli esempi usano .btn-1; la classe di transizione determina la durata del cambio di stato.
.btn-1.transition-1 / --transition-1
.btn-1.transition-2 / --transition-2