Card

Carte universelle flexible et responsive. Supporte images, titres, contenu, actions, liens, et plusieurs variantes visuelles. Adapte a de nombreux cas d'usage : produit, article de blog, profil, statistiques, etc.

Exemples d'utilisation

Basique

Carte simple

<SuCard title="Titre de la carte" subtitle="Description courte">
  <p>Contenu principal de la carte.</p>
</SuCard>

Variantes

default / outlined / elevated / filled

<SuCard variant="default" title="Default" />
<SuCard variant="outlined" title="Outlined" />
<SuCard variant="elevated" title="Elevated" />
<SuCard variant="filled" title="Filled" />

Tailles

sm / md / lg

<SuCard size="sm" title="Small" />
<SuCard size="md" title="Medium" />
<SuCard size="lg" title="Large" />

Avec image

Image en en-tete

<SuCard
  image="https://example.com/photo.jpg"
  imageAlt="Description"
  title="Paysage alpin"
  subtitle="Decouvrez les montagnes"
>
  <p>Contenu de la carte.</p>
</SuCard>

Direction horizontale

Image a gauche, contenu a droite

<SuCard
  direction="horizontal"
  image="/photo.jpg"
  title="Carte horizontale"
>
  <p>Contenu a droite de l'image.</p>
</SuCard>

Carte cliquable

Cliquable et lien

<!-- Cliquable -->
<SuCard :clickable="true" title="Cliquez" @click="handleClick" />

<!-- Lien -->
<SuCard href="/page" title="Naviguer" />

Avec footer (actions)

Zone d'actions en bas

<SuCard title="Destination" subtitle="299 EUR">
  <p>Description.</p>
  <template #footer>
    <SuButton variant="primary" size="sm">Reserver</SuButton>
    <SuButton variant="ghost" size="sm">Details</SuButton>
  </template>
</SuCard>

Overlay sur image

Badge sur l'image

<SuCard image="/photo.jpg" title="Article">
  <template #image-overlay>
    <SuBadge variant="primary" size="sm">Populaire</SuBadge>
  </template>
</SuCard>

API

Props

Prop	Type	Defaut	Description
variant	'default' | 'outlined' | 'elevated' | 'filled'	'default'	Variante visuelle
size	'sm' | 'md' | 'lg'	'md'	Taille
direction	'vertical' | 'horizontal'	'vertical'	Direction du layout
radius	Radius	'md'	Rayon des coins
clickable	boolean	false	Rend la carte cliquable
href	string	—	Lien href (rend la carte en <a>)
target	LinkTarget	—	Attribut target pour les liens
image	string	—	URL de l'image
imageAlt	string	—	Alt text de l'image
imageRatio	'16/9' | '4/3' | '1/1' | '21/9' | 'auto'	'16/9'	Ratio de l'image
imageFit	'cover' | 'contain' | 'fill'	'cover'	Ajustement de l'image
imagePosition	'top' | 'bottom'	'top'	Position de l'image
title	string	—	Titre
subtitle	string	—	Sous-titre
titleLevel	1-6	3	Niveau de heading
disabled	boolean	false	Etat desactive
fullWidth	boolean	false	Pleine largeur
maxWidth	string	—	Largeur max personnalisee

Slots

Slot	Description
default	Contenu principal
image	Zone image personnalisee (remplace la prop image)
image-overlay	Overlay sur l'image (badges, tags)
header	En-tete au-dessus du contenu (apres l'image)
title	Titre personnalise
subtitle	Sous-titre personnalise
footer	Zone d'actions en bas

Evenements

Evenement	Payload	Description
click	MouseEvent	Emis au clic (si clickable ou href)

Accessibilite

• Rendu en <article> par defaut, <a> si href est fourni
• role="button" + tabindex="0" si cliquable sans href
• Navigation clavier : Enter et Space declenchent le clic
• aria-disabled="true" quand desactive
• rel="noopener noreferrer" automatique si target="_blank"
• loading="lazy" sur les images
• Support prefers-contrast: high et prefers-reduced-motion: reduce
• Direction horizontale repasse en vertical sur mobile (< 640px)