GSSpaceContent — Layout
La zone de contenu principale : fond surface (Cloud/50) + carte blanche arrondie. Cette page sert aussi de playground pour comprendre comment le contenu s'adapte à la largeur, quand limiter la largeur de lecture, et comment se structure le spacing.
Playground — largeur de contenu
Choisis un scénario, tire la poignée en bas à droite du cadre (ou utilise un preset), et observe le reflow via container queries — selon la largeur du conteneur, pas de la fenêtre. En pleine largeur, clique Agrandir pour sortir de la colonne de doc.
Réputation
Note moyenne
Avis collectés
Taux de réponse
Score e-réputation
Derniers avis
Accueil impeccable, chambre spacieuse et très propre. Le petit-déjeuner était varié et copieux. Je recommande sans hésiter !
Très bon séjour dans l’ensemble. Personnel disponible. Seul bémol : le wifi un peu lent dans les étages.
Personnel aux petits soins, emplacement idéal en centre-ville. On reviendra avec plaisir.
Correct sans plus. Le rapport qualité-prix reste moyen pour la prestation proposée.
Sidebar : <512px drawer plein écran via le burger () · 512–768px rail forcé · ≥768px pli/dépli manuel via le bouton dans l'en-tête de la sidebar (icône ). Header et contenu bornés à max-w-[1280px] et centrés sur le même axe (gouttière + bordure pleine largeur). Article : volet « Sur cette page » dès que le conteneur est large. Formulaire : centré au-delà de sa largeur max.
Bandeau système — slot #banner
Un message qui concerne toute la page (récupération de compte, incident, quota) vit dans le slot #banner : pleine largeur de la carte (full-bleed — sans le cap 1280px ni le padding du body), au-dessus du header. Le body défile dessous, le bandeau et le header restent en tête. On y place typiquement un GSBanner.
Avis
Avis #1
Contenu de la liste — défile sous le header resté en tête.
Avis #2
Contenu de la liste — défile sous le header resté en tête.
Avis #3
Contenu de la liste — défile sous le header resté en tête.
Avis #4
Contenu de la liste — défile sous le header resté en tête.
Avis #5
Contenu de la liste — défile sous le header resté en tête.
Séparation header / contenu — ombre au scroll
La tête fixe (#header) n'est plus soulignée d'un trait. En haut de page, aucune séparation : header et contenu se fondent. Dès le premier pixel scrollé, GSSpaceContent révèle une ombre portée vers le bas sous la tête — le header passe au premier plan, le contenu défile en arrière-plan. Scrollez la carte ci-dessous pour voir l'ombre apparaître, puis disparaître au retour en haut.
Avis
Avis #1
Le contenu défile sous la tête fixe — l'ombre matérialise la limite.
Avis #2
Le contenu défile sous la tête fixe — l'ombre matérialise la limite.
Avis #3
Le contenu défile sous la tête fixe — l'ombre matérialise la limite.
Avis #4
Le contenu défile sous la tête fixe — l'ombre matérialise la limite.
Avis #5
Le contenu défile sous la tête fixe — l'ombre matérialise la limite.
Avis #6
Le contenu défile sous la tête fixe — l'ombre matérialise la limite.
Avis #7
Le contenu défile sous la tête fixe — l'ombre matérialise la limite.
Avis #8
Le contenu défile sous la tête fixe — l'ombre matérialise la limite.
Texte & largeur de lecture (max-width)
Active/désactive la contrainte pour voir l'effet sur un grand écran. La règle : on borne les longs paragraphes à max-w-prose (~65ch), jamais la pleine largeur.
Guest Suite collecte, analyse et diffuse les avis de vos clients pour piloter votre e-réputation. Sur les grands écrans, une ligne de texte trop large fatigue l'œil : le lecteur perd le fil entre la fin d'une ligne et le début de la suivante. On limite donc la largeur de lecture des longs paragraphes à environ 65–75 caractères pour garder un confort de lecture optimal.
Do — largeur de lecture limitéeDissection du spacing
La même carte que dans le playground, dévoilée. Toutes les valeurs sont des multiples de l'unité de base 4px (échelle de spacing).
p-6 · token --space-6gap-4 · token --space-4Échelle : 4 · 8 · 12 · 16 · 24 · 32 · 48 px. On ne crée jamais de valeur hors échelle (pas de 13px, 7px…).
Do / Don't — Layout
Le contenu vit dans un GSSpaceContent : fond surface + carte blanche, padding cohérent.
Bloc 1
Bloc 2
Contenu collé aux bords, sans surface ni respiration : pas de hiérarchie, pas de structure.