Skip to content

Story Cover

The framed title card that opens a long page: kicker, title, one line, the chapter list and actions.

Still Coffee

Three plates

How one cup is made, from the bean to the first sip.

Start reading See the menu

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

export default function StoryCoverDemo() {
  return (
    <div style={{ width: '100%', padding: '48px clamp(16px, 6vw, 64px)', background: `url(${pour.src}) center / cover` }}>
      <StoryCover
        kicker="Still Coffee"
        title="Three plates"
        lead="How one cup is made, from the bean to the first sip."
        chapters={[
          { label: 'The bean', href: '#beans', marker: 'I' },
          { label: 'The pour', href: '#pour', marker: 'II' },
          { label: 'The cup', href: '#cup', marker: 'III' },
        ]}
        actions={<><ActionLink href="#beans" shape="pill">Start reading</ActionLink><ActionLink href="#menu" tone="inverse" shape="pill">See the menu</ActionLink></>}
      />
    </div>
  );
}

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, StoryCover } from '@brand-studio/ui';
import brand from './brand.json';

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

Usage

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

<StoryCover
  kicker="Still Coffee"
  title="Three plates"
  lead="How one cup is made, from the bean to the first sip."
  chapters={[
    { label: 'The bean', href: '#beans', marker: 'I' },
    { label: 'The pour', href: '#pour', marker: 'II' },
  ]}
  actions={<ActionLink href="#beans" shape="pill">Start reading</ActionLink>}
/>

Place it over a picture. The glass behind the words darkens the picture a little; check the contrast on the lightest part of the picture it covers.

Accessibility

The title is the page's <h1>. Use one cover per page.
The chapter list is an ordered list inside a <nav> named by label, so screen readers can jump to it.
Chapter links are at least 36px tall.

API Reference

Prop	Type	Default
`kicker?`	`React.ReactNode`	–
`title`	`React.ReactNode`	–
`lead?`	`React.ReactNode`	–
`chapters?`	`StoryCoverChapter[]`	–
`actions?`	`React.ReactNode`	–
`label?`	`string`	`'Chapters'`
`id?`	`string`	–
`className?`	`string`	`''`