Authors and interviews

Author pages, contributor lists, expert boxes and bylines, plus interviews as classic Q and A, portrait and round table.

2 components · 10 variants

Switch category

author-page

Author page

The people who write. An author profile with their articles, the directory of contributors, the masthead of an editorial team, a box with writer, reviewer and checks, and a byline for several authors.

Profile
Contributors
Masthead
Expert box
Byline

Props and details

Profile

Portrait, bio, beats and figures that count up. The articles filter by topic with a gliding switch.

Open in Studio

Installv1.0.0

aiw add @ai-website/author-page

Brings along 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

Contributors

Everyone who writes, as cards with the latest piece. A beat filter dims the others instead of moving the grid.

Open in Studio

Installv1.0.0

aiw add @ai-website/author-page

Brings along utils, kit, button, icon, number-ticker, reveal, motion, section

Usage

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

Source

Masthead

The team set like the masthead of a magazine, by role. A name with a photo shows it on hover or focus.

Open in Studio

Installv1.0.0

aiw add @ai-website/author-page

Brings along utils, kit, button, icon, number-ticker, reveal, motion, section

Usage

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

Source

Expert box

Written by and reviewed by with credentials, the checks in figures and the method behind a softly opening line.

Open in Studio

Installv1.0.0

aiw add @ai-website/author-page

Brings along utils, kit, button, icon, number-ticker, reveal, motion, section

Usage

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

Source

Byline

Several authors in one line under the title. A face or a name opens a card with bio, follow and profile.

Open in Studio

Installv1.0.0

aiw add @ai-website/author-page

Brings along utils, kit, button, icon, number-ticker, reveal, motion, section

Usage

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

Source

interview

Interview

Interviews set so you hear who speaks. Question and answer with initials in the margin, a portrait beside the conversation, a round table where one voice can stand alone, quick questions as cards and the strongest quotes one by one.

Question and answer
Portrait
Round table
Quick questions
Highlights

Props and details

Question and answer

One column, the initials of who speaks in the margin, the question in bold. A sentence of the answer returns as a pull quote.

Open in Studio

Installv1.0.0

aiw add @ai-website/interview

Brings along utils, kit, icon, reveal, motion, section

Usage

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

Source

Portrait

A large portrait that drifts while scrolling and the facts about the person stay beside the conversation, the questions set as headings.

Open in Studio

Installv1.0.0

aiw add @ai-website/interview

Brings along utils, kit, icon, reveal, motion, section

Usage

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

Source

Round table

Several voices, each with face and name. Pick one voice and the others step back, on phones the voices sit in a row to swipe.

Open in Studio

Installv1.0.0

aiw add @ai-website/interview

Brings along utils, kit, icon, reveal, motion, section

Usage

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

Source

Quick questions

Short questions as cards. A press turns the card into the answer, one button reveals them all.

Open in Studio

Installv1.0.0

aiw add @ai-website/interview

Brings along utils, kit, icon, reveal, motion, section

Usage

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

Source

Highlights

The strongest sentences one after another, word by word. A progress line runs while the section is in view, arrows and pause stay in your hands.

Open in Studio

Installv1.0.0

aiw add @ai-website/interview

Brings along utils, kit, icon, reveal, motion, section

Usage

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

Source

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Authors and interviews on a page.

Profile

Contributors

Masthead

Expert box

Byline

Question and answer

Portrait

Round table

Quick questions

Highlights

Similar components, Often combined with

Similar components

Often combined with