Zum Inhalt springen
UI Kit
Accent

Layout-Bausteine mit Slots

Layout-Bausteine mit Slots. Bento-Raster, Masonry, geteilte Flächen, Sticky Splits und Trenner zwischen Sections.

5 Components · 20 Variants
Kategorie wechseln

Der Rahmen für deine Sections

Ein Layout-Baustein entscheidet, wo etwas steht, und überlässt dir den Inhalt. Die fünf hier arbeiten mit Slots, du setzt eigene Bilder, Zahlen, Zitate oder Karten ein, und das Raster hält auf jeder Bildschirmgröße seine Form. Jeder hat ein eigenes Handy-Layout, gestaltet für den kleinen Bildschirm.

Das Bento-Raster füllt vier Raster lückenlos, „Große Kachel links“, „Mosaik auf Haarlinien“, „Hohe Mitte“ oder „Zahlen und Bilder“. Das Masonry-Layout stapelt Inhalte jeder Höhe in ausgeglichenen Spalten, in geordneten Reihen mit erhaltener Lesereihenfolge, mit Filter oder mit „Mehr laden“. Die geteilte Fläche teilt den Bildschirm als klebende Hälfte, Umschalter zwischen zwei Angeboten, hell und dunkel oder entweder oder. Der Sticky Split hält links Inhalt fest, während rechts Schritte scrollen, mit Zähler, Checkliste, Kontakt neben Antworten oder wechselnder Jahreszahl. Der Section-Trenner formt die Naht zwischen zwei Sections als Welle, Schräge, Linie mit Label oder Verlauf.

Bento-Raster passen zu Features und About-Seiten mit fünf bis sieben Kacheln unterschiedlichen Gewichts. Masonry trägt Galerien und Zitatwände, geordnete Reihen sind die Wahl, wenn die Reihenfolge zählt. Setz einen Trenner dort, wo zwei Sections die Farbe wechseln, zwischen gleichfarbigen Sections genügt Weißraum.

Auf dieser Seite

Alle Components dieser Kategorie. Wähle eine, um zu ihren Variants zu springen.

bento-grid

Bento-Raster

Ein Bento-Raster als Layout-Baustein mit Slots. Kacheln mit Medien, Zahlen, Icons und Links in vier lückenlosen Rastern.

Props und Details · Bento-Raster

Große Kachel linksNeu in 1.2

Eine große Kachel mit Bildschirm links und vier kleine daneben, eine getönt und eine dunkel.

Mosaik auf HaarlinienNeu in 1.2

Sechs Kacheln auf Haarlinien, eine breit, eine hoch und zwei halb, die Zellen behalten ihre Fläche.

Hohe MitteNeu in 1.2

Eine hohe Bildkachel in der Mitte zwischen zwei Paaren, jede Kachel ein Bild mit Text auf weichem Schatten.

Zahlen und BilderNeu in 1.2

Zahlen, eine Notiz und Bilder gemischt in drei Reihen, für eine Über-uns-Seite oder einen Betrieb in Zahlen.

masonry-layout

Masonry-Layout

Ein Masonry für Bilder, Zitate, Notizen und Kennzahlen jeder Höhe. Ausgeglichene Spalten, geordnete Reihen, Filter oder Mehr laden.

Props und Details · Masonry-Layout

SpaltenNeu in 1.2

Das klassische Masonry in ausgeglichenen Spalten mit gemischten Karten, die beim Scrollen aufsteigen.

Geordnete ReihenNeu in 1.2

Die Lesereihenfolge läuft von links nach rechts, Reihe für Reihe, und jede Karte behält ihre Höhe.

Mit FilterNeu in 1.2

Chips mit Anzahl filtern die Karten nach Thema, der Rest schließt die Lücken und steigt neu auf.

Mehr ladenNeu in 1.2

Eine erste Auswahl mit Fortschritt und ein Knopf für die nächste, der Fokus landet auf der ersten neuen Karte.

section-divider

Section-Trenner

Die Naht zwischen zwei Sections in deren Farben. Wandernde Wellen, Schräge mit Linie, Haarlinie mit Label oder Verlauf.

Props und Details · Section-Trenner

WelleNeu in 1.2

Drei geschichtete Wellen in der Farbe oben, die beim Scrollen gegeneinander wandern.

SchrägeNeu in 1.2

Eine diagonale Kante zwischen zwei Farben mit feiner Akzentlinie, die sich beim Hereinscrollen zeichnet.

Linie mit LabelNeu in 1.2

Eine Haarlinie, die sich von der Mitte um ein Label öffnet, für Kapitel oder ein oder zwischen zwei Blöcken.

VerlaufNeu in 1.2

Eine Farbe geht in die nächste über, während ein weiches Licht beim Scrollen an der Naht entlangläuft.

split-screen

Geteilte Fläche

Eine Fläche in zwei Hälften. Klebendes Bild neben scrollenden Panels, Umschalter zwischen zwei Angeboten, hell und dunkel, entweder oder.

Props und Details · Geteilte Fläche

Klebende HälfteNeu in 1.2

Die Bildhälfte bleibt stehen, während die Texthälfte scrollt, das Bild wechselt mit jedem Panel.

UmschalterNeu in 1.2

Zwei Angebote nebeneinander, das gewählte öffnet sich bei Zeiger oder Fokus, auf dem Telefon ein Umschalter.

Hell und dunkelNeu in 1.2

Eine helle und eine dunkle Hälfte von Rand zu Rand, jede mit eigenem Text, Bild und Aktion.

Entweder oderNeu in 1.2

Zwei Wege als Karten mit einem runden oder dazwischen, der empfohlene im Akzent.

sticky-split

Sticky Split

Links fester Inhalt, rechts scrollende Schritte. Ein Zähler, eine Checkliste, die abhakt, ein Kontakt neben Antworten oder eine wechselnde Jahreszahl.

Props und Details · Sticky Split

Schritte mit ZählerNeu in 1.2

Links ein großer Zähler mit füllender Linie und dem aktuellen Schritt, rechts die Schritte als Karten.

ChecklisteNeu in 1.2

Eine klebende Liste, die jeden gelesenen Schritt abhakt, auf dem Telefon eine Fortschrittsleiste.

Kontakt neben AntwortenNeu in 1.2

Eine Überschrift und eine Kontaktkarte, die stehen bleiben, während eine lange Liste von Antworten vorbeizieht.

Zeitleiste mit JahreszahlNeu in 1.2

Links eine große Jahreszahl, die mit den Ereignissen rechts wechselt, die Linie füllt sich beim Lesen.

Ähnliche Components

Mehr aus Layout, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Layouts stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert