Composants
Les composants structurels de Site 2026 — page, header, conteneurs, cartes, footer et icônes — construits exclusivement avec les variables du système. Chaque composant est présenté avec un aperçu réel, ses classes, ses variantes et ses règles techniques.
Page & layout
.page s'applique au <body> ; .page-layout installe une grille trois rangées header / main / footer où 1fr sur main garantit le sticky footer.
{{ codePageLayout }}
Header
.site-header est sticky et isolé (isolation: isolate) ; .header-wrapper porte le style visuel : fond translucide White 20%, bordure XXS Grey 100, rayon card-outer. Sa hauteur suit --layout-header-height : 56px → 72px → 99px.
{{ codeHeader }}
Container
.container centre le contenu à 80rem avec un padding latéral fluide, et active les Container Queries. Les modifiers n'écrasent que max-width et s'utilisent en complément : class="container container--narrow".
{{ codeContainer }}
Card
Le composant central du système : conteneur flex vertical avec media 16/9, body en stack et footer d'actions ancré en bas (margin-block-start: auto). Chaque carte est son propre contexte de Container Query.
.card — défaut
.card--horizontal
Media carré fluide — clamp(thumbnail-md, 40%, thumbnail-xl) — et séparateur du footer qui bascule d'horizontal à vertical. Repli en colonne sous 430px.
.card--featured
Fond Marine Blue 800, media cinémascope 21/9, respiration --spacing-component-lg et titre XL. Déjà sombre : aucune inversion en dark mode.
{{ codeCard }}
Icons
La classe .icon fixe la hauteur à --size-icon-reg (largeur auto), le remplissage à --color-icon-default, et empêche la compression flex.
{{ codeIcon }}
- Phosphor Icons : https://phosphoricons.com/
- Tabler Icons : https://tablericons.com/
- Lucide : https://lucide.dev/
- Flowbite : https://flowbite.com/icons/
- MingCute : https://www.mingcute.com/
Éléments dérivés des tokens
Le stylebook définit des tokens dédiés — rayons de boutons, couleurs de pills, teintes de statut — dont voici l'application de référence. Ces démonstrations sont dérivées des variables ; les classes CSS correspondantes restent à formaliser dans la source.
Boutons
Rayon --border-radius-btn-reg (8px), couleurs --color-primary / --color-primary-hover. Hauteur minimale 44px pour le confort tactile.
Pills & statuts
Tokens dédiés --color-text-pill / --color-text-pill-bg, et paires de statut availability / warning / error.