UtilitairesGratuit

Adaptive Card

Carte image + texte qui passe d'une pile verticale à une rangée dès que son conteneur atteint 280 px, sans media query ni JavaScript.

CSS@containerLayout

Mis à jour le 8 novembre 2026

Carte Adaptive

Le layout passe de colonne à rangée selon la largeur du conteneur.

@container CSS

Survolez ou cliquez la scène pour interagir

Cet effet est gratuit — la catégorie Utilitaires en contient 43 au total, dont 3 gratuits. Effect.Labs regroupe 840 effets vanilla. Découvrir la catégorie →

Voir dans le catalogue Compte gratuit : aperçu en direct + 1 effet offert

Exemples d'usage

À la une cette semaine

Lisbonne, 5 nuits

Vol et hôtel dans l'Alfama, petit-déjeuner compris.

Dès 640 €Mai

Fjords en train, 7 nuits

Bergen, Flåm et la ligne de montagne en voiture panoramique.

Dès 1 190 €Juin

① Agence de voyages Valtrécy — la même carte séjour dans la vitrine et dans « Déjà consultés »

QuandLa page de résultats affiche deux séjours à la une dans la colonne principale, et un séjour récemment vu dans une étroite colonne de droite. Aucune action : chaque carte prend la forme qui convient à sa place.

PourquoiUn seul composant à maintenir pour deux emplacements. La colonne de 168 px garde l'image en haut, la colonne principale met l'image à gauche pour faire tenir deux séjours sans défilement.

RéglagesTrois racines .fx-0745-root avec titres, textes et étiquettes remplacés ; dégradés différents posés en style="background-image:…" sur .adc-img. Colonne latérale de 168 px dans la grille de la scène.

Bloc carte

TitreAtelier d'automne

Imageforet.jpg

ColonneRedimensionnable

Faites glisser la poignée : sous 280 px, la carte empile l'image au-dessus du texte.

Aperçu — page Brindolis

Atelier d'automne

Deux jours de vannerie en forêt.

12 placesOctobre

Largeur de la colonne

② Éditeur de site Brindolis — aperçu d'une carte dans une colonne qu'on élargit à la poignée

QuandDans l'aperçu, on fait glisser la poignée (souris, doigt, ou flèches du clavier une fois la poignée sélectionnée) : sous 280 px la carte empile l'image et le texte, au-delà elle passe en rangée. Au chargement, la colonne fait un aller-retour pour montrer la bascule.

PourquoiL'auteur voit tout de suite comment son bloc se comportera dans une colonne étroite ou large, sans changer la taille de la fenêtre.

RéglagesLa poignée modifie seulement la largeur du parent de la racine (160 à 300 px), câblée dans <script data-scenes>. Le code de la carte n'est pas modifié.

1. Le col à l'aube
2. Refuge et soupe
3. La descente
4. Le matériel

Trois jours sur le sentier d'altitude

Randonnée · 9 min de lecture

Nous avons quitté le village avant le lever du jour, frontale allumée, le col encore caché dans les nuages.

À midi, le sentier devient pierrier et les premières marmottes sifflent.

③ Blog « Le carnet de Ferouze » — la carte « À lire ensuite » se replie quand on ouvre le sommaire

QuandLe lecteur clique sur « Sommaire » : un tiroir s'ouvre à gauche, l'article se décale et la colonne latérale passe de 292 à 176 px. La carte de l'article suivant repasse alors en pile.

PourquoiLa recommandation reste lisible quelle que soit la place laissée par la navigation, sans règle spéciale pour l'état « sommaire ouvert ».

RéglagesLe bouton (vrai <button> avec aria-expanded) change les colonnes de la grille de la scène ; la carte réagit seule via sa requête de conteneur.

Comment ça marche

La racine .fx-0745-root déclare container: adc-card / inline-size : c'est elle que le navigateur mesure, pas la fenêtre. Elle prend width: 100% de son parent, avec un fond #0a0a0f et des coins de 14 px. À l'intérieur, .adc-card est une boîte flex en colonne : l'image .adc-img (80 px de haut, dégradé violet → rose) occupe toute la largeur, puis viennent le titre, le paragraphe et les étiquettes .adc-tag.

Une seule règle @container adc-card (min-width: 280px) fait le travail : la carte passe en flex-direction: row, alignée au centre, et l'image devient un carré de 100 × 100 px à gauche du texte. Sous 280 px, on revient à la pile. Comme la règle interroge la carte elle-même, la même carte peut être en rangée dans une colonne large et en pile dans une barre latérale, sur la même page, au même instant.

Le passage d'une forme à l'autre est accompagné d'une transition all 0.3s ease sur la carte et l'image (l'image glisse vers sa taille carrée). Aucun script : le code complet tient dans le HTML et le CSS fournis.

Accessibilité

Rien à manipuler : la carte est un contenu statique, sans élément focusable. Si vous la rendez cliquable, entourez le titre d'un vrai lien <a> plutôt que la boîte entière.
Ordre de lecture stable : seul l'affichage change entre pile et rangée ; l'ordre du HTML (image, titre, texte, étiquettes) reste celui que lit un lecteur d'écran.
Image décorative : .adc-img est une div à fond dégradé, ignorée par les technologies d'assistance. Si votre visuel porte une information, placez-y un <img alt="…">.
Mouvement réduit : sous prefers-reduced-motion: reduce, les transitions de la carte et de l'image sont coupées ; le changement de disposition se fait d'un coup.
Zoom : en zoomant la page, le conteneur mesure moins de pixels CSS et la carte peut repasser en pile, ce qui garde le texte lisible.

Compatibilité navigateur

Repose sur les requêtes de conteneur (container-type, @container). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : bascule à 280 px identique, aucun débordement à 390 px, deux copies indépendantes sur la même page.

Chrome 105+✓ Complet (mesuré)

Firefox 110+✓ Complet (mesuré)

Safari 16+✓ Complet (mesuré sous WebKit)

Edge 105+✓ Complet

Mobile iOS 16+✓ Complet

Android Chrome 105+✓ Complet

Un navigateur plus ancien ignore la règle @container : la carte reste en pile verticale, lisible à toutes les largeurs.

Le code

Copiez les deux blocs (HTML et CSS) dans votre page. Aucun JavaScript, aucune dépendance.

HTML

<div class="fx-0745-root">
  <div class="adc-card">
    <div class="adc-img"></div>
    <div class="adc-body">
      <h4>Carte Adaptive</h4>
      <p>Le layout passe de colonne à rangée selon la largeur du conteneur.</p>
      <div class="adc-tags">
        <span class="adc-tag">@container</span>
        <span class="adc-tag">CSS</span>
      </div>
    </div>
  </div>
</div>

CSS

.fx-0745-root,
.fx-0745-root *,
.fx-0745-root *::before,
.fx-0745-root *::after {
  box-sizing: border-box
}

.fx-0745-root {
  container: adc-card / inline-size;
  display: block;
  width: 100%;
  background: #0a0a0f;
  border-radius: 14px;
  color: #fff;
  font-family: sans-serif;
}

.fx-0745-root .adc-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  transition: all 0.3s ease;
}

.fx-0745-root .adc-img {
  width: 100%;
  height: 80px;
  border-radius: 10px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.fx-0745-root .adc-body {
  min-width: 0;
}

.fx-0745-root .adc-body h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}

.fx-0745-root .adc-body p {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 8px;
  line-height: 1.5;
}

.fx-0745-root .adc-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.fx-0745-root .adc-tag {
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(139, 92, 246, 0.15);
  font-size: 0.6rem;
  font-weight: 600;
  color: #a78bfa;
}

@container adc-card (min-width: 280px) {
  .fx-0745-root .adc-card {
    flex-direction: row;
    align-items: center;
  }
  .fx-0745-root .adc-img {
    width: 100px;
    height: 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx-0745-root .adc-card,
  .fx-0745-root .adc-img {
    transition: none;
  }
}

JavaScript

CSS pur — aucun JavaScript requis.

Personnaliser

Options passées à l'API ou attributs data-* :

Option / propriété	Défaut	Effet
Palier de bascule (CSS — `@container adc-card (min-width: 280px)`)	280 px	Montez à 340 px si votre texte est long, descendez à 240 px pour une rangée plus tôt. Une seconde règle (ex. `min-width: 480px`) peut agrandir l'image dans les grandes colonnes.
Visuel (CSS ou HTML — `.adc-img`)	Dégradé `#8b5cf6` → `#ec4899`	Posez votre photo avec `style="background-image:url(…)"` ; `background-size: cover` est déjà prévu. Pour une image informative, mettez un `<img>` dans la div.
Taille de l'image en rangée (CSS — `width`/`height` dans la règle @container)	100 × 100 px	120 × 120 px pour une vignette plus présente, 72 × 72 px pour une liste dense.
Hauteur de l'image en pile (CSS — `.adc-img { height }`)	80 px	Passez à 140 px pour une carte plus « photo » dans les colonnes étroites.
Fond et coins (CSS — `.fx-0745-root` et `.adc-card`)	`#0a0a0f`, carte `rgba(255,255,255,.04)`, rayon 14 px	Pour un thème clair : fond blanc sur la racine, texte sombre sur `h4` et `p`.
Étiquettes (HTML — `.adc-tag`)	2 étiquettes	Ajoutez ou supprimez des `<span class="adc-tag">` ; la rangée passe à la ligne toute seule.
Durée de transition (CSS — `transition: all 0.3s`)	0,3 s	`none` pour une bascule sèche ; la règle de mouvement réduit le fait déjà pour qui le demande.

FAQ

Ma carte reste écrasée ou toute petite dans une rangée flex : pourquoi ?

Un conteneur inline-size ne tire pas sa largeur de son contenu. La racine a width: 100%, ce qui suffit dans un bloc ou une grille en 1fr ; dans une rangée flex, donnez-lui flex: 1 ou une largeur explicite.

Quelle différence avec une media query ?

Une media query regarde la fenêtre : toutes les cartes changeraient en même temps. Ici chaque carte regarde la place qu'elle a réellement, donc une carte de barre latérale reste en pile pendant que celle du contenu principal est en rangée.

Puis-je mettre plusieurs cartes côte à côte ?

Oui : chaque .fx-0745-root est son propre conteneur. Dans grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)), chaque carte choisit sa forme selon la largeur de sa case.

Fondamentaux

Design & Visuels

Animations & Scroll

Galerie & Plus

Adaptive Card

Carte Adaptive

Exemples d'usage

Lisbonne, 5 nuits

Fjords en train, 7 nuits

① Agence de voyages Valtrécy — la même carte séjour dans la vitrine et dans « Déjà consultés »

Bloc carte

Atelier d'automne

② Éditeur de site Brindolis — aperçu d'une carte dans une colonne qu'on élargit à la poignée

Trois jours sur le sentier d'altitude

③ Blog « Le carnet de Ferouze » — la carte « À lire ensuite » se replie quand on ouvre le sommaire

Comment ça marche

Accessibilité

Compatibilité navigateur

Le code

Personnaliser

FAQ

Ma carte reste écrasée ou toute petite dans une rangée flex : pourquoi ?

Quelle différence avec une media query ?

Puis-je mettre plusieurs cartes côte à côte ?

Fondamentaux

Design & Visuels

Animations & Scroll

Galerie & Plus

Adaptive Card

Carte Adaptive

Exemples d'usage

Lisbonne, 5 nuits

Fjords en train, 7 nuits

① Agence de voyages Valtrécy — la même carte séjour dans la vitrine et dans « Déjà consultés »

Bloc carte

Atelier d'automne

② Éditeur de site Brindolis — aperçu d'une carte dans une colonne qu'on élargit à la poignée

Trois jours sur le sentier d'altitude

③ Blog « Le carnet de Ferouze » — la carte « À lire ensuite » se replie quand on ouvre le sommaire

Comment ça marche

Accessibilité

Compatibilité navigateur

Le code

Personnaliser

FAQ

Ma carte reste écrasée ou toute petite dans une rangée flex : pourquoi ?

Quelle différence avec une media query ?

Puis-je mettre plusieurs cartes côte à côte ?

Effets liés — Utilitaires