Empilage vertical avec espacement uniforme — [data-layout~="stack"]
Premier bloc de contenu empilé.
Deuxième bloc avec espacement uniforme entre chaque élément.
Troisième bloc.
<div data-layout="stack">
<p>Premier bloc de contenu empilé.</p>
<p>Deuxième bloc avec espacement uniforme entre chaque élément.</p>
<p>Troisième bloc.</p>
</div>Groupe d’éléments inline avec espacement et retour à la ligne — [data-layout~="cluster"]
<div data-layout="cluster">
<button>Action 1</button>
<button>Action 2</button>
<button data-role="add">Ajouter</button>
<button data-role="delete">Supprimer</button>
</div>Grille responsive automatique sans media queries — [data-layout~="grid"]
<div data-layout="grid">
<div>Cellule 1</div>
<div>Cellule 2</div>
<div>Cellule 3</div>
<div>Cellule 4</div>
<div>Cellule 5</div>
<div>Cellule 6</div>
</div>Bascule entre disposition horizontale et verticale selon la largeur disponible — [data-layout~="switcher"]
Ce bloc s’affiche côte à côte si l’espace est suffisant, sinon en colonne.
Le seuil de bascule est défini par une variable CSS.
<div data-layout="switcher">
<div>
<h3>Colonne A</h3>
<p>Ce bloc s’affiche côte à côte si l’espace est suffisant, sinon en colonne.</p>
</div>
<div>
<h3>Colonne B</h3>
<p>Le seuil de bascule est défini par une variable CSS.</p>
</div>
</div>Conteneur centré avec largeur maximale et marges latérales — [data-layout~="wrapper"]
Ce contenu est centré et contraint à une largeur maximale avec des marges latérales automatiques.
<div data-layout="wrapper">
<p>Ce contenu est centré et contraint à une largeur maximale avec des marges latérales automatiques.</p>
</div>Conteneur de contenu avec variants de largeur — section[data-layout~="content"]
Contenu étroit (max 45ch) pour une lecture optimale.
Contenu standard (max 65ch), largeur par défaut.
Contenu large (max 80ch) pour des tableaux ou du code.
<section data-layout="content" data-size="small">
<p>Contenu étroit (max 45ch) pour une lecture optimale.</p>
</section>
<section data-layout="content" data-size="medium">
<p>Contenu standard (max 65ch), largeur par défaut.</p>
</section>
<section data-layout="content" data-size="large">
<p>Contenu large (max 80ch) pour des tableaux ou du code.</p>
</section>