H2 Tous les niveaux de titres
H3 Titre de niveau 3
H4 Titre de niveau 4
H5 Titre de niveau 5
H6 Titre de niveau 6
Paragraphe standard avec du gras, de l’italique et un lien interne. Lorem ipsum dolor sit amet consectetur. Ultrices laoreet enim phasellus non diam fermentum.
Deuxième paragraphe consécutif pour vérifier l’espacement entre blocs libres. Sed est vestibulum velit posuere leo elementum lectus.
H2 Les listes
- Premier élément de liste à puce
- Deuxième élément avec du gras et un lien
- Élément avec sous-liste
- Sous-élément un
- Sous-élément deux
- Première étape numérotée
- Deuxième étape numérotée
- Troisième étape numérotée
H2 Citation seule
Le chocolat est une chose sérieuse, sa mise en page aussi. Cette citation est insérée seule, hors compo, pour vérifier ses marges.
Un client créatif
H2 Détails / accordéon seul
Question dépliable insérée seule
Réponse dans le details, inséré hors compo FAQ pour vérifier marges et rendu.
H2 Le tableau
| Produit | Origine | Cacao | Prix |
|---|---|---|---|
| Tablette noire | Colombie | 72% | 7,50 € |
| Tablette lait | Pérou | 45% | 6,90 € |
| Ligne fusionnée sur quatre colonnes | |||
| Mug chocolat | Équateur | 60% | 12,00 € |
Paragraphe juste après le tableau pour contrôler l’espacement.
H2 Les boutons
H3 après un séparateur
Le titre ci-dessus suit un séparateur hr : la marge doit être généreuse.
H2 Image seule et galerie




H2 Vidéo embarquée
H2 Colonnes texte + image
Texte à gauche
Colonne texte à gauche, image à droite. Lorem ipsum dolor sit amet consectetur. Ultrices laoreet enim phasellus non diam fermentum. Sed est vestibulum velit posuere leo elementum lectus.


Image à gauche (colonnes inversées)
Même compo mais avec la position des colonnes inversée : l’image passe à gauche, le texte à droite. Les paddings doivent suivre.
H2 Colonnes multiples et largeurs custom
Première colonne d’un rang de trois. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Deuxième colonne d’un rang de trois. Blanditiis debitis dolores ea esse impedit libero modi.
Troisième colonne d’un rang de trois. Delectus modi placeat quaerat veniam voluptatibus.
Colonne étroite un tiers.
Colonne large deux tiers. Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Paragraphe libre juste avant une compo groupe : la marge basse doit être large.
H2 dans une compo groupe
Contenu à l’intérieur d’un groupe compo pour vérifier l’articulation compo / blocs libres.
Paragraphe libre juste après la compo groupe : la marge haute doit être large.
H2 Spacer ci-dessous
Dernier paragraphe après le spacer de 100px. Fin de la page de test.
H2 Colonnes : variantes avancées
Chaque rang ci-dessous teste une combinaison différente que le client peut créer.
Carte mixte gauche

Colonne mixte : titre, image puis texte et bouton. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Carte mixte droite

Deuxième colonne mixte avec une liste :
- Point un dans une colonne
- Point deux dans une colonne

Carte produit un
Trois cartes côte à côte : image, titre h4 et description courte.

Carte produit deux
La hauteur des images doit rester cohérente entre colonnes.

Carte produit trois
Troisième carte avec un bouton :



Quatre colonnes, un.
Quatre colonnes, deux.
Quatre colonnes, trois.
Quatre colonnes, quatre.
25%
Colonne centrale 50% avec un tableau :
| Col A | Col B |
|---|---|
| Valeur 1 | Valeur 2 |
25%
Alignement vertical centré
Texte court centré verticalement face à une image haute.

Citation dans une colonne pour tester le rendu hors racine.
Auteur colonne
Détails dans une colonne
Contenu du details placé dans une colonne.
Colonnes imbriquées : cette colonne large contient elle-même deux sous-colonnes.
Sous-colonne A.
Sous-colonne B.
Colonne latérale simple.
