Product Card
Fiche produit en trois tailles selon la place qu'on lui donne : compacte, avec description dès 220 px, puis en rangée avec un second bouton dès 300 px.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le conteneur interrogé est la racine .fx-0749-root (container: pdc-card / inline-size, width: 100%). La carte .pdc-card démarre en colonne : visuel .pdc-image de 90 px de haut (dégradé indigo → violet, pictogramme d'étiquette), nom en h4, prix .pdc-price en violet clair, puis un seul bouton « Acheter ». La description .pdc-desc et le bouton « Détails » existent dans le HTML mais restent en display: none.
Premier palier, @container pdc-card (min-width: 220px) : la description apparaît sous le prix. Second palier, min-width: 300px : la carte se met en rangée, le visuel devient une colonne de 96 px (110 px de haut au minimum), les boutons descendent en bas de la carte (margin-top: auto) et « Détails » s'affiche à côté d'« Acheter ». Trois formes donc, mesurées à 170, 260 et 330 px de conteneur.
Les deux boutons sont de vrais <button type="button"> qui ne font rien par eux-mêmes : à vous de les relier à votre panier ou à votre page produit (ou de les remplacer par des liens <a>). Un bouton masqué par display: none sort aussi de l'ordre de tabulation, donc le clavier ne tombe jamais sur un bouton invisible.
Accessibilité
- Vrais boutons : « Acheter » et « Détails » sont des
<button>, atteignables à la touche Tab (sur Safari, selon le réglage du clavier macOS) et entourés d'un contour violet clair au:focus-visible. - Contraste : texte blanc sur le bouton
#7c3aedet prix#a78bfasur fond sombre, tous deux au-dessus de 4,5:1. - Contenu qui disparaît : à moins de 220 px, la description n'est pas affichée et n'est donc pas lue non plus. Si elle contient une information indispensable (taille, allergène…), gardez-la visible en retirant le
display: nonede.pdc-desc. - Pictogramme : le SVG porte
aria-hidden="true"; le nom du produit enh4suffit à l'identifier. - Mouvement réduit : les transitions de la carte, du visuel et des boutons sont supprimées sous
prefers-reduced-motion: reduce.
Compatibilité navigateur
Requêtes de conteneur et flexbox, rien d'autre. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : trois formes aux mêmes largeurs, pas de débordement à 390 px, une copie qui change de taille n'affecte pas l'autre.
Sans requêtes de conteneur, la carte garde sa forme compacte (visuel, nom, prix, « Acheter ») : la description et « Détails » restent masqués.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0749-root">
<div class="pdc-card">
<div class="pdc-image"><svg viewBox="0 0 24 24" aria-hidden="true">…</svg></div>
<div class="pdc-info">
<h4>Nom du produit</h4>
<span class="pdc-price">29 €</span>
<p class="pdc-desc">Description courte</p>
<div class="pdc-actions">
<button type="button" class="pdc-btn pdc-btn--primary">Acheter</button>
<button type="button" class="pdc-btn pdc-btn--secondary">Détails</button>
</div>
</div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Paliers (CSS — @container pdc-card (min-width: 220px) et (min-width: 300px)) |
220 px pour la description, 300 px pour la rangée | Avec un nom de produit long, montez la rangée à 340 px ; avec une description d'une ligne, le premier palier peut descendre à 200 px. |
Visuel (CSS ou HTML — .pdc-image) |
Dégradé #1e1b4b → #4c1d95 + pictogramme d'étiquette |
Mettez la photo du produit avec style="background-image:url(…)" et retirez le SVG ; le recadrage cover est déjà en place. |
Couleur d'accent (CSS — .pdc-price et .pdc-btn--primary) |
#a78bfa / #7c3aed |
Remplacez les deux valeurs par la couleur de votre marque en gardant un contraste de 4,5:1 avec le texte du bouton. |
Libellés et actions (HTML — .pdc-btn) |
« Acheter », « Détails », sans action | Branchez un écouteur click, ou remplacez les balises par <a href="…"> en gardant les classes. |
Largeur du visuel en rangée (CSS — .pdc-image { width } dans le palier 300 px) |
96 px, 110 px de haut minimum | 130 px pour un produit très visuel (vêtement, déco), 72 px pour un catalogue de pièces détachées. |
Fond (CSS — .fx-0749-root et .pdc-card) |
#0a0a0f et voile blanc à 4 % |
Pour une boutique claire, fond blanc, titre sombre et description grise. |
FAQ
addEventListener('click', …)) ou transformez-les en liens vers votre page produit.repeat(auto-fill, minmax(180px, 1fr)), les fiches passent d'elles-mêmes de la forme compacte à la forme complète quand la grille s'élargit.
