Generatore di card in CSS (sezione servizi)

Generatore di card in CSS (sezione servizi): a cosa serve

Le card sono il modo più comune di presentare servizi, vantaggi o prodotti in una pagina. Questo generatore crea la sezione con il titolo e le card che scrivi, ciascuna con icona o immagine, titolo, testo e link.

La griglia usa repeat(auto-fit, minmax()), che riorganizza le card da sola dal cellulare al computer senza media query. Scegli tra ombra, bordo o sfondo colorato, la larghezza minima, la card intera cliccabile con un unico link accessibile e l’effetto di sollevamento al passaggio del mouse, che compare solo sui dispositivi con mouse e rispetta chi preferisce meno movimento.

Come si usa

1. Scrivi una card per riga.
2. Scegli lo stile, il colore e la larghezza minima.
3. Copia il codice e incollalo nella pagina.

Quando usarlo

• Sezione servizi di un’officina o di un salone.
• Vantaggi di un prodotto.
• Elenco delle categorie di un negozio.

Domande frequenti

Come si adattano le card al cellulare?

La griglia usa grid-template-columns con repeat(auto-fit, minmax(...)): entrano tante card quante ne permette la larghezza, ciascuna con la larghezza minima scelta. Su cellulare ce n’è una per riga, su tablet due e su computer tre o quattro, senza media query.

Posso rendere cliccabile l’intera card?

Sì. Seleziona l’opzione e indica il link in ogni card: il codice usa il titolo come link ed estende l’area di clic a tutta la card con uno pseudo-elemento, mantenendo l’HTML accessibile (un solo link per card, con testo).

Emoji o icona?

Le card accettano un breve simbolo o un’immagine. Per un aspetto più professionale, usa icone SVG dello stesso set (come Lucide o Heroicons) incollando l’indirizzo dell’immagine nel campo della card.

È davvero gratis?

Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.

Strumenti simili