Skip to content
Toyota Motor Europe DX Playbook

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.

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); the frame holds an image or video. It’s the visual recipe behind brochure modulesAnatomy

An Alternate Content surface is composed, not bespoke. The module wires together:

  • Split Content as the layout primitive — equal-basis panes that stack at narrow container widths and sit side-by-side at wide ones.
  • Copy pane — label, headline, description, a list of Asset Download items, and action buttons. All standard typography utilities and components — no new classes.
  • Frame — the media surface, optionally with media controls overlaid in the top-right.

When to use it

Section titled “When to use it”

Reach for Alternate Content when:

  • A piece of imagery or video frames a list of related downloads (e.g. 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.

If the panes need different basis (not 50/50), or the content fits a different shape, this module is the wrong reach — use Split Content directly with whatever pane content fits.

Quick summary of accessibility & consistency

Section titled “Quick summary of accessibility & consistency”
  • Source order: copy pane first, frame second. The reading order matches the visual order in both stacked and side-by-side layouts — no order swapping.
  • Asset Download rows take their accessible name from their visible text (Download Brochure .JPG 100 MB); no aria-label is needed unless a specific surface calls for a different announcement.
  • The Split Content container query handles the responsive flip. Don’t override it with a viewport media query — surfaces inside narrower containers (sidebars, modals) need the container behaviour.