Card

Les cards regroupent du contenu lié dans une surface visuellement délimitée. Elles structurent les portails citoyens, tableaux de bord et listes de services.

Variante	Classe	Usage
`flat` (défaut)	`tds-card--flat`	Liste dense, faible hiérarchie visuelle
`elevated`	`tds-card--elevated`	Mise en avant, grille de services
`outlined`	`tds-card--outlined`	Contexte à fond déjà chargé (évite l’ombre)

<!-- Plate (défaut) -->
<div class="tds-card tds-card--flat">...</div>

<!-- Avec ombre -->
<div class="tds-card tds-card--elevated">...</div>

<!-- Avec bordure renforcée -->
<div class="tds-card tds-card--outlined">...</div>

Importation

@import "@tds-tchad/core/components/card/card.css";

Structure de base

<div class="tds-card">
  <div class="tds-card__header">
    <h3 class="tds-card__title">Demande de carte d'identité</h3>
  </div>
  <div class="tds-card__body">
    <p class="tds-card__subtitle">Déposée le 15 janvier 2024</p>
    <p class="tds-card__description">
      Votre demande est en cours de traitement par la préfecture de N'Djamena.
    </p>
  </div>
  <div class="tds-card__footer">
    <span class="tds-badge tds-badge--warning">En cours</span>
    <a href="/dossier/001234" class="tds-link tds-link--standalone">Voir le dossier</a>
  </div>
</div>

Card interactive (lien)

<a href="/service/cni" class="tds-card tds-card--elevated">
  <div class="tds-card__body">
    <h3 class="tds-card__title">Carte nationale d'identité</h3>
    <p class="tds-card__description">
      Demandez ou renouvelez votre carte d'identité en ligne.
    </p>
  </div>
  <div class="tds-card__footer">
    <span class="tds-link tds-link--standalone">Faire une demande</span>
  </div>
</a>

Grille de cards

<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--tds-spacing-5);">
  <div class="tds-card tds-card--elevated">
    <div class="tds-card__body">
      <h3 class="tds-card__title">État civil</h3>
      <p class="tds-card__description">Actes de naissance, mariage, décès.</p>
    </div>
  </div>
  <div class="tds-card tds-card--elevated">
    <div class="tds-card__body">
      <h3 class="tds-card__title">Documents d'identité</h3>
      <p class="tds-card__description">CNI, passeport, permis de séjour.</p>
    </div>
  </div>
  <div class="tds-card tds-card--elevated">
    <div class="tds-card__body">
      <h3 class="tds-card__title">Fiscalité</h3>
      <p class="tds-card__description">Déclaration de revenus, taxes locales.</p>
    </div>
  </div>
</div>