Card 1
Some quick example Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi consequatur, dolorem est et reprehenderit sit.
Composant de mise en page flexible pour afficher du contenu structuré en blocs distincts. Composé d'un
en-tête, d'un corps et d'un pied optionnels. Supporte plusieurs variantes de couleur, de bordure et de
mise en page via .card-container.
Some quick example Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi consequatur, dolorem est et reprehenderit sit.
Some quick example
Some quick example
Some quick example
Some quick example
Contenu principal de la carte.
Contenu sans header ni footer.
Préférez <article> pour les cartes représentant un
contenu autonome (post, produit, fiche). Utilisez <div>
pour les cartes purement décoratives ou de mise en page.
Utilisez <header> et
<footer> à l'intérieur pour une structure sémantique
correcte.
| CLASSE | ÉLÉMENT | DESCRIPTION |
|---|---|---|
.card |
<article> / <div>
|
Conteneur principal. Applique flex-column, border-radius, border et background via tokens CSS. |
.card-header |
<header> / <div>
|
En-tête de la carte. Padding horizontal et vertical via tokens CSS. |
.card-body |
<div> |
Corps principal. Applique flex: 1 1 auto pour
occuper l'espace disponible. Padding via tokens CSS.
|
.card-footer |
<footer> / <div>
|
Pied de carte. Padding horizontal et vertical via tokens CSS. |
.card-{color} |
.card |
Variante couleur générée depuis $colors. Fond et
bordure colorés, texte adapté via --content-on-{color}.
|
.card-container |
<div> |
Grille responsive avec auto-fit et largeur
minimale
via --card-min-width.
|
Fond et bordure issus des tokens globaux du thème.
Contenu de la carte par défaut.
Combiner .card avec .border-{color} pour coloriser uniquement la bordure.
Bordure primary.
Bordure danger.
Bordure success.
Combiner .border-{color} avec .text-{color} pour une carte accentuée.
Texte et bordure de la même couleur.
Utiliser .border-y sur le .card-body pour délimiter les sections.
Corps avec bordures horizontales.
Variantes pleine couleur générées depuis $colors.
Fond primary.
Fond secondary.
Fond danger.
Fond success.
Fond warning.
Fond info.
Les cartes ont un overflow: auto; par défaut pour respecter le
border-radius lors de l'application d'un fond coloré sur le header ou footer.
Corps par défaut.
Corps par défaut.
Contenu
La classe .card-container crée une grille responsive via
grid-template-columns: repeat(auto-fit,
minmax(var(--card-min-width), auto)).
Les cartes s'adaptent automatiquement au nombre de colonnes disponibles.
La largeur minimale des cartes dans le conteneur est contrôlée par
--card-min-width (défaut : 25rem).
En dessous de cette largeur, chaque carte occupe une colonne entière.
Pour ajuster la largeur minimale localement, surcharger la variable sur l'élément
.card-container.
/* Modify the minimum width for a specific container */
.my-card-container {
--card-min-width:
20rem;
}
| TOKEN | RÔLE |
|---|---|
--card-border-style |
Style de bordure de la carte |
--card-border-width |
Épaisseur de la bordure |
--card-border-radius |
Rayon des coins |
--card-border-color |
Couleur de la bordure par défaut |
--card-background-color |
Couleur de fond par défaut |
--card-header-padding-x |
Padding horizontal de l'en-tête |
--card-header-padding-y |
Padding vertical de l'en-tête |
--card-body-padding-x |
Padding horizontal du corps |
--card-body-padding-y |
Padding vertical du corps |
--card-footer-padding-x |
Padding horizontal du pied |
--card-footer-padding-y |
Padding vertical du pied |
--card-group-gap |
Espacement entre les cartes dans .card-container |
--card-min-width |
Largeur minimale d'une carte dans .card-container
(défaut : 25rem)
|
/* Global variables */
:root {
--card-border-radius: 1rem;
--card-min-width:
20rem;
--card-group-gap:
1.5rem;
}
/* Light theme */
:root[data-theme="light"] {
--card-background-color: #ffffff;
--card-border-color: #e5e5e5;
}
/* Dark theme */
:root[data-theme="dark"] {
--card-background-color: #262626;
--card-border-color: #404040;
}
| PRATIQUE | DÉTAIL |
|---|---|
Balise <article> |
Utiliser <article> pour les cartes représentant
un contenu autonome et réutilisable (fiche produit, post, etc.).
|
| Titres hiérarchiques | Respecter la hiérarchie des titres dans .card-header.
Utiliser h2, h3… selon le contexte de la page.
|
| Contraste | Pour les variantes .card-{color}, le texte est
automatiquement adapté via --content-on-{color}.
Vérifier le contraste pour les surcharges manuelles (ex : .text-{color} sans fond adapté).
|
| Carte cliquable | Si toute la carte est cliquable, utiliser un lien <a> englobant ou un
<button>. Ne jamais utiliser un
onclick sur un <div> non-interactif.
|
Utiliser .card-container pour les grilles de cartes
responsive plutôt que de gérer manuellement le grid ou le flex. La variable
--card-min-width suffit pour adapter le comportement.
Ne pas ajouter de margin ou de
padding directement sur
.card : cela peut casser le comportement du conteneur
et du border-radius. Utiliser --card-group-gap pour
l'espacement entre cartes.
Ne pas combiner .card-{color} avec
.border-{color} ou
.text-{color} différent : les couleurs de texte et de
fond sont déjà calculées automatiquement par la variante et des surcharges peuvent créer des problèmes
de contraste.
Les classes .card-{color} sont générées via une boucle
SCSS sur $colors. Pour ajouter une nouvelle couleur
sémantique, l'ajouter dans abstracts/colors.
Card · WEBDEV-UI DOCS / V1