Split
A two column call to action: heading, text and one action on the start side, a phone showing your app screen below its status bar on the end side. It stacks with the phone under the text on mobile.
Dependencies
Interaction Type
A labelled section landmark: the heading names it for screen readers. Tab moves through the actions in reading order, each with the accent focus ring and a 44px target. Hover or focus the primary action and its arrow slides forward; reduced motion keeps it still.
Props
Options you can pass to customize this component.
titleHeading. Defaults to "Blocks that fit every screen".
descriptionSupporting text under the heading.
actionLabelAction text. Defaults to "Browse blocks". Empty hides it.
actionHrefWhere the action points.
actionIconIcon after the action label, slides forward on hover. Pass null to hide it.
imageSrcScreen image inside the phone. Without it the phone shows a skeleton screen.
imageDarkSrcOptional dark theme screen image, shown under the .dark class.
imageAltAlt text of the screen image. Defaults to "App screen on a phone".
mediaReplaces the phone entirely with your own media.
classNameMerged onto the section with cn().
Installation
How to use
<CtaSplit
title="Your app, in every pocket."
description="Install it on any device in under a minute."
actionLabel="Get the app"
actionHref="/download"
imageSrc="/screens/home-light.jpg"
imageDarkSrc="/screens/home-dark.jpg"
imageAlt="The home screen on a phone"
/>Source Code
Click the code icon in the top-right corner to view the source code.
License & Usage
- •Free for personal and commercial use
- •No attribution required
- •Cannot be resold as a standalone product
- •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.Blocks that fit every screen
Every block starts at phone width and grows into wide layouts. Check it on a device, then copy it into your app.
