Content

A text block beside media, or long-form prose.

Last updated

About

Why we built it

A design system should make the next page cheaper than the last.

Every section here is built from the components you already use, reads only tokens, and renders without JavaScript.

Editors fill the props; developers reach for slots when they need more.

Our story
Placeholder photograph
Show code
<ContentSection eyebrow="About" heading="Why we built it" media={{ src, alt }} primaryAction={{ label: 'Our story', href: '#' }}>
<p>…</p>
</ContentSection>

Add

npx @ava-ui/apogee add content

API

Prop Type Default Category Description
eyebrow, heading, description string — content Optional header.
primaryAction { label, href } — content Button under the body.
media { src, alt, width?, height? } — content For split; or the media slot.
default slot content The body (paragraphs; prose styles any element).
mediaFirst boolean false layout Media on the start side.
label string English content Landmark name when there is no heading.
layout 'split' | 'prose' 'split' layout
background, spacing, headingLevel, id layout As on every section.

Layouts

Media first

Picture on the start side

Swap sides with mediaFirst; on phones the text still comes first.

Placeholder photograph

Prose

Long form

Headings, lists and quotes inside, styled by Prose.

A subheading

Prose takes over inside: lists, quotes, code and tables all get the system’s styles.

  • One
  • Two

Quoted text in the serif face.

Someone
Show code
<ContentSection layout="split" mediaFirst media={…}>…</ContentSection>
<ContentSection layout="prose" heading="Long form"><h3>…</h3><p>…</p><ul>…</ul></ContentSection>

Accessibility

  • A labelled section when a heading is given; otherwise named “Content”.