Autoren und Interviews

Autorenseiten, Mitwirkende, Expertenboxen und Bylines, dazu Interviews als klassisches Frage und Antwort, Porträt und Gesprächsrunde.

2 Components · 10 Variants

Kategorie wechseln

author-page

Autorenseite

Die Menschen, die schreiben. Ein Autorenprofil mit Artikeln, das Verzeichnis aller Autorinnen, das Impressum einer Redaktion, eine Box mit Autor, Prüferin und Prüfungen und eine Zeile für mehrere Autoren.

Profil
Autorinnen und Autoren
Impressum der Redaktion
Expertenbox
Autorenzeile

Props und Details

Profil

Porträt, Bio, Themen und Zahlen, die hochzählen. Die Artikel filtern sich nach Thema mit gleitendem Umschalter.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/author-page

Bringt mit utils, kit, button, icon, number-ticker, reveal, motion, section

Usage

<AuthorPage variant="profile" author={{ name, role, bio, topics, links, avatar }} stats={[…]} articles={[{ title, topic, date }]} />

Source

Autorinnen und Autoren

Alle, die schreiben, als Karten mit dem neuesten Text. Ein Ressortfilter blendet die anderen ab, statt das Raster zu verschieben.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/author-page

Bringt mit utils, kit, button, icon, number-ticker, reveal, motion, section

Usage

<AuthorPage variant="contributors" title="…" authors={[{ name, role, count, bio, latest, avatar }]} />

Source

Impressum der Redaktion

Das Team gesetzt wie das Impressum eines Magazins, nach Rolle. Ein Name mit Foto zeigt es beim Darüberfahren oder Fokus.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/author-page

Bringt mit utils, kit, button, icon, number-ticker, reveal, motion, section

Usage

<AuthorPage variant="masthead" title="…" groups={[{ role, people: [{ name, note, avatar }] }]} footnote="…" />

Source

Expertenbox

Geschrieben von und geprüft von mit Nachweisen, die Prüfungen in Zahlen und die Arbeitsweise hinter einer weich aufklappenden Zeile.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/author-page

Bringt mit utils, kit, button, icon, number-ticker, reveal, motion, section

Usage

<AuthorPage variant="expert-box" title="…" author={{ name, role, credentials }} reviewer={{ … }} checks={[…]} method="…" />

Source

Autorenzeile

Mehrere Autoren in einer Zeile unter dem Titel. Ein Gesicht oder Name öffnet eine Karte mit Bio, Folgen und Profil.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/author-page

Bringt mit utils, kit, button, icon, number-ticker, reveal, motion, section

Usage

<AuthorPage variant="byline" title="…" date="…" authors={[{ name, role, bio, avatar }]} />

Source

interview

Interview

Interviews, gesetzt, damit man hört, wer spricht. Frage und Antwort mit Initialen am Rand, ein Porträt neben dem Gespräch, eine Runde, in der eine Stimme allein stehen kann, schnelle Fragen als Karten und die stärksten Zitate nacheinander.

Frage und Antwort
Porträt
Gesprächsrunde
Schnelle Fragen
Höhepunkte

Props und Details

Frage und Antwort

Eine Spalte, die Initialen der Sprechenden am Rand, die Frage fett. Ein Satz der Antwort kehrt als Zitat wieder.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/interview

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

Usage

<Interview variant="classic" title="…" host={{ name }} people={[{ name, role, avatar }]} items={[{ q, a: ["…"], pull }]} />

Source

Porträt

Ein großes Porträt, das beim Scrollen gleitet, und die Fakten zur Person bleiben neben dem Gespräch, die Fragen als Zwischentitel.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/interview

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

Usage

<Interview variant="portrait" media={…} facts={[{ label, value }]} people={[{ name, role }]} items={[…]} />

Source

Gesprächsrunde

Mehrere Stimmen, jede mit Gesicht und Namen. Eine Stimme wählen, und die anderen treten zurück, auf dem Telefon liegen die Stimmen in einer Reihe zum Wischen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/interview

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

Usage

<Interview variant="round-table" people={[…]} items={[{ q }, { by: 0, a: ["…"] }]} />

Source

Schnelle Fragen

Kurze Fragen als Karten. Ein Druck macht aus der Karte die Antwort, ein Knopf zeigt alle.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/interview

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

Usage

<Interview variant="quick-fire" title="…" people={[{ name }]} items={[{ q, a: ["…"] }]} />

Source

Höhepunkte

Die stärksten Sätze nacheinander, Wort für Wort. Eine Fortschrittslinie läuft, solange die Section sichtbar ist, Pfeile und Pause bleiben in deiner Hand.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/interview

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

Usage

<Interview variant="highlights" quotes={["…"]} people={[{ name, role, avatar }]} action={{ label, href }} />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Autoren und Interviews stehen.

Profil

Autorinnen und Autoren

Impressum der Redaktion

Expertenbox

Autorenzeile

Frage und Antwort

Porträt

Gesprächsrunde

Schnelle Fragen

Höhepunkte

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit