Content

Text and pictures for the middle of a page, from a simple split to a long read.

8 variants

Switch category

Text and image

Text with check points on the left, a large picture with a floating note on the right.

Installv1.0.1

aiw add @ai-website/content

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

Usage

<Content variant="text-image" title="…" points={[…]} media={…} secondaryMedia={…} />

Source

Image and text

Two overlapping pictures on the left, numbered steps on the right.

Open in Studio

Installv1.0.1

aiw add @ai-website/content

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

Usage

<Content variant="image-text" title="…" points={[…]} media={…} secondaryMedia={…} />

Source

Big quote

One voice, set large, with the person behind it.

Open in Studio

Installv1.0.1

aiw add @ai-website/content

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

Usage

<Content variant="big-quote" quote={{ text, name, role, image }} />

Source

Two columns

A sticky title, a lead line and the text set in two columns with an initial.

Open in Studio

Installv1.0.1

aiw add @ai-website/content

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

Usage

<Content variant="two-columns" title="…" description="…" body={[…]} />

Source

Checklist

Groups of real checkboxes, the progress follows along.

Open in Studio

Installv1.0.1

aiw add @ai-website/content

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

Usage

<Content variant="checklist" title="…" checklist={[{ title, items: [{ label, text, done }] }]} />

Source

With sidebar navigation

Long help or policy text with a sticky section list, a scrolling chip bar on phones.

Open in Studio

Installv1.0.1

aiw add @ai-website/content

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

Usage

<Content variant="with-sidebar-nav" title="…" sections={[{ id, title, body, media }]} />

Source

Centered long read

A narrow measure with an initial, a pull quote and a picture that breaks out wide.

Open in Studio

Installv1.0.1

aiw add @ai-website/content

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

Usage

<Content variant="centered-longform" title="…" sections={[…]} quote={{ text, name }} />

Source

Media grid

A bento of pictures and a video, each with a caption.

Open in Studio

Installv1.0.1

aiw add @ai-website/content

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

Usage

<Content variant="media-grid" title="…" items={[{ media, title, caption, video }]} />

Source

Details

What Content brings along, read from the registry and the source.

Area: Content
Variants: 8
Version: 1.0.1 · since 1.0.0
File: components/ui/content.tsx
Brings along: utilskitbutton iconsectionreveal
npm packages: None
Languages: English and German, 6 texts of its own
Studio: All 8 variants editable
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The ContentProps interface from components/ui/content.tsx, with the comments from the code.

variantoptional
ContentVariant
text-imageimage-textbig-quotetwo-columnschecklistwith-sidebar-navcentered-longformmedia-grid
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
Lead text, larger than the body
bodyoptional
string[]
Paragraphs
mediaoptional
React.ReactNode
secondaryMediaoptional
React.ReactNode
Second, smaller picture for image-text, or a note card for text-image
mediaCaptionoptional
string
pointsoptional
ContentPoint[]
actionoptional
{ label: string; href: string }
secondaryActionoptional
{ label: string; href: string }
quoteoptional
ContentQuote
checklistoptional
ContentChecklistGroup[]
sectionsoptional
ContentSection[]
itemsoptional
ContentMedia[]

Built-in texts

Content writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 6 texts

Key	English	German
onThisPage	English On this page	German Auf dieser Seite
done	English {n} of {total} done	German {n} von {total} erledigt
play	English Play video	German Video abspielen
sections	English Sections	German Abschnitte
note	English Note	German Hinweis
reset	English Reset	German Zurücksetzen

Read from the source of the component.

Sets aria-current, aria-label, aria-labelledby and aria-live, so screen readers announce purpose and state.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
Adds text for screen readers where icons and graphics stand alone.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Rises in briefly the first time it comes into view (kit-rise, useInView).
Moves with the scroll, its progress follows the position on the page.
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 8 places in the code switch motion off then.

Frequent questions

How do I install Content?

With aiw add @ai-website/content. The command puts components/ui/content.tsx into your project, the code is yours from then on. It brings along button, icon, section and reveal. It needs no further npm packages.

Which variants does Content have?

8 variants, Text and image, Image and text, Big quote, Two columns, Checklist, With sidebar navigation, Centered long read and Media grid. You pick one with the variant prop, for example variant="image-text".

Can I translate the texts of Content?

Yes. Content carries 6 texts of its own in English and German, such as “On this page”, “Play video” and “Sections”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Content?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Content with aiw_components and install it with aiw_add @ai-website/content. Name the variant in your prompt, for example variant="text-image", and the assistant writes your content straight into the props.

Can I adjust Content without code?

Yes, in the Studio. All 8 variants are editable there, texts, lists and switches. The Studio writes the matching Content code to copy.

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Content on a page.

Content

Text and image

Image and text

Big quote

Two columns

Checklist

With sidebar navigation

Centered long read

Media grid

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with