# Split image 03

> An article page: a split header, then a sidebar with contents, contributors, a newsletter form and share links beside the body.

URL: https://apogee.avaui.dev/docs/content-sections/split-image-03
Last updated: 2026-10-20

An article page: a split header, then a sidebar with contents, contributors, a newsletter form and share links beside the body.

Last updated October 20, 2026

Live example: https://apogee.avaui.dev/examples/content/split-image-03

```astro
---
/**
 * Split image 03: An article page: a split header, then a sidebar with contents, contributors, a newsletter form and share links beside the body.
 *
 * @block content
 * @order 7
 */
import Section from '@/components/apogee/Section/Section.astro'
import PostHeader from '@/components/apogee/sections/PostHeader/PostHeader.astro'
import Prose from '@/components/apogee/Prose/Prose.astro'
import Image from '@/components/apogee/Image/Image.astro'
import Avatar from '@/components/apogee/Avatar/Avatar.astro'
import ShareLinks from '@/components/apogee/ShareLinks/ShareLinks.astro'
import TableOfContents from '@/components/apogee/TableOfContents/TableOfContents.astro'
import Card from '@/components/apogee/Card/Card.astro'
import Input from '@/components/apogee/Input/Input.astro'
import Button from '@/components/apogee/Button/Button.astro'
import { plain } from '@/components/apogee/sections/_shared/spine.ts'
import type { Author, ContentContent } from '@/components/apogee/sections/_shared/content.ts'

/** @composable */
interface Props extends ContentContent {
  /** The people listed in the sidebar. @shape { name: string, role?: string }[] @category content */
  contributors?: Author[] | null
  /** The line above the contributors. @category content */
  contributorsLabel?: string
  /** The newsletter card in the sidebar. @category content */
  formHeading?: string
  /** @category content */
  formDescription?: string | null
  /** The sign-up form's submit button. @category content */
  submitLabel?: string
}

const {
  eyebrow = 'Engineering',
  heading = 'Migrating to a typed component library',
  description = 'What changed when we moved two hundred screens onto one set of typed parts.',
  author,
  date = '2026-01-20',
  readingTime = '6 min read',
  media = { src: 'https://picsum.photos/seed/apogee-content-19/1200/1000', alt: '', width: 1200, height: 1000 },
  contributorsLabel = 'Contributors',
  contributors = [{ name: 'Ada Lovelace', role: 'Design Lead' }, { name: 'Alan Turing', role: 'Engineer' }, { name: 'Grace Hopper', role: 'Product Manager' }],
  formHeading = 'Weekly newsletter',
  formDescription = 'No spam. Just the latest releases and tips, articles and interviews, every week.',
  submitLabel = 'Subscribe',
} = Astro.props
---

<article>
  <PostHeader layout="split" eyebrow={eyebrow ?? undefined} heading={plain(heading)} description={description ?? undefined} author={author ?? undefined} date={date} readingTime={readingTime ?? undefined} headingLevel={1} media={media ?? undefined} />
  <Section spacing="none" class="pb-section">
    <div class="grid gap-12 lg:grid-cols-[17rem_minmax(0,1fr)] lg:gap-16">
      <aside class="max-lg:hidden" aria-label="About this article">
        <div class="sticky top-[calc(var(--navbar-height)+2rem)] flex flex-col gap-10">
      <TableOfContents items={[
        { label: 'Introduction', href: '#introduction' },
        { label: 'Software and tools', href: '#software-and-tools' },
        { label: 'Other resources', href: '#other-resources' },
        { label: 'Conclusion', href: '#conclusion' },
      ]} current="#introduction" />
      {contributors && (
      <div class="flex flex-col gap-4">
        <p class="text-sm font-semibold text-primary">{contributorsLabel}</p>
        <ul class="flex list-none flex-col gap-4 p-0">
          {contributors.map((c) => (
            <li class="flex items-center gap-3">
              <Avatar name={c.name} />
              <div class="text-sm"><p class="font-semibold">{c.name}</p>{c.role && <p class="text-neutral-faded">{c.role}</p>}</div>
            </li>
          ))}
        </ul>
      </div>
      )}
      <Card padding="large" class="bg-neutral-faded">
        <h2 class="text-lg font-semibold">{formHeading}</h2>
        {formDescription && <p class="mt-2 text-sm text-neutral-faded">{formDescription}</p>}
        <form method="post" class="mt-6 flex flex-col gap-3">
          <Input type="email" name="email" placeholder="Enter your email" aria-label="Email" autocomplete="email" required />
          <Button type="submit">{submitLabel}</Button>
        </form>
      </Card>
          <ShareLinks iconOnly size="small" title={plain(heading)} />
        </div>
      </aside>
      <div class="min-w-0 max-w-3xl">
        <Prose>
      <p class="lead">A design system is the shared language a team speaks when it builds a product: the parts, the rules for using them and the reasons behind the rules.</p>
      <h2 id="introduction" >Introduction</h2>
      <p>Most teams start one after the third button that looks almost, but not quite, like the other two. The cost is rarely the button; it is the conversation every time someone has to choose between them.</p>
      <p>A system turns those conversations into decisions made once. It does not slow a team down; it removes the questions nobody needed to ask.</p>
      <figure>
        <Image src="https://picsum.photos/seed/apogee-content-20/1600/900" alt="" width={1600} height={900} fit="cover" class="aspect-video w-full" />
        <figcaption>A team review of the component inventory.</figcaption>
      </figure>
      <h2 id="software-and-tools" >Software and tools</h2>
      <p>The tools matter less than the habits around them. Keep the source of truth in code, describe every part where people already work, and let the build check what people forget.</p>
      <ol>
        <li>Name the parts the way the team already talks about them.</li>
        <li>Write down when to use each one, and when not to.</li>
        <li>Fail the build when a colour pair misses contrast.</li>
      </ol>
      <blockquote>
        <p>“We stopped arguing about buttons and started arguing about the product. That was the point.”</p>
        <cite>Ada Lovelace, Design Lead</cite>
      </blockquote>
      <h2 id="other-resources" >Other resources</h2>
      <p>Read the parts' own documentation first: every variant, every state, and the keyboard behaviour you get for free.</p>
      <Image src="https://picsum.photos/seed/apogee-content-21/1600/900" alt="" width={1600} height={900} fit="cover" class="aspect-video w-full" />
      <div class="not-prose mt-10 rounded-2xl bg-neutral-faded p-6 md:p-8">
        <h2 id="conclusion" class="text-xl font-semibold">Conclusion</h2>
        <p class="mt-4 text-neutral-faded">Start small: one page built entirely from shared parts teaches more than any audit. Grow the system where the product needs it, not ahead of it.</p>
      </div>
    </Prose>
      </div>
    </div>
  </Section>
</article>
```

## Add

```sh
npx @ava-ui/apogee add content/split-image-03
```

This copies the block to `src/components/apogee/blocks/content/` with everything it uses: Avatar, Button, Card, Image, Input, PostHeader, Prose, Section, ShareLinks, TableOfContents. Every piece of copy is a prop, with the sample copy as its default. Pass yours, or `null` to hide a part; see [copy is props](https://apogee.avaui.dev/docs/content-sections#copy-is-props).

## Accessibility

-   The heading is the page’s `h1`; the items below are one level down.
-   The email field is named “Email” (the placeholder is not a label); the form submits without JS.
-   Photos that only decorate have an empty `alt`; give yours one when it carries meaning.

## 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)