/ux
Components/Marketing/HeroBanner

HeroBanner

Marketing

Full-width hero with eyebrow, headline, actions, and aside slot.

Full-width hero surface for landing pages, docs top-of-page, and product intros. Headline typography switches between display (Orbitron, Nosible primary) and heading (Space Grotesk) via headlineFont. The aside slot is for a right-column stat, illustration, or shipping status chip.

Usage

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

export default function Example() {
  return (
    <HeroBanner
      eyebrow="NOSIBLE v1.0"
      title="Signal-native research desk"
      description="From tick to thesis in under 400 ms."
      actions={<Button>Get access</Button>}
    />
  )
}

Examples

With backdrop + overlay

RESEARCH DESK · v1.0

Build at the speed of signal

Live market context, AI-native research, one surface.

Display vs heading typography

DISPLAY

NOSIBLE

Orbitron — reserved for the primary Nosible brand moments.

HEADING

Signal-native research

Space Grotesk — for every other headline on the site.

Accessibility

Renders with role="banner" when used at the page top. Actions should be real <Button> or <Link> elements (no clickable <div>s).

Props

Name TypeDefaultDescription
accentStripe
boolean | undefined—Neo Green left stripe — brand signal accent. Default: `false`.
actions
ReactNode—Primary + secondary CTA node(s). Pass `<Button>` elements or a fragment.
align
"center" | "bottom-left" | "bottom-center" | "left" | null | undefined—
asChild
boolean | undefined—When true, merges styles onto the child element instead of rendering a `<section>`.
aside
ReactNode—Optional supporting content (forms, media) rendered to the right / below the main stack.
backgroundAlt
string | undefined—Alt text for the backdrop. Pass `""` when decorative. Default: `""`.
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 pre-headline label (Space Mono, uppercase, tracked).
headlineFont
"heading" | "display" | undefined—Headline typeface. Default: `"display"` (Orbitron).
height
"sm" | "md" | "lg" | null | undefined—
logo
ReactNode—Logo / wordmark node rendered in the top-left corner.
overlay
"strong" | "none" | "soft" | "medium" | "solid" | "gradient-top" | "gradient-bottom" | "gradient-left" | "gradient-right" | "gradient-diagonal" | undefined—Overlay painted over the backdrop. Default: `"gradient-bottom"` when backdrop is set, else `"none"`.
title
ReactNode—Primary headline — renders in Orbitron D1 or Space Grotesk H1 depending on `headlineFont`.
← All ComponentsGetting Started →