Theme Playground
Aire de jeux pour explorer les thèmes Peels en live. Ouvre le pour basculer.
Titres
H1 — Titre principal
H2 — Section
H3 — Sous-section
H4
H5
H6
Prose
Paragraphe de texte courant. Le gras, l'italique, un lien, du code inline, une abbr, une marque et du petit texte.
Une citation de test avec un peu de texte pour voir le rendu.
- Item liste non ordonnée
- Item deux
- Premier
- Second
body {
font-size: var(--peels-text-base);
color: var(--peels-text-body);
}Ctrl + S pour sauvegarder.
Table
| Colonne A | Colonne B | Colonne C |
|---|---|---|
| Cellule 1 | Cellule 2 | Cellule 3 |
| Cellule 4 | Cellule 5 | Cellule 6 |
| Cellule 7 | Cellule 8 | Cellule 9 |
Boutons
Media
Form
Variations locales
Démonstration de la pyramide de personnalisation — surcharges inline et sous-arbres thématiques.
Surcharge inline — h2 en accent
Le bloc ci-dessus a --peels-headings-color-h2 posé inline. Le h3 titre de section hérite de la couleur accent.
Sous-arbre forest
Ce bloc porte data-color-theme="forest". Les couleurs dérivent du thème forest, le reste (typo, espacement) hérite du parent.
Contexte compact
Ce bloc pose --peels-btn-min-height et --peels-btn-font-scale — les boutons ci-dessous sont compacts sans classe.