Sistema di stile AICARM
Questa guida mostra tutti gli elementi disponibili con i nuovi stili AICARM, con il codice HTML per implementarli.
Legenda prefissi classi
- aicarm-: Prefisso comune a tutte le classi del sistema
- mt-: Margin-top (es. mt-20)
- mb-: Margin-bottom (es. mb-20)
- p-: Padding (es. p-10)
- w-: Width (es. w-50)
- d-: Display (es. d-flex)
- flex-: Proprietà flex (es. flex-center)
- text-: Allineamento testo (es. text-center)
- title-: Stile titoli (es. title-italic)
- color / secondary-color / tertiary-color: Colori testo
1. Tipografia
Di seguito i diversi livelli di titoli disponibili:
Titolo H1
Titolo H1 Sottolineato
Titolo H2
Titolo H2 Sottolineato
Titolo H3
Titolo H4
Titolo H5
Titolo in corsivo
Esempi di testo colorato:
Testo con colore primario AICARM
Testo con colore secondario
Testo con colore terziario
2. Container e box
Section Container
Questo è un contenitore principale per sezioni della pagina. Ha uno sfondo grigio chiaro, bordi arrotondati e spaziatura interna. È ideale per raggruppare contenuti correlati o creare aree distinte nella pagina.
<h3 class=”aicarm-mt-0″>Section Container</h3>
<p>Contenuto della sezione…</p>
</div>
Box con bordo
Questo è un esempio di box con bordo, utile per contenuti che devono essere evidenziati.
<h3 class=”aicarm-mt-0″>Box con bordo</h3>
<p>Contenuto del box…</p>
</div>
Box evidenziato
Questo box con sfondo colorato e bordo laterale è ideale per contenuti di particolare importanza.
<h3 class=”aicarm-mt-0″>Box evidenziato</h3>
<p>Contenuto del box…</p>
</div>
Box informativo
Questo container è ottimo per informazioni di servizio, note o altri contenuti informativi.
<h3 class=”aicarm-mt-0″>Box informativo</h3>
<p>Contenuto del box…</p>
</div>
3. Citazioni e testimonianze
— Maria C., paziente
“Testo della citazione…”
<br><br>
<strong>— Nome, paziente</strong>
</div>
4. Box a scheda (Card)
Webinar: Nutrizione e Cardiomiopatia
La Dott.ssa Sara Farnetti, specialista in Medicina Interna e Nutrizione, illustrerà i principi di una corretta alimentazione per chi convive con una cardiomiopatia.
<h4 class=”aicarm-mt-0″>Titolo contenuto</h4>
<div class=”aicarm-card-header”>Informazione in evidenza</div>
<p>Descrizione del contenuto…</p>
<a href=”#” class=”aicarm-button”>Pulsante azione</a>
</div>
6. Liste stilizzate
Benefici dell’attività fisica
- Migliora la funzionalità cardiaca
- Aumenta la resistenza allo sforzo
- Contribuisce al controllo del peso
- Riduce stress e ansia
- Migliora la qualità del sonno
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ul>
5. Separatori e divisori
I separatori sono utili per creare una pausa visiva tra diverse sezioni di contenuto nella pagina.
Divisore sfumato (predefinito)
Questo divisore ha un effetto sfumato che va dal colore primario alla trasparenza. È ideale per transizioni eleganti tra sezioni importanti della pagina.
Divisore sfumato centrato
Versione con sfumatura dal centro verso i bordi, utile per evidenziare la simmetria di una pagina o sottolineare contenuti centrati.
Divisore solido
Linea solida per una separazione più definita e formale tra sezioni.
Divisore tratteggiato
Separatore tratteggiato per uno stile più leggero e meno invasivo.
Divisore scuro
Versione del divisore con colore scuro, utile quando si lavora con sfondi chiari o quando si desidera un contrasto minore.
Esempio d’uso dei divisori
I divisori possono essere utilizzati tra sezioni di contenuto per migliorare la leggibilità e l’organizzazione visiva. Sono particolarmente utili per:
- Separare articoli o notizie in una pagina
- Creare pause visive tra sezioni tematiche diverse
- Delimitare intestazioni e piè di pagina
- Separare blocchi di contenuto con funzionalità diverse
7. Box Call-to-Action
Sostieni AICARM
Con il tuo sostegno puoi aiutarci a migliorare concretamente la qualità di vita di chi convive con una cardiomiopatia.
Nel 2024, grazie alle donazioni, AICARM ha assistito oltre 420 pazienti attraverso Cuori in Ascolto
e formato oltre 400 persone nei corsi specialistici.
Con il tuo contributo possiamo ampliare questi servizi essenziali e raggiungere più persone.
<h3 class=”aicarm-mt-0″>Titolo call-to-action</h3>
<p>Testo descrittivo che motiva all’azione…</p>
<a href=”#” class=”aicarm-button”>PULSANTE AZIONE</a>
</div>
8. Varianti titoli
Titolo centrato
Titolo senza bordo inferiore
Titolo in corsivo
Titolo con peso leggero
TITOLO SPAZIATO
9. Pulsanti
Container per pulsanti in linea:
<a href=”#” class=”aicarm-button”>Pulsante primario</a>
<a href=”#” class=”aicarm-button aicarm-button-secondary”>Pulsante secondario</a>
… altri pulsanti …
</div>
Pulsante primario:
Pulsante secondario:
Pulsante terziario:
Pulsante scuro:
Pulsante con bordo:
10. Palette colori
#a80058
#7a0042
#c62a80
#f7f7f7
#333333
#ffffff
<div class=”aicarm-color-box”>
<div class=”aicarm-color-sample” style=”background-color: #a80058;”></div>
<div class=”aicarm-color-info”>Primario<br>#a80058</div>
</div>
… altri colori …
</div>
12. Esempi pratici di utilizzo
Esempio 1: Layout a due colonne con spaziatura
Colonna Sinistra
Questo è un esempio di layout a due colonne con spazio equamente distribuito. Ogni colonna occupa il 50% dello spazio disponibile.
Colonna Destra
Le classi flex-between, w-50 e p-10 lavorano insieme per creare questo layout responsivo senza bisogno di scrivere CSS personalizzato.
<div class=”aicarm-w-50 aicarm-p-10″>
<h3 class=”aicarm-mt-0″>Colonna Sinistra</h3>
<p>Contenuto della prima colonna…</p>
</div>
<div class=”aicarm-w-50 aicarm-p-10″>
<h3 class=”aicarm-mt-0″>Colonna Destra</h3>
<p>Contenuto della seconda colonna…</p>
</div>
</div>
Esempio 2: Contenitore centrato con call-to-action
Titolo con peso leggero
Un paragrafo di testo seguito da un pulsante di call-to-action. Questo contenitore utilizza la classe text-center per allineare il contenuto e la classe title-lightweight per un titolo più elegante.
<h3 class=”aicarm-title-lightweight”>Titolo con peso leggero</h3>
<p>Un paragrafo di testo seguito da un pulsante di call-to-action.</p>
<a href=”#” class=”aicarm-button aicarm-mt-10″>Azione</a>
</div>
Esempio 3: Scheda informativa con elementi separati
Scheda con elementi separati
Prima sezione
Questa scheda informativa utilizza diversi elementi del sistema di stile. Il titolo è sottolineato grazie alla classe title-underlined e le sezioni sono separate da un divisore tratteggiato.
Seconda sezione
I titoli delle sezioni hanno colori diversi grazie alle classi color e secondary-color. Le classi mt-10 e mb-10 aggiungono spaziatura verticale tra gli elementi.
<h3 class=”aicarm-mt-0 aicarm-mb-20 aicarm-title-underlined”>Scheda con elementi separati</h3>
<div class=”aicarm-mt-10 aicarm-mb-10″>
<h4 class=”aicarm-color”>Prima sezione</h4>
<p>Contenuto della prima sezione…</p>
</div>
<div class=”aicarm-divider-dashed”></div>
<div class=”aicarm-mt-10 aicarm-mb-10″>
<h4 class=”aicarm-secondary-color”>Seconda sezione</h4>
<p>Contenuto della seconda sezione…</p>
</div>
</div>
Esempio 4: Box con icona e contenuto affiancati
Informazione importante
Questo layout combina un elemento icona circolare con un contenuto testuale affiancato. La classe flex-between aiuta a posizionare gli elementi, mentre alcune proprietà style inline completano il layout per elementi specifici.
<div class=”aicarm-flex-between”>
<div style=”width: 80px; height: 80px; background-color: var(–aicarm-primary); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 40px;”>
i
</div>
<div style=”flex-grow: 1; padding-left: 20px;”>
<h4 class=”aicarm-mt-0″>Informazione importante</h4>
<p>Contenuto testuale affiancato all’icona…</p>
</div>
</div>
</div>
11. Speaker Card
Le card dei relatori sono progettate per presentare in modo professionale i relatori di eventi, webinar o membri dello staff. Offrono una visualizzazione coerente con l’identità visiva AICARM e sono completamente responsive.
11.1 Speaker Card Standard
Questa è la versione standard della speaker card, ideale per pagine di eventi o per presentare lo staff medico.
<a href=”/niccolo-maurizi” class=”fusion-no-lightbox”>
<img class=”aicarm-speaker-avatar” src=”URL_IMMAGINE” alt=”Nome del relatore”>
</a>
<div class=”aicarm-speaker-details”>
<div class=”aicarm-speaker-name”>
<svg class=”aicarm-person-icon” viewBox=”0 0 24 24″>
<path d=”M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z”></path>
</svg>
<a href=”/link-profilo” class=”aicarm-speaker-link”>Nome e titolo del relatore</a>
</div>
<div class=”aicarm-speaker-job”>Qualifica professionale e istituzione</div>
</div>
</div>
Note importanti per le Speaker Card:
- Utilizzate immagini di dimensioni quadrate (es. 400x400px) per ottenere avatar circolari perfetti
- La classe
aicarm-speaker-avatarapplica automaticamenteobject-fit: covere un rapporto 1:1 per garantire avatar circolari perfetti - L’icona SVG persona è incorporata direttamente nel codice per evitare problemi di caricamento
- Su mobile, la card diventa verticale con l’avatar centrato per una visualizzazione ottimale
11.2 Speaker Card Compatta
Versione più piccola e compatta, ideale per sidebar o sezioni con spazio limitato.
<!– Stesso contenuto della speaker card standard –>
</div>
11.3 Grid di Speaker
Utilizzate la griglia per disporre più relatori in modo ordinato. Su desktop saranno visualizzati due relatori per riga, mentre su mobile ciascun relatore occuperà una riga completa.
<div class=”aicarm-flex-between” style=”width: 100%; margin-left: 0; margin-right: 0;”>
<div class=”aicarm-w-50″ style=”padding: 10px 5px;”>
<!– Speaker Card 1 –>
<div class=”aicarm-speaker-card” style=”width: 100%; margin: 0; height: 100%;”>
<a href=”/niccolo-maurizi” class=”fusion-no-lightbox”>
<img class=”aicarm-speaker-avatar” src=”URL_IMMAGINE_1″ alt=”Dott. Niccolò Maurizi”>
</a>
<div class=”aicarm-speaker-details”>
<div class=”aicarm-speaker-name”>
<svg class=”aicarm-person-icon” viewBox=”0 0 24 24″>
<path d=”M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z”></path>
</svg>
<a href=”/niccolo-maurizi” class=”aicarm-speaker-link”>Dott. Niccolò Maurizi</a>
</div>
<div class=”aicarm-speaker-job”>Cardiologo, responsabile dell’ambulatorio Cardiomiopatie presso il CHUV di Losanna</div>
</div>
</div>
</div>
<div class=”aicarm-w-50″ style=”padding: 10px 5px;”>
<!– Speaker Card 2 –>
<div class=”aicarm-speaker-card” style=”width: 100%; margin: 0; height: 100%;”>
<a href=”/altro-relatore” class=”fusion-no-lightbox”>
<img class=”aicarm-speaker-avatar” src=”URL_IMMAGINE_2″ alt=”Dr. Nome Esempio”>
</a>
<div class=”aicarm-speaker-details”>
<div class=”aicarm-speaker-name”>
<svg class=”aicarm-person-icon” viewBox=”0 0 24 24″>
<path d=”M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z”></path>
</svg>
<a href=”/altro-relatore” class=”aicarm-speaker-link”>Dr. Nome Esempio</a>
</div>
<div class=”aicarm-speaker-job”>Specialista in Cardiologia, Ospedale San Raffaele di Milano</div>
</div>
</div>
</div>
</div>
12. Gestione delle immagini
Il sistema di stile AICARM include diverse classi per gestire le immagini in modo coerente. Queste classi semplificano l’integrazione delle immagini mantenendo l’identità visiva del sito.
12.1 Immagine base
La classe base aicarm-img applica stili essenziali come larghezza massima al 100%, altezza automatica e bordi leggermente arrotondati.
<img src=”URL_IMMAGINE” alt=”Descrizione” class=”aicarm-img”>
</div>
12.2 Immagine con didascalia
Aggiungete una didascalia esplicativa sotto l’immagine usando la classe aicarm-img-caption.
<img src=”URL_IMMAGINE” alt=”Descrizione” class=”aicarm-img aicarm-img-shadow aicarm-img-centered”>
<div class=”aicarm-img-caption”>Testo della didascalia</div>
</div>
12.3 Immagine rotonda
Per creare un’immagine perfettamente circolare, utilizzate la classe aicarm-img-rounded. Per risultati ottimali, utilizzate immagini con proporzioni 1:1 (quadrate).
<img src=”URL_IMMAGINE” alt=”Descrizione” class=”aicarm-img aicarm-img-rounded aicarm-img-centered” style=”width: 150px;”>
</div>
Note importanti per immagini rotonde:
- La classe
aicarm-img-roundedapplica automaticamenteborder-radius: 50%easpect-ratio: 1/1 - La proprietà
object-fit: covergarantisce che l’immagine riempia sempre completamente il cerchio, anche se l’originale non è quadrata - Per controllare la dimensione, impostate la larghezza tramite l’attributo
style="width: [dimensione];" - L’immagine centrata (
aicarm-img-centered) utilizzamargin-left: auto; margin-right: auto;
12.4 Varianti di stile per le immagini
Immagine con ombra
Immagine con bordo
12.5 Galleria di immagini
Per disporre più immagini in una griglia responsive, utilizzate la classe aicarm-img-gallery.
<div class=”aicarm-img-gallery-item”>
<img src=”URL_IMMAGINE_1″ alt=”Descrizione 1″ class=”aicarm-img”>
</div>
<div class=”aicarm-img-gallery-item”>
<img src=”URL_IMMAGINE_2″ alt=”Descrizione 2″ class=”aicarm-img”>
</div>
<div class=”aicarm-img-gallery-item”>
<img src=”URL_IMMAGINE_3″ alt=”Descrizione 3″ class=”aicarm-img”>
</div>
</div>
12.6 Combinazioni di classi per le immagini
È possibile combinare diverse classi per ottenere l’effetto desiderato:
Linee guida per l’utilizzo ottimale delle immagini
- Utilizzate sempre l’attributo
altcon una descrizione accurata dell’immagine per l’accessibilità - Per le immagini rotonde e gli avatar, preparate immagini quadrate (1:1) per risultati ottimali
- Ottimizzate il peso delle immagini prima di caricarle (idealmente sotto i 100KB)
- Mantenete una larghezza minima di 800px per le immagini a larghezza piena per garantire la qualità su schermi ad alta risoluzione
- Per le speaker card, assicuratevi che il volto della persona sia ben centrato nell’immagine
