Tous les composants de mise en page du kit — cartes, conteneurs, séparateurs, listes et objets média — retravaillés de la palette par défaut de Tailwind vers les jetons de cette application. Changez de thème dans la barre de navigation et toute la page suit.
Cartes
Une surface avec un corps, et éventuellement un en‑tête, un pied ou les deux. L’angle, le bord et l’élévation appartiennent au thème : le balisage ne porte aucun arrondi.
Conteneurs
Le cadre horizontal d’une page : jusqu’où le contenu peut s’étendre et quelle marge il garde à chaque palier.
Séparateurs
Un filet en travers de la page, interrompu par une étiquette, un titre, une icône ou une commande.
Conteneurs de liste
Les mêmes trois lignes, tenues de sept manières : nues avec des filets, dans une seule carte, ou en cartes séparées.
- Ligne 1
- Ligne 2
- Ligne 3
- Ligne 1
- Ligne 2
- Ligne 3
- Ligne 1
- Ligne 2
- Ligne 3
- Ligne 1
- Ligne 2
- Ligne 3
- Ligne 1
- Ligne 2
- Ligne 3
- Ligne 1
- Ligne 2
- Ligne 3
- Ligne 1
- Ligne 2
- Ligne 3
Objets média
Une figure à côté d’un texte, alignée en haut, au centre ou en bas, empilée sur mobile, ou imbriquée d’un niveau.
Un objet média
Une figure d’un côté, un titre et un paragraphe de l’autre. La figure garde sa taille ; le texte prend le reste de la ligne.
Un objet média
Une figure d’un côté, un titre et un paragraphe de l’autre. La figure garde sa taille ; le texte prend le reste de la ligne.
Un objet média
Une figure d’un côté, un titre et un paragraphe de l’autre. La figure garde sa taille ; le texte prend le reste de la ligne.
Un objet média
Une figure d’un côté, un titre et un paragraphe de l’autre. La figure garde sa taille ; le texte prend le reste de la ligne.
Un objet média
Une figure d’un côté, un titre et un paragraphe de l’autre. La figure garde sa taille ; le texte prend le reste de la ligne.
Un objet média
Une figure d’un côté, un titre et un paragraphe de l’autre. La figure garde sa taille ; le texte prend le reste de la ligne.
Un objet média
Une figure d’un côté, un titre et un paragraphe de l’autre. La figure garde sa taille ; le texte prend le reste de la ligne.
Un objet média
Une figure d’un côté, un titre et un paragraphe de l’autre. La figure garde sa taille ; le texte prend le reste de la ligne.
Un objet média
Une figure d’un côté, un titre et un paragraphe de l’autre. La figure garde sa taille ; le texte prend le reste de la ligne.
Un objet média
Une figure d’un côté, un titre et un paragraphe de l’autre. La figure garde sa taille ; le texte prend le reste de la ligne.
Coques de page
Pas des variantes d’une même boîte : trois familles qui découpent la page autrement. La coque empilée met la navigation au‑dessus du contenu, la coque à barre latérale la met à côté, et la coque multicolonne ajoute une seconde colonne de contenu qui n’est pas de la navigation. Chacune est schématique ici, comme dans le kit : ce qui est réel, c’est la colonne qui prend la largeur restante.
Empilée
Barre latérale
Multicolonne
Navigation mobile
Le kit ne livre aucun composant de navigation mobile, parce que chaque coque porte la sienne et qu’il n’y en a que trois. Une coque empilée déplie un panneau dans le flux sous la barre : le contenu est poussé vers le bas. Une coque à barre latérale ou multicolonne garde une barre épinglée et ouvre la barre latérale elle‑même en dialogue hors‑champ sur un voile, le bouton de fermeture dans la goulotte à côté du panneau.
Fermé
Ouvert
Fermé
Ouvert
Fermé
Une coque multicolonne reprend la même barre et le même tiroir qu’une coque à barre latérale. Ce qu’elle abandonne, c’est la colonne secondaire : elle est déclarée xl:block, donc sous ce palier elle n’existe pas et la page tient en une seule colonne. Rien ne l’empile sous le contenu principal — si cette colonne compte sur un téléphone, il faut la remettre à la main.