Content component

Split card

Pairs a concise explanation with meaningful imagery.

core Version introduced: 1.0.0 Platforms: Rise Owner: Design and development steward

Live preview

Rendered with production Rise CSS

Later that afternoon, Karen receives a message from Lily’s mother requesting a meeting.

Contemporary office workspace with glass meeting rooms

Light background shown; verify against a tinted or dark surface where the component is used that way in course.

Use when / avoid when

Use when

Explanation genuinely benefits from a relevant photograph.

Avoid when

Generic stock imagery, or content too long to sit comfortably beside media — use a text-led panel instead.

Anatomy

Split container (.isq-split)
Content side (.isq-split__content)
Media side (.isq-split__media)

Variants

isq-split--content-wideisq-split--image-leftisq-split--media-wideisq-split--thirds

States

Responsive behaviour

Restacks to one column at 760px; image uses a fixed aspect ratio.

Accessibility

Meaningful alt text on the image; decorative images marked accordingly.

Implementation

Type: custom-html

Dependencies: Production CSS only.

Code

HTML


  
    
      Later that afternoon, Karen receives a message from Lily’s mother requesting a meeting.

Classes used: .isq-split, .isq-split--content-wide, .isq-split--image-left, .isq-split--media-wide, .isq-split--thirds, .isq-split__content, .isq-split__media, .isq-split__media--contain

Production stylesheet reference →

Related items

Related patterns: Explanation Scenario stage

Related components: Panel Scenario stage

Governance metadata

Owner	Design and development steward
Status	Core
Version introduced	1.0.0
Last reviewed	2026-07
Known limitations	None recorded.