Kategorien und Kollektionen

Der Weg in ein Sortiment als Kacheln, Karten und Linkspalten, dazu der Kopf einer Kollektionsseite mit Filtern, Sortierung und Ansicht.

2 Components · 10 Variants

Kategorie wechseln

Kategorien

Der Weg in einen Katalog. Shop-Abteilungen, Blog-Themen, Leistungsbereiche oder ein Verzeichnis, als Icon-Kacheln, Bildkarten, runde Vorschaubilder, Linkspalten oder große Namen auf einem Foto.

Icon-Raster
Bildkarten
Kreise
Linkspalten
Vollflächiges Bild

Props und Details

Icon-Raster

Acht Abteilungen in einem Haarlinien-Raster mit Anzahl und Markierung. Ein Licht folgt dem Zeiger, das Icon nimmt beim Hover den Akzent an, die Kacheln füllen sich beim Scrollen nacheinander.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/categories

Bringt mit utils, kit, icon, reveal, motion, section

Usage

<Categories variant="icon-grid" title="…" items={[{ name, href, icon, count, tag }]} action={{ label, href }} />

Source

Bildkarten

Vier Bildkarten mit Name und Anzahl. Das Foto treibt beim Scrollen in seinem Rahmen und zoomt beim Hover. Unter Desktop eine Wischreihe mit Pfeilen, Ziehen und Fortschrittslinie.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/categories

Bringt mit utils, kit, icon, reveal, motion, section

Usage

<Categories variant="image-cards" title="…" items={[{ name, href, count, description, image: <img … /> }]} />

Source

Kreise

Runde Vorschaubilder in einer Reihe, die mit Pfeilen, Ziehen und Wischen scrollt, darunter eine Fortschrittslinie. Beim Hover wächst ein Ring heran, die Kreise erscheinen nacheinander.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/categories

Bringt mit utils, kit, icon, reveal, motion, section

Usage

<Categories variant="circles" title="…" items={[{ name, href, count, image: <img … /> }]} />

Source

Linkspalten

Abteilungen mit ihren Unterkategorien in vier Spalten, vor dem Link unter dem Zeiger schiebt sich eine Linie herein. Auf dem Telefon ein Akkordeon mit weicher Höhe, die erste Abteilung offen.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/categories

Bringt mit utils, kit, icon, reveal, motion, section

Usage

<Categories variant="link-columns" title="…" items={[{ name, href, icon, count, links: [{ label, href }] }]} />

Source

Vollflächiges Bild

Große Namen über einem Foto. Zeigt der Zeiger auf eine Zeile, blendet das Foto zu dieser Kategorie über und eine Karte zeigt ihre Beschreibung. Auf dem Telefon wählt die Zeile in der Bildschirmmitte beim Scrollen das Foto.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/categories

Bringt mit utils, kit, icon, reveal, motion, section

Usage

<Categories variant="full-background" title="…" items={[{ name, href, count, description, image: <img … /> }]} />

Source

collection-header

Kollektionskopf

Der Kopf einer Kollektions- oder Kategorieseite. Ein Titel auf einem Foto, Text mit Weiterlesen und Unterkategorien, Tabs mit klebender Leiste für Sortierung und Ansicht, eine Kollektion als Magazingeschichte und die Seite einer Manufaktur.

Fotobanner
Text und Foto
Tabs und klebende Leiste
Kollektion als Geschichte
Manufakturseite

Props und Details

Fotobanner

Der Titel auf einem breiten Foto, das beim Scrollen treibt, mit einer Schattierung von unten, die ihn in beiden Modi lesbar hält. Brotkrumen darüber, Anzahl und Link auf dem Foto, darunter Unterkategorie-Chips, die nacheinander aufsteigen und auf dem Telefon scrollen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/collection-header

Bringt mit utils, kit, button, icon, reveal, motion, section, breadcrumbs, select, product-image

Usage

<CollectionHeader variant="banner" title="…" description="…" crumbs={crumbs} count={48} image={<img … />} links={[{ label, href, count }]} />

Source

Text und Foto

Titel, Anzahl und ein kurzer Text neben einem Foto. „Weiterlesen“ öffnet den langen Text mit weicher Höhe, gemacht für Menschen wie für Suchmaschinen, darunter steigen Unterkategorien mit Vorschaubild auf und heben sich beim Hover.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/collection-header

Bringt mit utils, kit, button, icon, reveal, motion, section, breadcrumbs, select, product-image

Usage

<CollectionHeader variant="split" title="…" description="…" more="…" count={36} image={<img … />} links={[{ label, href, count, image }]} />

Source

Tabs und klebende Leiste

Unterkategorien als Tabs mit gleitender Unterstreichung und einem Titel, der dem Tab folgt. Darunter klebt eine Leiste mit Anzahl, Filtern, Sortierung und Raster- oder Listenschalter oben, während die Produkte scrollen, und bekommt dann einen weichen Schatten.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/collection-header

Bringt mit utils, kit, button, icon, reveal, motion, section, breadcrumbs, select, product-image

Usage

<CollectionHeader variant="toolbar" title="…" count={48} links={[{ label, href, count }]} sorts={[{ value, label }]} onSort={…} onView={…} onFilters={…} />

Source

Kollektion als Geschichte

Eine Kollektion wie im Magazin erzählt. Ein sehr großer Titel, Einleitung und Link, ein breites Foto, das beim Hereinscrollen wächst und treibt, darunter Fakten in einem Haarlinienraster, die nacheinander aufsteigen, und ein Zitat der Macherin.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/collection-header

Bringt mit utils, kit, button, icon, reveal, motion, section, breadcrumbs, select, product-image

Usage

<CollectionHeader variant="editorial" title="…" description="…" image={<img … />} facts={[{ value, label }]} quote={{ text, author, role, avatar }} />

Source

Manufakturseite

Die Seite einer Marke oder Manufaktur auf einem Marktplatz. Ein Titelbild, das treibt, das Zeichen darüber, Name mit Verifiziert-Abzeichen, Ort und Jahr, Folgen mit steigender Zahl und die Zahlen zu Produkten, Folgenden und Bewertung.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/collection-header

Bringt mit utils, kit, button, icon, reveal, motion, section, breadcrumbs, select, product-image

Usage

<CollectionHeader variant="brand" brand={{ name, place, since, mark, followers, rating, verified }} count={48} description="…" image={<img … />} />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Kategorien und Kollektionen stehen.

Icon-Raster

Bildkarten

Kreise

Linkspalten

Vollflächiges Bild

Fotobanner

Text und Foto

Tabs und klebende Leiste

Kollektion als Geschichte

Manufakturseite

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit