/ux
Components/Marketing/CTACard

CTACard

Marketing

Column-width CTA card — obsidian, slate, accent, or outline tone.

Column-width CTA surface. Four tones cover the full marketing spectrum: obsidian (primary dark), slate (secondary dark), accent (Neo Green, reserved), outline (bare with border).

Usage

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

export default function Example() {
  return (
    <CTACard
      tone="obsidian"
      eyebrow="EARLY ACCESS"
      title="Signal, structured."
      description="From tick to thesis in under 400 ms."
      actions={<Button>Get access</Button>}
    />
  )
}

Examples

Four tones

OBSIDIAN

Ship decisions faster

The research desk for AI-native teams.

SLATE

Ship decisions faster

The research desk for AI-native teams.

ACCENT

Ship decisions faster

The research desk for AI-native teams.

OUTLINE

Ship decisions faster

The research desk for AI-native teams.

With backdrop + hoverable

CASE STUDY

How a $4B fund cut research time 5×

Read how one team rebuilt their weekly thesis loop on Nosible.

Accessibility

When hoverable is set, the whole card acts as a link target — pass asChild with a real <a> or <Link> to preserve keyboard navigation.

Props

Name TypeDefaultDescription
accentStripe
boolean | undefined—Adds a 2 px Neo Green left stripe — brand signal accent.
actions
ReactNode—CTA node(s) rendered at the bottom — typically `<Button>` elements.
asChild
boolean | undefined—When true, merges styles onto the child element instead of rendering a `<div>`.
backgroundAlt
string | undefined—Alt text for the backdrop. Pass `""` when decorative.
backgroundFit
"fill" | "cover" | "contain" | undefined—Backdrop fit. Default: `"cover"`.
backgroundPosition
"center" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top" | "bottom" | "left" | "right" | undefined—Backdrop focal point. Default: `"center"`.
backgroundSrc
string | undefined—Backdrop image URL — illustration or share-cover.
description
ReactNode—Supporting copy under the title.
eyebrow
ReactNode—Optional small pre-headline label (Space Mono, uppercase, tracked).
hoverable
boolean | null | undefined—
icon
ReactNode—Optional icon / illustration rendered in the top-left.
meta
ReactNode—Optional metadata row (e.g. badges) rendered above the title.
overlay
"strong" | "none" | "soft" | "medium" | "solid" | "gradient-top" | "gradient-bottom" | "gradient-left" | "gradient-right" | "gradient-diagonal" | undefined—Overlay painted over the backdrop. Default: `"strong"` when backdrop is set, else `"none"`.
size
"sm" | "md" | "lg" | null | undefined—
title
ReactNode—Primary headline — Space Grotesk H2.
tone
"outline" | "obsidian" | "slate" | "accent" | null | undefined—
← All ComponentsGetting Started →