Dai stile alle tue card.
Dai alle tue card un aspetto adatto al tuo sito: una combinazione di colori dal Type della card, angoli arrotondati e un’ombra dal pannello Style. Alla fine hai una card che puoi ripetere in una riga per funzioni, membri del team o prezzi. Per mettere prima una card nella pagina, vedi Aggiungere una Card.
Il video segue i passaggi sotto: dà a una card un aspetto chiaro, angoli tondi e un’ombra morbida.
Dai stile a una card
- Passa sopra la card con il mouse, apri More e scegli Settings.
- In Type, scegli Light.
- Apri il pannello Style.
- Imposta Border radius a 8.
- Imposta Drop shadow a 2.
- Fai clic su Save.
Cosa vedrai
La card ha uno sfondo chiaro, angoli arrotondati e un’ombra morbida. La sua barra Header sta in cima, il suo Title apre il corpo, e gli elementi aggiunti dentro seguono sotto.
Un Type colora l’intera card, non solo l’header. Primary, Secondary, Success, Info, Warning, Danger e Dark riempiono la card con quel colore del tema e rendono bianco il testo. Light dà uno sfondo chiaro con testo normale. Default lascia la card al tuo tema.
Impostazioni
| Impostazione | Dove | Cosa fa |
|---|---|---|
| Header | General | Testo in una barra in cima alla card; lasciala vuota per nessuna barra |
| Title | General | Un titolo in cima al corpo della card |
| Type | General | La combinazione di colori dell’intera card; predefinito Default |
| Background, Font color | Style | I tuoi colori, quando Type è Default |
| Border radius | Style | Angoli arrotondati, in pixel |
| Drop shadow | Style | Profondità, da 1 a 5 |
| Border (modello di riquadro), Border style, Border color | Style | Una cornice su uno o più lati |
Schemi di card
- Card piatta: Border style Solid, un Border color chiaro, Border radius 4, nessuna ombra.
- Card rialzata: Drop shadow 2, Border style None, Border radius 8.
- Card evidenziata: imposta il lato sinistro di Border nel modello di riquadro a 4, Border style Solid e un Border color d’accento.
- Card che si solleva: Drop shadow 1 in Style e 4 in Hover style; vedi Fai reagire gli elementi al passaggio del mouse.
Card in una riga
Per una griglia di card di funzioni, membri del team o prezzi:
- Aggiungi una riga e scegli un layout con tre o quattro colonne uguali.
- Aggiungi una card a ogni colonna e dai a ogni card gli stessi valori di Type e Style.
- Apri il menu More della riga, scegli Settings e attiva Equal-height columns.
Le colonne si allineano, ma ogni card resta alta quanto il suo contenuto. Mantieni il testo di ogni card circa della stessa lunghezza, così le card finiscono alla stessa altezza. Per una tabella prezzi, evidenzia il piano consigliato con un altro Type o un Drop shadow più profondo.
Se non vedi lo stile
- Background o Font color nel pannello Style non ha effetto. Un Type diverso da Default imposta i colori della card con classi del tema che vincono sul pannello Style. Imposta Type a Default e scegli i tuoi colori.
- Il testo bianco su una card colorata si legge male. I colori Warning e Info di molti temi sono pallidi, e questi tipi impostano sempre testo bianco. Scegli un Type più scuro, oppure Light, che mantiene il colore normale del testo.
- L’ombra non si vede. Drop shadow è a 0, cioè nessuna ombra. Impostalo a 1 o più.
Prossimi passi
- Aggiungere una Card: aggiungi una card e riempila di elementi.
- Fai reagire gli elementi al passaggio del mouse: lascia che le card si sollevino quando i visitatori le indicano.
- Usa i colori del tuo brand: mantieni i colori delle card in linea con il resto del sito.