Media Split 01

Split layout with media on left and content on right. Full-bleed 50vw image with animated content section.

Examples

DefaultSize: 1280px

Installation

Other CTA Components

View all CTA components

CTA 00

Horizontal CTA with title on left and action buttons on right. Responsive layout stacks on mobile.

CTA 01

Inverse color scheme CTA with dark background container and light text. Horizontal layout with title and buttons.

CTA 02

Horizontal CTA with background image and light overlay. Works in both light and dark modes.

CTA 03

Horizontal CTA with background image and dark overlay. Inverse token for text contrast.

CTA 04

Centered CTA with standard colors. Features eyebrow, title, subtitle, actions and note.

CTA 05

Centered CTA with inverse colors. Dark background with light text for visual contrast.

CTA 06

Centered CTA with background image and light overlay. Works in both light and dark modes.

CTA 07

Centered CTA with background image and dark overlay. Inverse token for text contrast.

CTA 08

Container CTA with border styling. Centered content with padding and border decoration.

CTA 09

Container CTA with colored background. Primary color tint for subtle emphasis.

CTA 10

Container CTA with background image and light overlay. Works in both light and dark modes.

CTA 11

Container CTA with background image and dark overlay. Inverse token for text contrast.

Media Split 02

Split layout with content on left and media on right. Full-height 50vw image on desktop.

Media Split 03

Full bleed layout with edge-to-edge background image and centered content overlay.

Media Split 04

Full bleed layout with background image and left-aligned content with asymmetric design.

Media Split 05

Split layout with content section on left and full-height media on right. Includes background accent color.

Media Split 06

Split layout with full-height media on left and content section on right. Includes background accent color.

Media Stack 01

Vertical layout with content on top and large full-width media image below.

Media Split 07

Two-column layout with content on left and media on right. Animated elements with grid structure.

Media Split 08

Two-column layout with media on left and content on right. Animated elements with grid structure.