Hero Section
A marketing hero with an ember eyebrow pill, tight headline, lit-key actions, a product visual composed from real components and an invented logo row, entering on a short stagger.
Preview
pebble.example
Plan the week your team will actually ship.
Pebble turns scattered requests into a calm weekly plan. See what is on track, what slipped and who needs help, before standup.
Free for teams up to 10 · No card needed
Planning with Pebble every Monday
- Pebble
- Pebble
- Pebble
- Pebble
- Pebble
- Pebble
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | — | Headline, rendered as the section's h1 (or h2). |
| eyebrow | ReactNode | — | Pill above the headline, usually a HeroEyebrow (badge, href). |
| description | ReactNode | — | Subcopy under the headline. |
| actions | ReactNode | — | Calls to action: a primary lit key and a secondary button. |
| note | ReactNode | — | Fine print under the actions. |
| visual | ReactNode | — | Product visual, usually a HeroWindow composed from components. |
| footer | ReactNode | — | Row under the hero, usually a HeroLogoCloud of HeroWordmarks. |
| layout | "split" | "stacked" | "split" | Copy beside the visual, or centred above it. |
| headingLevel | 1 | 2 | 1 | Use 2 when the hero is not the page's top heading. |
| animate | boolean | true | Play the entrance stagger on mount. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.