Nessy Layout System
Ein Raster.
Vier Inhaltsbreiten.
Inhalte bleiben sauber ausgerichtet und können genau dort ausbrechen, wo die Gestaltung mehr Raum braucht.
Die verfügbaren Größen
Dieselbe Mittelachse, unterschiedlich viel Raum
Jede Box unten ist ein eigener <Section />-Baustein. Auf kleinen Bildschirmen kollabieren die zusätzlichen Spuren automatisch.
size="content"
Content
Für Fließtext und andere Inhalte, die eine angenehme Lesebreite brauchen.
size="popout"
Popout
Etwas mehr Raum für Zitate, Bilder oder hervorgehobene Informationen.
size="feature"
Feature
Eine großzügige Bühne für Karten, Galerien und wichtige Inhaltsblöcke.
size="full"
Full
Ideal für farbige Flächen, während Inhalt auf Content-Spur bleibt.
size="full" w/ child size="feature"
title
description
Breite Karte, lesbarer Text.
Feature-Inhalt ohne Sonder-Margins
Die Karte sitzt in der Feature-Spur, während Textabschnitte darüber weiterhin an der schmaleren Content-Spur ausgerichtet sind. Beide teilen dieselbe zentrale Rasterlogik.
<ContentLayout>
<Section size="content">…</Section>
<Section size="feature">…</Section>
</ContentLayout>