Comparison Section
An us-vs-the-old-way comparison of paired statements in a recessed old column and a raised highlighted column, rows aligned with subgrid, crosses and lit checks, and a closing stat row.
Preview
Why switch
The old way, and the calm way
Most teams plan in spreadsheets and status meetings. Here is what changes.
Spreadsheets and status meetings
How most teams plan today
No:StatusLives in five tabs and three threads.
No:MeetingsA 45-minute status call every Monday.
No:SlipsFound on Friday, after the deadline.
No:ReviewsSomeone writes them by hand, sometimes.
Spent on status each week4 h
Pebble
One plan, kept current for you
Yes:StatusOne weekly plan everyone reads.
Yes:MeetingsA two-minute read before standup.
Yes:SlipsFlagged the day a task slips, with the owner.
Yes:ReviewsDrafted from what shipped, every cycle.
Spent on status each week15 min
Import your spreadsheet in about 15 minutes.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| rows | { id, topic, old, ours }[] | — | Paired statements; each row lines up across both columns. |
| old | { label, caption?, stat?, statLabel? } | — | The old way, labelled generically ("Spreadsheets", "Status meetings"), never a named competitor. |
| ours | { label, caption?, stat?, statLabel? } | — | Your product: the raised, highlighted column. |
| eyebrow | ReactNode | — | Small label with an ember dot. |
| title | ReactNode | — | Heading; names the section (otherwise "Comparison"). |
| description | ReactNode | — | Line under the heading. |
| footer | ReactNode | — | Content under the comparison, such as a button. |
| headingLevel | 2 | 3 | 2 | Heading level of the title; column titles are one level below. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.