Split Story Card
BlockInstallation
pnpm add @corew500/uiUsage
import { SplitStoryCard } from "@corew500/ui/blocks/split-story-card"
<SplitStoryCard>Content</SplitStoryCard>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| sideA* | StorySide | — | Left/top side of the story (e.g., the giver) |
| sideB* | StorySide | — | Right/bottom side of the story (e.g., the receiver) |
| connectionIcon | enum | — | Custom icon rendered between the two sides. Defaults to ArrowLeftRight. |
| quote | { text: string; author: string; } | — | Optional quote displayed below the split |
| footer | { label: string; value: string; } | — | Optional footer with a label/value pair (e.g., "Result: Grew revenue 3x") |
| intent | enum | primary | Color intent for border accents and side backgrounds |
| className | string | — | Additional CSS classes |
Accessibility
Screen Readers
- Connection icon is decorative (aria-hidden)
Additional
- - Uses semantic heading (h3) for each side title
- Quote uses blockquote element with footer for attribution