# Content sections > Article pages with headers, photos, contents and share links, and content sections with text, images and quotes. URL: https://apogee.avaui.dev/docs/content-sections Last updated: 2026-10-20 Article pages with headers, photos, contents and share links, and content sections with text, images and quotes. Last updated October 20, 2026 The first twelve are whole article pages: a header (centred, split or on the brand colour) with a photo, the article in [Prose](https://apogee.avaui.dev/docs/prose), and a footer with the author, topics and [ShareLinks](https://apogee.avaui.dev/docs/share-links), some with a [TableOfContents](https://apogee.avaui.dev/docs/table-of-contents) and a newsletter card beside the body. The rest are content sections: text in columns, text beside an image, a quote, and long-form policy text. ```sh npx @ava-ui/apogee add content/large-image-01 ``` Put your article in place of the sample body; render Markdown into `Prose` with ``. ## Copy is props Every block in this family takes the same content props (`ContentContent` in `sections/_shared/content.ts`), with its sample copy as the defaults. A block ignores the props it has no place for, so you can swap one block for another and keep the copy. The [Content](https://apogee.avaui.dev/docs/sections/content) section takes the same names for the props they share. - `eyebrow`: The small label or category above the heading. - `heading`: The heading. - `description`: The line under the heading. - `label`: Landmark name when the block shows no heading. - `primaryAction`: The solid button (the first of two equal buttons). - `secondaryAction`: The outline button. - `media`: The main photo beside or under the heading. - `author`: Who wrote it (or who is quoted). - `date`: ISO date, e.g. `2026-01-20`. - `readingTime`: e.g. “8 min read”. - `topics`: Topic badges under the article. - Pass `null` to hide an optional part, such as `description={null}`. - Some blocks add props of their own; the top of each block’s file lists them. [ ![](https://apogee.avaui.dev/thumbs/content-sections__large-image-01.light.webp)![](https://apogee.avaui.dev/thumbs/content-sections__large-image-01.dark.webp) Large image 01An article page: a centred title over a wide photo, the body, then the author and share links. ](https://apogee.avaui.dev/docs/content-sections/large-image-01)[ ![](https://apogee.avaui.dev/thumbs/content-sections__large-image-02.light.webp)![](https://apogee.avaui.dev/thumbs/content-sections__large-image-02.dark.webp) Large image 02An article page: a centred header with the author over a wide photo, the body, then topics and share links. ](https://apogee.avaui.dev/docs/content-sections/large-image-02)[ ![](https://apogee.avaui.dev/thumbs/content-sections__large-image-03.light.webp)![](https://apogee.avaui.dev/thumbs/content-sections__large-image-03.dark.webp) Large image 03An article page: a header and wide photo, then the body beside a newsletter card (from lg). ](https://apogee.avaui.dev/docs/content-sections/large-image-03)[ ![](https://apogee.avaui.dev/thumbs/content-sections__large-image-04.light.webp)![](https://apogee.avaui.dev/thumbs/content-sections__large-image-04.dark.webp) Large image 04An article page: a header on the brand colour, a wide photo overlapping it, the body, then topics and share links. ](https://apogee.avaui.dev/docs/content-sections/large-image-04)[ ![](https://apogee.avaui.dev/thumbs/content-sections__split-image-01.light.webp)![](https://apogee.avaui.dev/thumbs/content-sections__split-image-01.dark.webp) Split image 01An article page: a split header with a tall photo, then a table of contents and share links beside the body. ](https://apogee.avaui.dev/docs/content-sections/split-image-01)[ ![](https://apogee.avaui.dev/thumbs/content-sections__split-image-02.light.webp)![](https://apogee.avaui.dev/thumbs/content-sections__split-image-02.dark.webp) Split image 02An article page: a split header with a photo on a tinted panel, the body, then share links. ](https://apogee.avaui.dev/docs/content-sections/split-image-02)[ ![](https://apogee.avaui.dev/thumbs/content-sections__split-image-03.light.webp)![](https://apogee.avaui.dev/thumbs/content-sections__split-image-03.dark.webp) Split image 03An article page: a split header, then a sidebar with contents, contributors, a newsletter form and share links beside the body. ](https://apogee.avaui.dev/docs/content-sections/split-image-03)[ ![](https://apogee.avaui.dev/thumbs/content-sections__split-image-04.light.webp)![](https://apogee.avaui.dev/thumbs/content-sections__split-image-04.dark.webp) Split image 04An article page: a split header beside a wide photo, the body, then share links. ](https://apogee.avaui.dev/docs/content-sections/split-image-04)[ ![](https://apogee.avaui.dev/thumbs/content-sections__alternative-01.light.webp)![](https://apogee.avaui.dev/thumbs/content-sections__alternative-01.dark.webp) Alternative 01An article page: a photo beside the title block (from lg), the body, then topics. ](https://apogee.avaui.dev/docs/content-sections/alternative-01)[ ![](https://apogee.avaui.dev/thumbs/content-sections__alternative-02.light.webp)![](https://apogee.avaui.dev/thumbs/content-sections__alternative-02.dark.webp) Alternative 02An article page: a heading block over a photo carousel, the body, then the author and topics. ](https://apogee.avaui.dev/docs/content-sections/alternative-02)[ ![](https://apogee.avaui.dev/thumbs/content-sections__alternative-03.light.webp)![](https://apogee.avaui.dev/thumbs/content-sections__alternative-03.dark.webp) Alternative 03An article page: a place title beside a tall photo, the body, then share links. ](https://apogee.avaui.dev/docs/content-sections/alternative-03)[ ![](https://apogee.avaui.dev/thumbs/content-sections__simple.light.webp)![](https://apogee.avaui.dev/thumbs/content-sections__simple.dark.webp) SimpleA policy page: a centred header with legal and plain-language tabs over the policy text. ](https://apogee.avaui.dev/docs/content-sections/simple)[ ![](https://apogee.avaui.dev/thumbs/content-sections__section-split-image-01.light.webp)![](https://apogee.avaui.dev/thumbs/content-sections__section-split-image-01.dark.webp) Section split image 01A section heading with a button over body text beside an image. ](https://apogee.avaui.dev/docs/content-sections/section-split-image-01)[ ![](https://apogee.avaui.dev/thumbs/content-sections__section-split-image-02.light.webp)![](https://apogee.avaui.dev/thumbs/content-sections__section-split-image-02.dark.webp) Section split image 02A case study: heading, body text and two buttons beside a portrait with a name, role and rating. ](https://apogee.avaui.dev/docs/content-sections/section-split-image-02)[ ![](https://apogee.avaui.dev/thumbs/content-sections__section-split-image-03.light.webp)![](https://apogee.avaui.dev/thumbs/content-sections__section-split-image-03.dark.webp) Section split image 03A heading, body text and two buttons beside an abstract image. ](https://apogee.avaui.dev/docs/content-sections/section-split-image-03)[ ![](https://apogee.avaui.dev/thumbs/content-sections__section-simple-01.light.webp)![](https://apogee.avaui.dev/thumbs/content-sections__section-simple-01.dark.webp) Section simple 01An icon, heading and intro beside body text. ](https://apogee.avaui.dev/docs/content-sections/section-simple-01)[ ![](https://apogee.avaui.dev/thumbs/content-sections__section-simple-02.light.webp)![](https://apogee.avaui.dev/thumbs/content-sections__section-simple-02.dark.webp) Section simple 02A mission heading and intro beside body text with a list. ](https://apogee.avaui.dev/docs/content-sections/section-simple-02)[ ![](https://apogee.avaui.dev/thumbs/content-sections__section-simple-03.light.webp)![](https://apogee.avaui.dev/thumbs/content-sections__section-simple-03.dark.webp) Section simple 03A heading block over two columns of body text. ](https://apogee.avaui.dev/docs/content-sections/section-simple-03)[ ![](https://apogee.avaui.dev/thumbs/content-sections__section-simple-04.light.webp)![](https://apogee.avaui.dev/thumbs/content-sections__section-simple-04.dark.webp) Section simple 04Two columns of body text with no heading. ](https://apogee.avaui.dev/docs/content-sections/section-simple-04)[ ![](https://apogee.avaui.dev/thumbs/content-sections__section-simple-05.light.webp)![](https://apogee.avaui.dev/thumbs/content-sections__section-simple-05.dark.webp) Section simple 05A centred quote with its author. ](https://apogee.avaui.dev/docs/content-sections/section-simple-05)[ ![](https://apogee.avaui.dev/thumbs/content-sections__rich-text-01.light.webp)![](https://apogee.avaui.dev/thumbs/content-sections__rich-text-01.dark.webp) Rich text 01One centred column of article text, then the author and share links. ](https://apogee.avaui.dev/docs/content-sections/rich-text-01)[ ![](https://apogee.avaui.dev/thumbs/content-sections__rich-text-02.light.webp)![](https://apogee.avaui.dev/thumbs/content-sections__rich-text-02.dark.webp) Rich text 02One column of policy text with section headings and a numbered list. ](https://apogee.avaui.dev/docs/content-sections/rich-text-02) ## Related [ ProseTypography styling for a block of rich, CMS, or markdown HTML you don't control element by element. ](https://apogee.avaui.dev/docs/prose)[ ShareLinksWays to pass a page on; Copy link, the device's share sheet and email. ](https://apogee.avaui.dev/docs/share-links)[ TableOfContentsThe sections of a long page as in-page links in a named nav; one level of nesting and a current marker. ](https://apogee.avaui.dev/docs/table-of-contents)