Demo page de contenu

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
  1. Première étape numérotée
  2. Deuxième étape numérotée
  3. 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

ProduitOrigineCacaoPrix
Tablette noireColombie72%7,50 €
Tablette laitPérou45%6,90 €
Ligne fusionnée sur quatre colonnes
Mug chocolatÉquateur60%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 ACol B
Valeur 1Valeur 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.