Skip to Content
Get full access

Split Hero

Split hero section: a two-column Hero with announcement, headline, description and buttons beside a media slot. A flip option puts the media first on wide screens; optional background.

pnpm dlx shadcn add @01orbital/split-hero

Usage

import { SplitHero } from "@/components/hero/split-hero"

// The copy: change text here, not in the markup.
const COPY = {
  title: "The copy on one side, the proof on the other.",
  description:
    "Split Hero puts the headline and actions beside media: a screenshot, a card, a scene. On a phone the media follows the text.",
  mediaLabel: "Your media here",
} as const

const ACTIONS = [
  { label: "Get started", href: "#" },
  { label: "See examples", href: "#" },
] as const

/** Split Hero with a placeholder in the media slot. */
export default function SplitHeroDemo() {
  return (
    <SplitHero
      level={2}
      title={COPY.title}
      description={COPY.description}
      actions={ACTIONS}
      className="w-full"
      media={
        <div className="grid aspect-4/3 w-full place-items-center rounded-xl bg-muted text-sm text-muted-foreground">
          {COPY.mediaLabel}
        </div>
      }
    />
  )
}

Examples

New

split-hero-studio-introduction

split-hero-studio-introduction

Studio Introduction

Studio introduction split hero example showing a small SplitHero with a title, description, action and a Celestograph image.

pnpm dlx shadcn add @01orbital/split-hero-studio-introduction

New

split-hero-reversed-introduction

split-hero-reversed-introduction

Reversed Introduction

Split hero example showing a small SplitHero with the media flipped to the left.

pnpm dlx shadcn add @01orbital/split-hero-reversed-introduction

New

split-hero-large-introduction

split-hero-large-introduction

Large Introduction

Split hero example showing a large SplitHero with two actions beside a Celestograph image.

pnpm dlx shadcn add @01orbital/split-hero-large-introduction

New

split-hero-dark-studio

split-hero-dark-studio

Dark Studio

Split hero example showing a dark, medium SplitHero with two actions beside a Celestograph image.

pnpm dlx shadcn add @01orbital/split-hero-dark-studio

New

split-hero-short-launch

split-hero-short-launch

Short Launch

Launch split hero example showing a dark, large SplitHero with a one-word title beside an OrbitalV6 orb.

pnpm dlx shadcn add @01orbital/split-hero-short-launch

New

split-hero-long-product-story

split-hero-long-product-story

Long Product Story

Split hero example showing a small, flipped SplitHero with a long title beside an OrbitalV6 orb.

pnpm dlx shadcn add @01orbital/split-hero-long-product-story

New

split-hero-membership

split-hero-membership

Membership

Membership split hero example showing a medium SplitHero beside a gold EngravedCard.

pnpm dlx shadcn add @01orbital/split-hero-membership

New

split-hero-membership-reversed

split-hero-membership-reversed

Membership Reversed

Membership split hero example showing a dark, flipped SplitHero beside a gold EngravedCard.

pnpm dlx shadcn add @01orbital/split-hero-membership-reversed

New

split-hero-exhibition-announcement

split-hero-exhibition-announcement

Exhibition Announcement

Exhibition split hero example showing a medium SplitHero with an announcement beside a PourScene.

pnpm dlx shadcn add @01orbital/split-hero-exhibition-announcement

New

split-hero-portrait-editorial

split-hero-portrait-editorial

Portrait Editorial

Editorial split hero example showing a small, flipped SplitHero beside a portrait amber Celestograph plate.

pnpm dlx shadcn add @01orbital/split-hero-portrait-editorial

New

split-hero-night-school

split-hero-night-school

Night School

Split hero example showing a dark, medium SplitHero beside a nightside LimbScene.

pnpm dlx shadcn add @01orbital/split-hero-night-school

New

split-hero-night-school-reversed

split-hero-night-school-reversed

Night School Reversed

Split hero example showing a dark, small, flipped SplitHero beside a nightside LimbScene.

pnpm dlx shadcn add @01orbital/split-hero-night-school-reversed

New

split-hero-open-studio

split-hero-open-studio

Open Studio

Open studio split hero example showing a small SplitHero with an announcement beside an event schedule card.

pnpm dlx shadcn add @01orbital/split-hero-open-studio

New

split-hero-minimal-edition

split-hero-minimal-edition

Minimal Edition

Minimal split hero example showing a medium SplitHero with only a title and a PourScene.

pnpm dlx shadcn add @01orbital/split-hero-minimal-edition

New

split-hero-single-action-editorial

split-hero-single-action-editorial

Single Action Editorial

Editorial split hero example showing a dark, medium SplitHero with one action beside a portrait amber Celestograph plate.

pnpm dlx shadcn add @01orbital/split-hero-single-action-editorial

New

split-hero-announcement-and-orbit

split-hero-announcement-and-orbit

Announcement And Orbit

Split hero example showing SplitHero at medium size: an announcement above the headline, beside an OrbitalV6 orb.

pnpm dlx shadcn add @01orbital/split-hero-announcement-and-orbit

New

split-hero-wide-quiet-heading

split-hero-wide-quiet-heading

Wide Quiet Heading

Split hero example showing a small SplitHero whose heading is held to a narrow line length.

pnpm dlx shadcn add @01orbital/split-hero-wide-quiet-heading

New

split-hero-painted-background

split-hero-painted-background

Painted Background

Split hero example showing a dark SplitHero over a background PourScene, beside a gold EngravedCard.

pnpm dlx shadcn add @01orbital/split-hero-painted-background

New

split-hero-compact-band

split-hero-compact-band

Compact Band

Event band example showing a compact, dark, flipped SplitHero beside an event schedule card.

pnpm dlx shadcn add @01orbital/split-hero-compact-band

New

split-hero-colored-editorial

split-hero-colored-editorial

Colored Editorial

Editorial split hero example showing a large SplitHero with a teal heading beside a portrait amber Celestograph plate.

pnpm dlx shadcn add @01orbital/split-hero-colored-editorial

API reference

Prop

Type

It also accepts the HTML attributes of the element it renders.

Dependencies

npm: @phosphor-icons/react, cn. The CLI installs them for you.

Registry pieces it installs with it:

centered-hero-01

centered-hero-02

centered-hero-03

centered-hero-04

centered-hero-05

full-bleed-hero-01