Skip to content

Story Hero

The opening frame of a page: headline, promise, action and image.

Still Coffee

Make room for the first sip.

Still is a fictional coffee brand from the Brand Studio showcase.

A cobalt ceramic cup of coffee on a brushed steel counter in morning light.

import { ActionLink, StoryHero } from '@brand-studio/ui';
import { cup } from '@/demos/assets';

export default function StoryHeroDemo() {
  return (
    <StoryHero
      eyebrow="Still Coffee"
      title="Make room for the first sip."
      description="Still is a fictional coffee brand from the Brand Studio showcase."
      asset={cup}
      action={<ActionLink href="#menu">See the menu</ActionLink>}
    />
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, StoryHero } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { StoryHero } from '@brand-studio/ui';

<StoryHero
  title="Make room for the first sip."
  description="…"
  asset={cup}
  action={<ActionLink href="/menu">See the menu</ActionLink>}
/>

Examples

Overlay

The copy sits on a scrim that stays readable before the image loads.

Give it a moment.

The copy sits on a scrim, so it stays readable before the image loads.

A slender stream of coffee pours into the cobalt cup.

import { ActionLink, StoryHero } from '@brand-studio/ui';
import { pour } from '@/demos/assets';

export default function StoryHeroOverlay() {
  return (
    <StoryHero
      variant="overlay"
      title="Give it a moment."
      description="The copy sits on a scrim, so it stays readable before the image loads."
      asset={pour}
      action={<ActionLink href="#visit" tone="inverse">Plan a visit</ActionLink>}
    />
  );
}

Accessibility

Renders the page <h1>. Use one StoryHero per page.
The image loads with high priority.

API Reference

Prop	Type	Default
`title`	`React.ReactNode`	–
`description`	`string`	–
`asset`	`ImageAsset`	–
`action`	`React.ReactNode`	–
`eyebrow?`	`string`	–
`id?`	`string`	–
`variant?`	`"overlay" \| "split"`	`'split'`