Hero Split
A split hero with copy, email capture and a social-proof row beside an interactive product window whose title-bar tabs crossfade drawn scenes.
Preview
pebble.example
The calm way to plan a team’s week
Plan, review and automate the week in one place. Click through the product on the right.
Free for teams up to 10
4.9from 620 reviews
halcyonPebblePebble
Pebble
Plan view of the product.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | — | Headline (h1 by default). |
| scenes | { id, label, icon?, content }[] | — | Tabs of the product demo window; content is a drawn scene composed from components (decorative). |
| eyebrow | ReactNode | — | Pill above the headline, e.g. a HeroEyebrow. |
| description | ReactNode | — | Subcopy. |
| onSubscribe | (email) => Promise<void | { error }> | — | Email capture with validation and a success line. |
| ctaLabel | string | "Get started" | Submit label. |
| note | ReactNode | — | Fine print under the form. |
| proof | { rating?, reviews?, avatars?, logos? } | — | Social proof row: avatar stack, stars and invented wordmarks. |
| windowTitle | ReactNode | — | Title in the demo window bar. |
| headingLevel | 1 | 2 | 1 | Use 2 when this is not the page's top heading. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.