Redaktion

Titelseiten, Listenartikel und Testberichte, gesetzt zum Lesen.

3 Components · 15 Variants

Kategorie wechseln

Auf dieser Seite

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

Listenartikel5
Titelseite5
Testbericht5

listicle

Listenartikel

Listen, die der Artikel sind. Große Ziffern mit wechselnden Bildern, eine Rangliste mit Wertung und Bewegung, eine dichte Liste mit Sprungleiste, ein Karussell zum Wischen und Orte auf einer gezeichneten Karte.

Nummeriert
Rangliste
Kompakt mit Sprungleiste
Karussell
Mit Karte

Props und Details

Nummeriert

Große Ziffern, das Bild wechselt die Seite und gleitet beim Scrollen, Fakten und ein Tipp unter jedem Punkt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/listicle

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

Usage

<Listicle variant="numbered" items={[{ title, text, meta, tip, media }]} />

Source

Rangliste

Plätze mit einem Wertungsbalken, der sich beim Hereinscrollen füllt, und der Bewegung seit der letzten Ausgabe.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/listicle

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

Usage

<Listicle variant="ranked" scale={10} items={[{ title, text, score, previous, media }]} />

Source

Kompakt mit Sprungleiste

Eine dichte Liste für viele Punkte. Die nummerierte Leiste bleibt stehen, springt und zeigt, wie weit du gelesen hast.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/listicle

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

Usage

<Listicle variant="compact" items={[{ title, text, meta }]} />

Source

Karussell

Ein Punkt nach dem anderen zum Wischen, Ziehen oder mit Pfeilen und Tasten. Zähler und Punkte folgen der Position.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/listicle

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

Usage

<Listicle variant="carousel" items={[{ title, text, meta, media }]} />

Source

Mit Karte

Die Orte der Liste auf einer gezeichneten Karte mit dem Weg dazwischen. Die gerade gelesene Station leuchtet auf beiden auf, ein Pin springt zu seinem Eintrag.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/listicle

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

Usage

<Listicle variant="with-map" map={<DistrictMap />} items={[{ title, text, tip, pin: { x, y } }]} />

Source

magazine-front

Titelseite

Die Titelseite eines Magazins oder einer Nachrichtenseite, sortiert wie von einer Redaktion. Aufmacher, Ressorts mit mitlaufender Leiste, eine Printausgabe mit Inhalt, ein Morgenüberblick zum Abhaken und das Meistgelesene nach Zeitraum.

Aufmacher
Ressorts
Printausgabe
Morgenüberblick
Meistgelesen

Props und Details

Aufmacher

Ein Aufmacher mit großem Bild, das beim Scrollen gleitet, drei Nebengeschichten und eine Reihe kurzer.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/magazine-front

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

Usage

<MagazineFront variant="cover-story" stories={[{ section, title, dek, author, date, readingTime, href, media }]} />

Source

Ressorts

Die Titelseite nach Ressorts. Die Ressortleiste bleibt stehen, ihre Linie gleitet zum Ressort, das gerade gelesen wird, der Aufmacher wechselt von Ressort zu Ressort die Seite.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/magazine-front

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

Usage

<MagazineFront variant="sections" sections={[{ name, href, stories: [{ title, dek, media }] }]} />

Source

Printausgabe

Das Cover mit Titelschriftzug und Titelzeilen neben dem Inhaltsverzeichnis. Eine Geschichte im Inhalt lässt ihre Zeile auf dem Cover aufleuchten.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/magazine-front

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

Usage

<MagazineFront variant="issue" masthead="…" issue="No. 42" cover={…} stories={[{ page, section, title, dek, onCover }]} />

Source

Morgenüberblick

Eine Handvoll Geschichten zum Abhaken, ein Ring zählt das Gelesene. Jede Geschichte öffnet ein kurzes Warum es zählt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/magazine-front

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

Usage

<MagazineFront variant="digest" masthead="…" date="…" stories={[{ section, title, dek, why, readingTime }]} />

Source

Testbericht

Testberichte, mit denen man entscheiden kann. Das Urteil mit Wertungsring und Pro und Contra, die Wertung mit eigener Gewichtung, das Datenblatt versprochen gegen gemessen, die Sieger eines Vergleichs und der Dauertest als Tagebuch.

Urteil
Wertung mit Gewichtung
Datenblatt
Vergleichssieger
Dauertest

Props und Details

Urteil

Das Ergebnis zuerst. Ein Ring füllt sich bis zur Wertung, das Urteil in einem Satz, Pro und Contra, wer es kaufen sollte und wer nicht.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/review-article

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

Usage

<ReviewArticle variant="verdict" product={{ name, score, price, media }} verdict="…" pros={[…]} cons={[…]} goodFor="…" skipIf="…" />

Source

Wertung mit Gewichtung

Die Wertung je Kriterium, Balken füllen sich beim Hereinscrollen. Lesende verschieben die Gewichte nach eigenen Prioritäten, der Ring folgt, ein Druck führt zurück.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/review-article

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

Usage

<ReviewArticle variant="scores" criteria={[{ label, score, weight, note }]} product={{ name }} />

Source

Datenblatt

Was der Hersteller verspricht neben dem, was wir gemessen haben, jeder Wert als besser, darunter oder wie versprochen markiert. Ein Schalter zeigt nur die Abweichungen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/review-article

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

Usage

<ReviewArticle variant="specs" specs={[{ group, label, claimed, measured, verdict }]} />

Source

Vergleichssieger

Die Sieger eines Vergleichstests als Karten, jede mit Auszeichnung, Wertung, zwei Fakten und Preis. Der Testsieger trägt ein umlaufendes Licht.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/review-article

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

Usage

<ReviewArticle variant="roundup" products={[{ name, award, score, price, reason, facts, media }]} action={{ label }} />

Source

Dauertest

Der Dauertest als Tagebuch. Eine Linie zeichnet die Wertung über die Monate, sobald sie hereinscrollt, jeder Eintrag mit Strecke, Wertung und Erlebtem.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/review-article

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

Usage

<ReviewArticle variant="test-log" log={[{ when, mileage, score, title, text }]} />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Redaktion stehen.

Auf dieser Seite

Nummeriert

Rangliste

Kompakt mit Sprungleiste

Karussell

Mit Karte

Aufmacher

Ressorts

Printausgabe

Morgenüberblick

Meistgelesen

Urteil

Wertung mit Gewichtung

Datenblatt

Vergleichssieger

Dauertest

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit