/ux
Components/Marketing/FeatureCard

FeatureCard

Marketing

Illustration-forward card — stacked, horizontal, or hero-top layout.

Illustration-forward card that pairs one of the 21 brand illustrations with a headline, eyebrow, and description. Three layouts (stacked, horizontal, hero-top) cover landing-page grids, docs highlights, and product marketing.

Usage

import { FeatureCard, Anchor } from "nosible-ux"
import cube from "nosible-ux/assets/illustrations/cube.png"

export default function Example() {
  return (
    <FeatureCard
      eyebrow="CAPABILITY"
      title="Signal extraction"
      description="NLP across 94 sources, ranked by confidence."
      illustration={cube.src}
      action={<Anchor href="/docs/signals">Learn more →</Anchor>}
    />
  )
}

Examples

Three layouts

STACKED

Signal extraction

NLP across 94 sources, ranked by confidence.

HORIZONTAL

Cross-source agreement

Confidence scores that rise with corroborating sources.

HERO-TOP

Signal latency

Median end-to-end latency under 90 seconds.

Interactive tile

01

Ingest

94 data sources, streamed.

02

Extract

NLP-driven signal extraction.

03

Rank

Cross-source confidence scoring.

04

Serve

Sub-400ms query latency.

Illustrations

21 commissioned illustrations ship with nosible-ux. Import them from the subpath export:

import biker from "nosible-ux/assets/illustrations/biker.png"
import cube from "nosible-ux/assets/illustrations/cube.png"
import spaceman from "nosible-ux/assets/illustrations/spaceman.png"
// …and 18 more

See the typed registry at src/assets/manifest.ts (ILLUSTRATION_NAMES, ILLUSTRATIONS).

Props

Name TypeDefaultDescription
action
ReactNode—Trailing link / button — typically a ghost `<Button>`.
asChild
boolean | undefined—When true, merges styles onto the child element instead of rendering a `<div>`.
description
ReactNode—Supporting copy under the title.
eyebrow
ReactNode—Small pre-headline label.
illustration
ReactNode—Illustration / icon node rendered above (or beside, depending on layout) the copy.
interactive
boolean | null | undefined—
layout
"horizontal" | "stacked" | "hero-top" | null | undefined—
tier
"outline" | "raised" | "surface" | null | undefined—
title
ReactNode—Primary headline — Space Grotesk H2.
← All ComponentsGetting Started →