Skip to content

Alternate Content

Alternate Content is the canonical pairing of a media frame with a list of downloadable assets, side by side. It composes Split Content, Frame, and Asset Download into a single recipe — no Alternate Content-specific code beyond the composition.

DesignDevelopAccessibility

Alternate Content pairs a copy pane with a media frame, side by side. The copy pane carries the narrative — label, headline, description, downloadable assets, primary actions — while the frame holds an image or video. It’s the visual recipe behind brochure modules and similar marketing surfaces.

Anatomy

Section titled “Anatomy”

Label

This is a headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

  1. Copy pane
  2. Headline
  3. Asset Download list
  4. Action buttons
  5. Media frame

When to use it

Section titled “When to use it”

Use Alternate Content when:

  • An image or video frames a list of related downloads (a vehicle hero alongside its brochure and spec sheet).
  • The page needs both a visual anchor and concrete file actions side by side.
  • The composition is meaningful enough to deserve a dedicated module rather than a freeform layout.

Avoid Alternate Content when:

  • The panes need different basis ratios (not 50/50) — use Split Content directly with whatever pane content fits.
  • The content shape doesn’t fit a paired copy/media frame.

Properties

Section titled “Properties”

Alternate Content is composed, not bespoke. It wires three existing primitives together.

Split Content layout

The layout primitive — equal-basis panes that stack at narrow container widths and sit side-by-side at wide ones. The container query handles the responsive flip without viewport media queries, so the module works inside sidebars and modals too.

Copy pane

Carries label, headline, description, a list of Asset Download items, and action buttons. Uses standard typography utilities and components — no new classes — so editorial wording slots straight in.

Media frame

The visual side, built on the Frame component. Optionally supports media controls overlaid in the top-right corner for play/pause behaviour.

Platform considerations

Section titled “Platform considerations”

Desktop

Both panes sit side-by-side with equal basis. Keep the copy length proportional to the media height so neither pane feels stretched.

Tablet

Same side-by-side layout at wider tablet widths. Narrower tablet contexts trigger the stacked layout via the container query, with the copy pane on top.

Mobile

The two panes stack vertically — copy first, frame second. Source order matches visual order so the reading flow holds whether the layout is stacked or side-by-side.

Best practices

Section titled “Best practices”

Compose the module from its three primitives — never override their behaviour from this level.

Do

Keep source order copy-first then frame so the reading order matches the visual order in both layouts, let Asset Download rows take their accessible name from the visible text, and lean on the Split Content container query rather than a viewport media query so the responsive flip works inside narrow containers.

Don't

Don’t swap source order with CSS order to flip the panes visually, don’t reach for Alternate Content when the panes need uneven basis ratios (use Split Content directly), and don’t introduce viewport media queries — they’d break the container-driven behaviour the module relies on.

Content guidelines

Section titled “Content guidelines”

The copy pane carries a label, headline, short description, and the download list — keep each piece short enough that the pane stays balanced with the media frame. The headline should name the asset the visual represents (“New Yaris brochure”), the description should add a single sentence of context, and the download labels should lead with the most identifying word so each row scans on its own. Action buttons sit at the bottom of the copy pane — use verb-led labels (“Download brochure”, “Configure your car”) so the call to action reads clearly.