HTML e CSS

Card responsive con immagine

Scheda flessibile con immagine, testo e pulsante.

Quando si usa

Quando devi presentare articoli, servizi, corsi, prodotti o schede didattiche in una griglia ordinata.

Perché si usa

La card separa chiaramente i contenuti, migliora la scansione visiva e si adatta bene sia al desktop sia allo smartphone.

Vantaggi principali

Struttura riutilizzabile in molte pagine
Immagine sempre proporzionata
Testo e pulsante facili da personalizzare

Anteprima del risultato

Qui vedi come si presenta la card responsive generata dal codice: immagine, testo e pulsante restano dentro un box ordinato.

Immagine 4:3

Titolo della card

Breve descrizione del contenuto, utile per articoli, corsi o servizi.

Scopri di più

Codice completo

Puoi copiare il frammento e inserirlo in una pagina di prova. Prima della pubblicazione sostituisci i dati dimostrativi con quelli reali.

<article class="scheda">
  <img src="immagine.jpg" alt="Descrizione dell'immagine">
  <div class="scheda-corpo">
    <h2>Titolo della card</h2>
    <p>Breve descrizione del contenuto.</p>
    <a href="#" class="pulsante">Scopri di più</a>
  </div>
</article>

<style>
.scheda{max-width:360px;border:1px solid #d8e1ec;border-radius:14px;overflow:hidden;background:#fff}
.scheda img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.scheda-corpo{padding:18px}
.pulsante{display:inline-block;padding:10px 15px;background:#2463a9;color:#fff;text-decoration:none;border-radius:8px}
</style>

Da personalizzare: Sostituisci immagine, titolo, descrizione, colori, larghezza massima e indirizzo del collegamento.

Errore da evitare: Evita immagini prive di testo alternativo e altezze fisse troppo rigide.