Card

Candidate

Card regroupe un contenu qui forme une unite claire : offre marketing, resume de segment, integration ou information de compte. Elle ne doit pas devenir le conteneur par defaut de chaque section.

Variants

Audience

Segments actifs

128 segments sont disponibles dans les destinations connectees.

sell Synchronise

ABConsent

Configuration CMP

Surface secondaire pour une information moins prioritaire.

Identites produit

Une card interactive rend toute la surface navigable.

Variant	Role
default	Surface principale avec fond blanc
subtle	Surface secondaire sur fond neutre
href	Card interactive rendue comme un lien
compact	Padding reduit pour contenu dense

States

Une Card non interactive n’a pas de hover ou focus. Une Card avec href possede hover, focus-visible et curseur interactif. Il n’existe pas d’etat disabled : retirer le lien ou afficher un statut explicite.

Astro

---
import Card from '../components/ui/Card.astro';
---

<Card href="/products/audience" ariaLabel="Decouvrir Audience">
  <span slot="eyebrow">Produit</span>
  <span slot="title">Audience</span>
  <p>Activez vos segments dans les destinations connectees.</p>
</Card>

HTML output

<a href="/products/audience" class="pixel-card pixel-card--interactive">
  <header>...</header>
  <div>Activez vos segments dans les destinations connectees.</div>
</a>

Tokens

--card-bg, --card-bg-subtle, --card-bg-hover, --card-border, --card-border-hover, --card-radius, --card-padding-*, --card-title, --card-text, --card-shadow-hover.

Do / Don’t

Do	Don’t
Regrouper un contenu qui forme une unite.	Encapsuler chaque section dans une Card.
Rendre toute la Card interactive si elle a une destination unique.	Placer plusieurs liens concurrents dans une Card cliquable.
Garder une hierarchie simple : eyebrow, title, body, footer.	Imbriquer des Cards dans des Cards.
Utiliser subtle pour une priorite secondaire.	Ajouter une shadow forte sans elevation fonctionnelle.

Accessibility

Une Card interactive utilise un vrai <a> et doit avoir un libelle accessible clair. Ne pas rendre la Card interactive uniquement avec JavaScript. Verifier que l’ordre des slots reste logique sans styles.