/ux
Components/Marketing/SplitCTA

SplitCTA

Marketing

Two-column media + copy layout — media left or right.

Two-column marketing surface. One column is media (image, illustration, or custom node), the other is copy + actions. Direction flips via direction="media-left" or "media-right".

Usage

import { SplitCTA, Button } from "nosible-ux"

export default function Example() {
  return (
    <SplitCTA
      direction="media-right"
      eyebrow="RESEARCH DESK"
      title="Your workbench, reimagined"
      description="AI-native. Brutal. Fast."
      actions={<Button>Open app</Button>}
      mediaSrc="/brand/hero.jpg"
    />
  )
}

Examples

Both directions

01 — INGEST

Every source that matters

SEC EDGAR, Federal Reserve, earnings-call transcripts, and 91 more.

02 — EXTRACT

Signal, not noise

NLP-driven signal extraction with cross-source confidence scoring.

With custom media node

METRICS

Measurable output

Teams using Nosible ship ~3× more research per analyst.

Props

Name TypeDefaultDescription
accentDivider
boolean | undefined—Adds a 2 px Neo Green stripe between the two columns.
actions
ReactNode—CTA node(s) rendered at the bottom of the copy column.
asChild
boolean | undefined—When true, merges styles onto the child element instead of rendering a `<section>`.
description
ReactNode—Supporting copy under the title.
direction
"media-left" | "media-right" | null | undefined—
eyebrow
ReactNode—Optional small pre-headline label.
height
"sm" | "md" | "lg" | null | undefined—
media
ReactNode—Custom React node to render in the media column — takes precedence over `mediaSrc`.
mediaAlt
string | undefined—Alt text for the media backdrop.
mediaFit
"fill" | "cover" | "contain" | undefined—Fit for the media backdrop. Default: `"cover"`.
mediaOverlay
"strong" | "none" | "soft" | "medium" | "solid" | "gradient-top" | "gradient-bottom" | "gradient-left" | "gradient-right" | "gradient-diagonal" | undefined—Overlay tint on the media column. Default: `"soft"`.
mediaPosition
"center" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top" | "bottom" | "left" | "right" | undefined—Focal point for the media backdrop. Default: `"center"`.
mediaSrc
string | undefined—Backdrop for the media column — illustration or share-cover URL.
title
ReactNode—Primary headline — Space Grotesk H1.
← All ComponentsGetting Started →