Card Headline
La card Headline viene usata per promuovere soluzioni con un forte impatto testuale, in modo da catturare l’attenzione dell’utente sui contenuti dell’offerta piuttosto che sulla parte grafica / astratta.
Editorialmente, è possibile scegliere colore, allineamento e dimensione di ciascuna Headline della card, in modo da creare layout visivi differenti.
Non possono essere utilizzate due headline con la stessa dimensione, ma possono essere inserite meno di 3 headline.
I colori possibili per le headline sono (oltre al nero che è il default, e il bianco per background colorati), i 3 gradienti di brand: arancione (per prodotti dell’area Connessioni), blu (per Assicurazioni) e verde (per Energia).
E' possibile aggiungere un’immagine di background e modificare i vari colori dei testi e dei componenti con il bianco.
Da mobile è possibile utilizzare il componente in scroll orizzontale.
E' possibile impostare un’opacità del 90% sulla card, in modo da renderla semitrasparente e risaltare parzialmente lo sfondo su cui è posizionata.
Card Visual Headline
La card Visual deve avere un background, ed è nata per ospitare nella parte superiore il componente grafico delle pipeline.
Nella parte inferiore può avere 3 combinazioni: un’unica cta a tutta larghezza, il prezzo e una cta e una doppia cta di disambiguazione.
Il gradiente nero ombreggiato (disattivabile editorialmente) garantisce l’accessibilità in caso fossero presenti i testi bianchi della componente prezzo.
Da mobile è possibile utilizzare il componente in scroll orizzontale.
Se si desidera far andare a capo le card, è necessario suddividerle in sezioni separate. Ad esempio, se si ha una sezione con 5 card, verranno disposte in una fila di 4 card, e la quinta andrà a capo. Se si vuole ottenere un layout con 3 card in una fila e 2 card nella fila successiva, bisogna dividerle in due sezioni distinte.
Il Cards Container va sempre inserito, nella pagina desiderata, all'interno di una Section. Configurare il Cards Container selezionando il componente, accedendo alla chiave inglese e scegliendo il tipo di card da utilizzare in Choose Card Type.
Nel campo text delle card è possibile inserire un elenco puntato, ma questo non viene visualizzato né in modalità view as published né nella versione pubblicata online.
CAMPI
1. Header
a. Sottotitolo
b. Titolo
c. Action icon
2. Vantaggi
3. Note
4. Immagine di background - fissata in alto a sinistra (obbligatoria)
5. Footer
a. Prezzo + CTA
b. Doppia CTA
c. CTA singola
6. Gradiente ombreggiato (facoltativo)