Cartes

Un conteneur de contenu flexible et extensible. Un moyen pratique d'afficher du contenu et pour présenter des objets similaires

Vue d'ensemble

Les cartes card permettent d'afficher du contenu composé de différents types d'objets et contiennent des options pour les en-têtes <header> et les pieds de page <footer>. Elles sont construites avec le moins de balisage et de styles possible. Les cartes sont basées sur flexbox en mode colonne, et les en-têtes et pieds de page en mode ligne ; ce qui permet un alignement simplifié grâce aux classes utilitaires disponibles pour les flexbox et facilite donc, l'intégration avec d'autres composants.

Par défaut les cartes, l'en-tête et le pied de page ont des marges internes nulles

CONTENU

EN-TETE

CONTENU

<div class="panel">
<div class="card">
	<p>CONTENU</p>
</div>

<div class="card">
	<header>
		EN-TETE
	</header>
	<p>CONTENU</p>
	<footer>
		PIED DE PAGE
	</footer>
</div>
</div>

Panneau simple

La classe panel est un simple conteneur avec des marges internes et des marges verticales externes minimales. Il est disponible juste pour uniformiser l'affichage de contenu. Il peut être utilisé seul en dehors des cartes.

PANNEAU SIMPLE

<div class="panel">
	<p>PANNEAU SIMPLE</p>
</div>

Evolution

Pour améliorer le design des cartes, il est possible d'ajouter des images en en-tête, soit directement en tant que premier enfant, à l'intérieur de la balise <header> ou à l'aide de la balise <figure>^{MDN Référence}. L'image s'adaptera automatiquement à la largeur de la carte. Il est également possible de placer l'image en bas, en tant que dernier enfant.

Pour pour d'informations sur l'élément <figure> et les médias, voir la section médias.

CONTENU

EN-TETE

CONTENU

<div class="card">
	<img src="https://picsum.photos/300/200/" alt="picsum" width="300" height="200">
	<div class="panel">
		<p>CONTENU</p>
	</div>
</div>

<div class="card  ui--primary">
	<header>
		<img src="https://picsum.photos/300/200/" alt="picsum" width="300" height="200">
		<div class="panel">
			EN-TETE
		</div>
	</header>
	<div class="panel">
		<p>CONTENU</p>
	</div>
</div>

<div class="card  ui--secondary">
	<figure>
		<img src="https://picsum.photos/300/200/" alt="picsum" width="300" height="200">
		<figcaption>LIBELLE</figcaption>
	</figure>
	<div class="panel">
		<p>CONTENU</p>
	</div>
</div>

<div class="card">
	<div class="panel">
		<p>CONTENU</p>
	</div>
	<footer>
		<div class="panel">
			PIED DE PAGE
		</div>
		<img src="https://picsum.photos/300/200/" alt="picsum" width="300" height="200">
	</footer>
</div>

Personnalisation

Grâce aux variables CSS, vous pouvez customiser facilement vos cartes.
Pour plus d'informations reportez-vous à la section Personnalisation

CUSTOM CARD

<div class="card custom--card">
	<div class="panel flex flex--center-all">
		CUSTOM CARD
	</div>
</div>

.custom--card {
  --background-color: #c49656;
  --color: #2d1d11;
  --border-color: #983c09;
  --border-width: 2px;
  --border-radius: 50% 50% 10% 10% / 30% 30% 5% 5%;
  --box-shadow: 6px 2px 16px 0px rgba(136, 165, 191, 0.48) , -6px -2px 16px 0px rgba(255, 255, 255, 0.8)
}