Carte

بطاقةCard

Stablesrc/dsm/components/card.tsx

La carte présente un contenu autonome — démarche, institution, actualité — avec un titre, un court texte et une action. Elle se compose librement à partir de sous-composants (média, corps, titre, texte, badges, pied) selon le besoin.

Import

import { Card } from "@/dsm/components/card";

Exemples

Carte par défaut

Carte interactive avec média, métadonnée, titre lien et badge de statut.

LTR

Démarche · Gratuit

Demander un extrait d'acte de naissance

Obtenez votre extrait en ligne, livré en PDF signé électroniquement sous 48 heures.

En ligne

Variantes

Les cinq styles de fond : défaut, teinté, contouré, discret et inversé.

LTR

Défaut

Extrait d'acte de naissance

Fond neutre avec bordure fine, l'usage le plus courant.

Teinté

Attestation de résidence

Fond légèrement grisé, sans bordure, pour un groupe secondaire.

Contouré

Renouvellement de la carte grise

Bordure marquée sans remplissage, pour un fond déjà chargé.

Discret

Guide du permis de conduire

Sans fond ni bordure, pour s'intégrer à une liste déjà encadrée.

Chiffre clé

1,2 M

démarches réalisées en ligne ce mois-ci.

Orientation horizontale

Média à côté du contenu à partir du format `sm`.

LTR

Direction Générale de la Sûreté Nationale

Passeport biométrique en 5 jours

Prenez rendez-vous en ligne, déposez votre dossier au centre le plus proche et suivez son avancement depuis votre espace personnel.

Prendre rendez-vous

Grille de démarches

Trois démarches avec badges de statut et flèche d'action.

LTR

DGSN · Gratuit

Renouveler ma carte nationale d'identité électronique

Dossier en ligne, retrait au bureau d'arrondissement dans un délai de 10 jours ouvrés.

En ligne

CNSS · Payant

Adhérer à l'Assurance Maladie Obligatoire

Constituez votre dossier AMO et suivez le remboursement de vos prestations de santé.

En cours

Ministère de l'Intérieur

Immatriculer un véhicule neuf

Obtenez votre carte grise définitive après contrôle du dossier par la préfecture.

3 jours

Carte informative

Carte non interactive, sans lien ni flèche, pour un contenu de repère.

LTR

Bon à savoir

Horaires des bureaux d'état civil

Les bureaux d'état civil des communes de Rabat, Casablanca et Marrakech reçoivent le public du lundi au vendredi, de 8h30 à 16h00, sans interruption.

Usage

Quand l'utiliser

Utilisez une carte pour présenter une démarche, une actualité ou une institution avec un titre et une description courte.
Passez `href` à `CardTitle` pour transformer toute la carte en zone cliquable (lien enrichi) et activez `interactive` sur `Card`.
Utilisez la variante `inverse` avec parcimonie, pour un chiffre clé ou un encart mis en avant.

Quand ne pas l'utiliser

N'imbriquez pas un second lien ou bouton dans une carte dont le titre est déjà un lien : les zones cliquables se chevaucheraient.
N'utilisez pas une carte pour un simple élément de liste dense : un composant de liste ou un tableau convient mieux à des rangées nombreuses.

Accessibilité & langues

Accessibilité

Le lien enrichi (`CardTitle` avec `href`) pose un pseudo-élément `::after` en position absolue : vérifiez qu'aucun autre élément interactif ne se trouve dans la carte.
Le focus visible de la carte entière est piloté par `:focus-visible` sur le lien du titre, avec un anneau et un décalage (`ring-offset`).

RTL & multilingue

La flèche de `CardArrow` est `ArrowForward` : elle pointe naturellement vers la fin de la ligne de lecture et se retourne en arabe.
En orientation `horizontal`, le média occupe toujours le début (`start`) de la carte, quel que soit le sens de lecture.

Propriétés

Card

Propriété	Type	Défaut	Description
variant	"default" \| "tinted" \| "outlined" \| "ghost" \| "inverse"	default	Style de fond et de bordure de la carte.
orientation	"vertical" \| "horizontal"	vertical	En `horizontal`, le média et le corps se placent côte à côte à partir de `sm`.
interactive	boolean	false	Active les états de survol/focus (ombre, bordure, anneau) ; à activer quand la carte contient un lien enrichi.
className	string	—	Classes Tailwind supplémentaires.

CardMedia

Propriété	Type	Défaut	Description
className	string	—	Conteneur du média (image, illustration, dégradé) ; ratio 16/9 par défaut, largeur 2/5 en orientation horizontale à partir de `sm`.

CardBody

Propriété	Type	Défaut	Description
className	string	—	Zone de contenu de la carte, avec un espacement vertical constant.

CardMeta

Propriété	Type	Défaut	Description
className	string	—	Étiquette courte au-dessus du titre (catégorie, coût, type de démarche).

CardTitle

Propriété	Type	Défaut	Description
href	string	—	Transforme le titre en lien et agrandit la zone cliquable à toute la carte (lien enrichi).
className	string	—	Classes Tailwind supplémentaires.

CardText

Propriété	Type	Défaut	Description
className	string	—	Texte de description, limité à quelques lignes.

CardBadges

Propriété	Type	Défaut	Description
className	string	—	Conteneur pour un ou plusieurs badges de statut, avec retour à la ligne automatique.

CardFooter

Propriété	Type	Défaut	Description
className	string	—	Pied de carte ; aligne son contenu en fin de carte grâce à `mt-auto`.

CardArrow

Propriété	Type	Défaut	Description
label	ReactNode	—	Libellé optionnel affiché avant la flèche (ex. « Consulter »).
className	string	—	Classes Tailwind supplémentaires.