Vertical layout with content on top and large full-width media image below.
Examples
Installation
Other CTA Components
View all CTA componentsCTA 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 01
Split layout with media on left and content on right. Full-bleed 50vw image with animated content section.
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 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.