Libreria di componenti

Pulsanti

Predefinito
Nome della classe: (DR / CTA / primario)
Icona-sinistra
Nome della classe: (DR / CTA / primario) & (icona-sinistra)
Icona destra
Nome della classe: (DR / CTA / primario) e (icona-destra)
Predefinito
Nome della classe: (DR / CTA / primario)
Icona-sinistra
Nome della classe: (DR / CTA / primario) & (icona-sinistra)
Icona destra
Nome della classe: (DR / CTA / primario) e (icona-destra)
Predefinito
Nome della classe: (DR / CTA / secondaria)
Icona-sinistra
Nome della classe: (DR / CTA / secondario) & (icona-sinistra)
Icona destra
Nome della classe: (DR / CTA / secondario) & (icona-destra)
Predefinito
Nome della classe: (DR / CTA / secondaria)
Icona-sinistra
Nome della classe: (DR / CTA / secondario) & (icona-sinistra)
Icona destra
Nome della classe: (DR / CTA / secondario) & (icona-destra)
Predefinito
Nome della classe: (DR / CTA / link)
Icona-sinistra
Nome della classe: (DR / CTA / link) & (icona-sinistra)
Icona destra
Nome della classe: (DR / CTA / link) & (icona-destra)
Predefinito
Nome della classe: (DR / CTA / link)
Icona-sinistra
Nome della classe: (DR / CTA / link) & (icona-sinistra)
Icona destra
Nome della classe: (DR / CTA / link) & (icona-destra)
Predefinito
Nome della classe: (DR / CTA / disabilitato)
Icona-sinistra
Nome della classe: (DR / CTA / disabilitato) & (icona-sinistra)
Icona destra
Nome della classe: (DR / CTA / disabilitato) & (icona-destra)
Predefinito
Nome della classe: (DR / CTA / disabilitato)
Icona-sinistra
Nome della classe: (DR / CTA / disabilitato) & (icona-sinistra)
Icona destra
Nome della classe: (DR / CTA / disabilitato) & (icona-destra)

Tipografia

Intestazioni

Utilizzato su:

Nome della classe: (DR / H1)

Aa

Poppins Semi Bold

Dimensione 72px / 5rem

Altezza linea: 80px / 5rem

Nome della classe: (DR / H1) e (bianco)

Aa

Poppins Semi Bold

Dimensione 72px / 5rem

Altezza linea: 80px / 5rem

Utilizzato su:

Nome della classe: come sopra

Aa

Poppins Semi Bold

Dimensione 32px / 2rem

Altezza linea: 44px / 3rem

Aa

Poppins Semi Bold

Dimensione 32px / 2rem

Altezza linea: 44px / 3rem

Utilizzato su:

Nome della classe: (DR / H2)

Aa

Poppins Semi Bold

Dimensione: 44px / 3rem

Altezza linea: 56px / 4rem

Nome della classe: (DR / H2) e (bianco)

Aa

Poppins Semi Bold

Dimensione: 44px / 3rem

Altezza linea: 56px / 4rem

Utilizzato su:

Nome della classe: come sopra

Aa

Poppins Semi Bold

Dimensione: 24px / 1,5rem

Altezza linea: 32px / 2rem

Aa

Poppins Semi Bold

Dimensione: 24px / 1,5rem

Altezza linea: 32px / 2rem

Utilizzato su:

Nome della classe: (DR / H3)

Aa

Poppins Semi Bold

Dimensione 32px / 2rem

Altezza linea: 44px / 3rem

Nome della classe: (DR / H3) & (bianco)

Aa

Poppins Semi Bold

Dimensione 32px / 2rem

Altezza linea: 44px / 3rem

Utilizzato su:

Nome della classe: come sopra

Aa

Poppins Semi Bold

Dimensione 20px / 1,3rem

Altezza linea: 32px / 2rem

Aa

Poppins Semi Bold

Dimensione 20px / 1,3rem

Altezza linea: 32px / 2rem

Utilizzato su:

Nome della classe: (DR / H4)

Aa

Poppins Semi Bold

Dimensione 25px / 1,6rem

Altezza linea: 36px / 2rem

Nome della classe: (DR / H4) e (bianco)

Aa

Poppins Semi Bold

Dimensione 25px / 1,6rem

Altezza linea: 36px / 2rem

Utilizzato su:

Nome della classe: come sopra

Aa

Poppins Semi Bold

Dimensione 16px / 1rem

Altezza linea: 25px / 1,6rem

Aa

Poppins Semi Bold

Dimensione 16px / 1rem

Altezza linea: 25px / 1,6rem

Utilizzato su:

Nome della classe: (DR / testo / grassetto) & (grande)

Aa

Poppins Semi Bold

Dimensione 30px / 1,3rem

Altezza linea: 44px / 3rem

Nome della classe: (DR / testo / grassetto) , (grande) e (bianco)

Aa

Poppins Semi Bold

Dimensione 30px / 1,3rem

Altezza linea: 44px / 3rem

Utilizzato su:

Nome della classe: come sopra

Aa

Poppins Semi Bold

Dimensione 20px / 1,3rem

Altezza linea: 32px / 2rem

Aa

Poppins Semi Bold

Dimensione 20px / 1,3rem

Altezza linea: 32px / 2rem

Utilizzato su:

Nome della classe: (DR / testo / grassetto) & (piccolo)

Aa

Poppins Semi Bold

Dimensione 16px / 1rem

Altezza linea: 25px / 1,6rem

Nome della classe: (DR / testo / grassetto), (piccolo) e (bianco)

Aa

Poppins Semi Bold

Dimensione: 16px / 1rem

Altezza linea: 25px / 1,6rem

Utilizzato su:

Nome della classe: N/A

N/a

Poppins Semi Bold

Dimensione N/A

Altezza della linea: N/A

N/D

Poppins Semi Bold

Dimensioni: N/D

Altezza della linea: N/A

Utilizzato su:

Nome della classe: (DR / Testo / Tabella)

AA

Poppins Semi Bold

Dimensione: 16px / 1rem

Altezza linea: 25px / 1,6rem

Nome della classe: (DR / Testo / Tabella) & (bianco)

AA

Poppins Semi Bold

Dimensione: 16px / 1rem

Altezza linea: 25px / 1,6rem

Utilizzato su:

Nome della classe: N/A

N/D

Poppins Semi Bold

Dimensioni: N/D

Altezza linea: 25px / 1,6rem

N/D

Poppins Semi Bold

Dimensioni: N/D

Altezza della linea: N/A

Utilizzato su:

Nome della classe: (DR / SubHeader)

AA

Poppins Light (maiuscolo)

Dimensione 18px / 1,1rem

Altezza linea: 28px / 1,8rem

Nome della classe: (DR / SubHeader) & (bianco)

AA

Poppins Semi Bold

Dimensione 18px / 1,1rem

Altezza linea: 28px / 1,8rem

Utilizzato su:

Nome della classe: N/A

N/D

Poppins Light (maiuscolo)

Dimensione N/A

Altezza della linea: N/A

N/D

Poppins Semi Bold

Dimensione N/A

Altezza della linea: N/A

Utilizzato su:

Nome della classe: (DR / blog / H1)

Aa

Poppins Semi Bold

Dimensione 40px / 2,5rem

Altezza linea: 52px / 3,25rem

Nome della classe: (DR / blog / H1) & (bianco)

Aa

Poppins Semi Bold

Dimensione 40px / 2,5rem

Altezza linea: 52px / 3,25rem

Utilizzato su:

Nome della classe: N/A

Aa

Poppins Semi Bold

Dimensione 32px / 2rem

Altezza linea: 44px / 3rem

Aa

Poppins Semi Bold

Dimensione 32px / 2rem

Altezza linea: 44px / 3rem

Altra tipografia

Paragrafo

Utilizzato su:

Nome della classe: (DR / paragrafo)

Aa

Corpo principale del testo, paragrafi

Luce di Poppins

Dimensione: 16px / 1rem

Altezza linea: 25px / 1,6rem

Aa

Corpo principale del testo, paragrafi

Luce di Poppins

Dimensione 16px / 1rem

Altezza linea: 25px / 1,6rem

Stili produttivi

Utilizzato su:

Nome della classe: (DR / etichetta / didascalia)

Aa

Per le etichette dei campi nei componenti e per i messaggi di errore
Per le didascalie o i contenuti legali in un layout

Luce di Poppins

Dimensione 15px / 0,9rem

Altezza linea: 25px / 1,6rem

Nome della classe: (DR / etichetta / didascalia) & (bianco)

Aa

Per le etichette dei campi nei componenti e per i messaggi di errore
Per le didascalie o i contenuti legali in un layout

Luce di Poppins

Dimensione 15px / 0,9rem

Altezza linea: 25px / 1,6rem

Pulsante

Utilizzato su:

Nome della classe: (DR / etichetta / didascalia)

Aa

Questo è per le etichette dei pulsanti

Luce di Poppins

Dimensione 18px / 1,1rem

Altezza linea: 28px / 1,8rem

Aa

Questo è per le etichette dei pulsanti

Luce di Poppins

Dimensione 18px / 1,1rem

Altezza linea: 28px / 1,8rem

Contenitore

Un contenitore con larghezza massima: 1300px limita la larghezza del contenuto per una migliore leggibilità e un layout equilibrato su schermi grandi, mantenendo il design reattivo e centrato su schermi più piccoli. Non limitatevi a copiare il riquadro qui sotto, ma digitate DR / Container nel selettore di stile sulla casella degli strumenti a destra.

Nome della classe: (DR / contenitore)

Carte

Nome della classe: (DR / scheda)

Nome della classe: (DR / scheda) & (alternativa)

Scheda di citazione

"I clienti Driftrock hanno registrato un aumento del 210% dei lead EV provenienti dalla Driftrock Automotive Publisher Network".