---
title: "Card"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Card with header, body, and footer sections. Supports image overlays, horizontal layouts, and theme variants for product and content containers."
url: https://frutjam.com/fr/components/card
---

# Card Component

Les composants de carte sont des conteneurs polyvalents permettant de combiner des informations associées en une seule unité visuellement cohérente. Construites avec du HTML sémantique et des zones de contenu flexibles, les cartes organisent le contenu de manière hiérarchique et s'adaptent à diverses mises en page. Le système de cartes Frutjam propose plusieurs variantes de couleurs, tailles et styles pour les présentations de produits, les articles de blog, les témoignages et les éléments de tableau de bord.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

| Classe         | Taper        | Description                                                     |
| -------------- | ------------ | --------------------------------------------------------------- |
| card           | Base         | Conteneur de contenu surélevé avec coins arrondis               |
| card-outline   | Style        | Remplissage transparent avec bordure visible                    |
| card-dashed    | Style        | Style de bordure en pointillés                                  |
| card-title     | Modificateur | Élément de titre à l'intérieur de la carte                      |
| card-content   | Modificateur | Zone de contenu rembourrée de la carte                          |
| card-actions   | Modificateur | Zone de pied de page pour les boutons et les commandes d'action |
| card-xs        | Taille       | Rembourrage très petit                                          |
| card-sm        | Taille       | Petit rembourrage                                               |
| card-md        | Taille       | Rembourrage moyen (par défaut)                                  |
| card-lg        | Taille       | Grand rembourrage                                               |
| card-xl        | Taille       | Rembourrage extra large                                         |
| card-primary   | Couleur      | Couleur du thème principal                                      |
| card-secondary | Couleur      | Couleur du thème secondaire                                     |
| card-accent    | Couleur      | Couleur du thème d'accentuation                                 |
| card-neutral   | Couleur      | Couleur du thème neutre                                         |
| card-info      | Couleur      | Couleur sémantique de l'information                             |
| card-success   | Couleur      | Couleur sémantique du succès                                    |
| card-warning   | Couleur      | Couleur sémantique d’avertissement                              |
| card-error     | Couleur      | Couleur sémantique des erreurs                                  |

## Utilisation de base

## Carte avec actions

Utilisez `card-actions` pour ajouter une zone de pied de page pour les boutons et les contrôles d'action.

```html
<div class="card card-md shadow w-88">
  <div class="card-content">
    <h2 class="card-title">Card Title</h2>
    <p>A card with an actions footer for user interactions like buttons and links.</p>
    <div class="card-actions">
      <button class="btn btn-primary">Accept</button>
      <button class="btn">Dismiss</button>
    </div>
  </div>
</div>
```

## Tailles des cartes

Choisissez parmi cinq variantes de taille pour s'adapter à différentes densités de contenu et cas d'utilisation.

```html
<div class="card card-xs card-outline">
  <div class="card-content">
    <h2 class="card-title">Extra Small</h2>
    <p>Compact card for minimal content.</p>
  </div>
</div>

<div class="card card-sm card-outline">
  <div class="card-content">
    <h2 class="card-title">Small</h2>
    <p>Small card for condensed information.</p>
  </div>
</div>

<div class="card card-md card-outline">
  <div class="card-content">
    <h2 class="card-title">Medium</h2>
    <p>Medium card for standard content.</p>
  </div>
</div>

<div class="card card-lg card-outline">
  <div class="card-content">
    <h2 class="card-title">Large</h2>
    <p>Large card for prominent content display.</p>
  </div>
</div>

<div class="card card-xl card-outline">
  <div class="card-content">
    <h2 class="card-title">Extra Large</h2>
    <p>Extra large card for expansive content layouts.</p>
  </div>
</div>
```

## Couleurs des cartes

Appliquez des variantes de couleurs aux cartes pour une différenciation visuelle et une signification sémantique.

```html
<div class="card card-md">
  <div class="card-content">
    <h2 class="card-title">Default</h2>
    <p>Base card color using default theme background.</p>
  </div>
</div>

<div class="card card-md card-primary">
  <div class="card-content">
    <h2 class="card-title">Primary</h2>
    <p>Primary color card for featured content.</p>
  </div>
</div>

<div class="card card-md card-secondary">
  <div class="card-content">
    <h2 class="card-title">Secondary</h2>
    <p>Secondary color card for supporting content.</p>
  </div>
</div>

<div class="card card-md card-accent">
  <div class="card-content">
    <h2 class="card-title">Accent</h2>
    <p>Accent color card for emphasis.</p>
  </div>
</div>

<div class="card card-md card-info">
  <div class="card-content">
    <h2 class="card-title">Info</h2>
    <p>Information card for helpful content.</p>
  </div>
</div>

<div class="card card-md card-success">
  <div class="card-content">
    <h2 class="card-title">Success</h2>
    <p>Success card for positive outcomes.</p>
  </div>
</div>

<div class="card card-md card-warning">
  <div class="card-content">
    <h2 class="card-title">Warning</h2>
    <p>Warning card for caution messages.</p>
  </div>
</div>

<div class="card card-md card-error">
  <div class="card-content">
    <h2 class="card-title">Error</h2>
    <p>Error card for error notifications.</p>
  </div>
</div>

<div class="card card-md card-neutral">
  <div class="card-content">
    <h2 class="card-title">Neutral</h2>
    <p>Neutral card for balanced design.</p>
  </div>
</div>
```

## Couleur d'arrière-plan et de texte personnalisée

Utilisez n’importe quel utilitaire de couleur d’arrière-plan et de texte Tailwind directement sur la carte pour un contrôle total des couleurs.

```html
<div class="card bg-primary text-on-primary w-88">
  <div class="card-content">
    <h2 class="card-title">Custom Colors</h2>
    <p>Apply any background and text color using Tailwind utilities.</p>
  </div>
</div>
```

## Styles de cartes

Appliquez différentes variantes de bordure et de style aux cartes pour une distinction visuelle.

### Carte de contour

```html
<div class="card card-md card-outline">
  <div class="card-content">
    <h2 class="card-title">Outline Style</h2>
    <p>Cards with visible borders for subtle separation from background.</p>
  </div>
</div>

<div class="card card-md card-outline card-primary">
  <div class="card-content">
    <h2 class="card-title">Primary Outline</h2>
    <p>Outline card with primary color border.</p>
  </div>
</div>
```

### Carte en pointillés

```html
<div class="card card-md card-dashed">
  <div class="card-content">
    <h2 class="card-title">Dashed Style</h2>
    <p>Cards with dashed borders for visual interest.</p>
  </div>
</div>

<div class="card card-md card-dashed card-secondary">
  <div class="card-content">
    <h2 class="card-title">Secondary Dashed</h2>
    <p>Dashed card with secondary color border.</p>
  </div>
</div>
```

## Cartes avec images

Combinez des cartes avec des figures pour un contenu comprenant des éléments visuels.

### Image en haut

```html
<div class="card card-md w-88 shadow-sm">
  <figure>
    <img src="https://cdn.frutjam.com/images/photo-2.jpg?format=webp&width=600&height=400" alt="Blog Post" loading="lazy" />
  </figure>
  <div class="card-content">
    <h2 class="card-title">Blog Post Card</h2>
    <p>Display articles with featured images, titles, and summaries for content discovery.</p>
  </div>
</div>
```

### Image en bas

```html
<div class="card card-md w-88 shadow-sm">
  <div class="card-content">
    <h2 class="card-title">Image Below Content</h2>
    <p>Place images after content for reverse visual hierarchy.</p>
  </div>
  <figure>
    <img src="https://cdn.frutjam.com/images/photo-3.jpg?format=webp&width=600&height=400" alt="Footer Image" loading="lazy" />
  </figure>
</div>
```

## Carte de prix

Présentez les niveaux de tarification avec des fonctionnalités et des boutons d'appel à l'action.

```html
<div class="card card-lg card-outline">
  <div class="card-content gap-4">
    <div>
      <h2 class="card-title">Startup Plan</h2>
      <div class="flex items-baseline gap-2">
        <span class="text-3xl font-bold">$49</span>
        <span class="text-sm text-on-base/60">/month</span>
      </div>
    </div>
    <div class="divider my-0"></div>
    <ul class="flex flex-col gap-3">
      <li class="flex items-center gap-2">
        <span class="badge badge-success badge-sm">✓</span>
        <span>25 websites</span>
      </li>
      <li class="flex items-center gap-2">
        <span class="badge badge-success badge-sm">✓</span>
        <span>150 templates</span>
      </li>
      <li class="flex items-center gap-2">
        <span class="badge badge-success badge-sm">✓</span>
        <span>Advanced eCommerce</span>
      </li>
      <li class="flex items-center gap-2">
        <span class="badge badge-error badge-sm opacity-50">✗</span>
        <span class="opacity-50">Unlimited storage</span>
      </li>
    </ul>
    <button class="btn btn-primary w-full">Get Started</button>
  </div>
</div>
```

## Disposition de carte réactive

Créez des mises en page de cartes flexibles qui s'adaptent à différentes tailles d'écran.

```html
<div class="card card-lg w-160 shadow-sm">
  <div class="grid grid-cols-12 gap-0">
    <div class="col-span-12 lg:col-span-5">
      <figure class="h-64">
        <picture>
          <source media="(max-width: 1024px)" srcset="https://cdn.frutjam.com/images/photo-4.jpg?format=webp&width=640&height=427">
          <img src="https://cdn.frutjam.com/images/photo-4.jpg?format=webp&width=600&height=400" alt="Layout Image" class="w-full h-full object-cover" loading="lazy" />
        </picture>
      </figure>
    </div>
    <div class="col-span-12 lg:col-span-7">
      <div class="card-content">
        <h2 class="card-title">Responsive Layout</h2>
        <p>On desktop, image and content display side by side. On mobile, they stack vertically for optimal viewing experience.</p>
      </div>
    </div>
  </div>
</div>
```

## Variantes combinées

Mélangez et associez les variantes de taille, de couleur et de style pour des conceptions de cartes personnalisées.

```html
<div class="card card-lg card-primary card-outline">
  <div class="card-content">
    <h2 class="card-title">Large Primary Outline</h2>
    <p>Combination of large size, primary color, and outline style.</p>
  </div>
</div>

<div class="card card-sm card-dashed card-secondary">
  <div class="card-content">
    <h2 class="card-title">Small Secondary Dashed</h2>
    <p>Compact card with dashed border in secondary color.</p>
  </div>
</div>

<div class="card card-xl card-accent">
  <div class="card-content">
    <h2 class="card-title">Extra Large Accent</h2>
    <p>Prominent card with accent color for feature display.</p>
  </div>
</div>
```