Component library

Showing 18 components with role list.

<BulletList>
coreListPresentation
Styled bullet list from a string array.
When to use: Agenda, takeaways, or constraints.
Preview
Map the handoffs
Pick two pilots
Measure hours reclaimed
Prop Type Notes
items string[] Required. Bullet strings.
Examples
```
<BulletList items={["Map the handoffs", "Pick two pilots", "Measure hours reclaimed"]} />
```

Prop	Type	Notes
items	string[]	Required. Bullet strings.

<RagStatusBoard>

financeDataListPresentation

RAG (red, amber, green) health rows with workstream name and note.

When to use: Programme or portfolio project status on one slide.

Preview

Programme health

Green
Platform
Release train on schedule.
Amber
Data
Schema review slips one week.
Red
Change
SME availability for UAT not confirmed.

Prop	Type	Notes
title	string	Optional. Default: `Status`. Heading above the list.
rows	{ workstream: string; status: "red" \| "amber" \| "green"; note: string }[]	Required. One row per workstream with RAG dot and short note.

Examples

<RagStatusBoard
  title="Programme health"
  rows={[
    { workstream: "Platform", status: "green", note: "Release train on schedule." },
    { workstream: "Data", status: "amber", note: "Schema review slips one week." },
    { workstream: "Change", status: "red", note: "SME availability for UAT not confirmed." },
  ]}
/>

<BlockersAndAsks>

financeListPresentation

Two columns: blockers list and asks list using the slide bullet style.

When to use: Committee or sponsor slide separating risks from explicit decisions needed.

Preview

Blockers

SAP cutover window clashes with quarter close
UAT sign-off owner on leave

Asks

Confirm Wave 2 scope by Friday
Nominate deputy approver for finance

Prop	Type	Notes
blockersTitle	string	Optional. Default: `Blockers`. Left column heading.
asksTitle	string	Optional. Default: `Asks`. Right column heading.
blockers	string[]	Required. Bullet strings for blockers.
asks	string[]	Required. Bullet strings for asks.

Examples

<BlockersAndAsks
  blockers={["SAP cutover window clashes with quarter close", "UAT sign-off owner on leave"]}
  asks={["Confirm Wave 2 scope by Friday", "Nominate deputy approver for finance"]}
/>

<NextThirtyDays>
financeListTimelinePresentation
Ordered list of dated commitments for the coming month.
When to use: Delivery cadence or milestone preview on project update decks.
Preview
Next 30 days
Week 1Freeze scope for pilot A.
Week 2Integration test with sandbox ERP.
Week 4Go / no-go for production cutover.
Prop Type Notes
title string Optional. Default: Next 30 days. Slide heading.
items { date: string; text: string }[] Required. `date` is a short label (e.g. "12 Jun" or "Week 2"); `text` is the commitment.
Examples
```
<NextThirtyDays
  items={[
    { date: "Week 1", text: "Freeze scope for pilot A." },
    { date: "Week 2", text: "Integration test with sandbox ERP." },
    { date: "Week 4", text: "Go / no-go for production cutover." },
  ]}
/>
```

Prop	Type	Notes
title	string	Optional. Default: `Next 30 days`. Slide heading.
items	{ date: string; text: string }[]	Required. `date` is a short label (e.g. "12 Jun" or "Week 2"); `text` is the commitment.

<UseCaseCard>

coreContentListPresentation

One use-case tile with wave priority, area, owner, impact, effort, and time-to-value; slide-themed with compact density when three or four cards share a grid.

When to use: Always inside `<UseCaseGrid>` on a slide. Up to four cards per slide (2×2). Pair with `<OpportunityMatrix>` on the prior slide for prioritisation context.

Often with: UseCaseGridOpportunityMatrixRoadmapTimeline

Preview

Wave 1 — four agreed flows

Wave 1 Finance

Supplier invoice intake

Automate three-way matching between supplier invoices, purchase orders, and goods receipts.

Impact: ≈ 220 hrs / month
Effort: M
TTV: 6 weeks

Owner: Maria Fernandes

Prop	Type	Notes
title	string	Required. Short use case name.Example: `Supplier invoice intake`
description	ReactNode	Required. One-paragraph description of what gets automated.
area	string	Optional. Functional area.Example: `Finance`
owner	string	Optional. Process owner.Example: `Maria Fernandes`
priority	"now" \| "next" \| "later"	Optional. Default: `next`. Wave assignment.Values: now, next, laterExample: `now`
impact	string	Optional. Estimated impact.Example: `≈ 220 hrs / month`
effort	string	Optional. Estimated effort, T-shirt size or duration.Example: `M`
timeToValue	string	Optional. Estimated time to first value.Example: `6 weeks`

Examples

<UseCaseGrid title="Wave 1 — four agreed flows">
  <UseCaseCard
    title="Supplier invoice intake"
    priority="now"
    area="Finance"
    owner="Maria Fernandes"
    impact="≈ 220 hrs / month"
    effort="M"
    timeToValue="6 weeks"
    description="Automate three-way matching between supplier invoices, purchase orders, and goods receipts."
  />
</UseCaseGrid>

<UseCaseGrid>

coreContentListPresentation

Grid wrapper for one to four `<UseCaseCard>` children on a single slide; auto 2×2 layout for multiple cards, staggered entrance on slide enter (client).

When to use: Recommended use cases slide after opportunity scoring. One card: single column. Two to four cards: two columns (2×2). Split across slides if you have more than four.

Often with: UseCaseCardOpportunityMatrixRoadmapTimeline

Preview

Wave 1 — four agreed flows

Workshop sign-off, May 2026

Wave 1 Finance

Supplier invoice intake

Automate three-way matching between supplier invoices, purchase orders, and goods receipts.

Impact: ≈ 220 hrs / month
Effort: M
TTV: 6 weeks

Owner: Maria Fernandes

Wave 1 Operations

Order acknowledgements

Auto-generate acknowledgement emails within five minutes.

Impact: ≈ 90 hrs / month
Effort: S
TTV: 4 weeks

Owner: James Okafor

Wave 1 People

HR ticket triage

Route and summarise employee requests before they reach a human inbox.

Impact: ≈ 38 min / ticket
Effort: S
TTV: 5 weeks

Owner: Sarah Chen

Wave 2 Sales

Contract renewal alerts

Surface accounts at risk 60 days before renewal with draft outreach.

Impact: ≈ 12 renewals / quarter
Effort: M
TTV: 8 weeks

Owner: Tom Bradley

Prop	Type	Notes
title	string	Optional. Slide heading above the grid.
description	string	Optional. Subtitle or wave note.
columns	1 \| 2	Optional. Override column count. Defaults to 1 for a single card, 2 for two to four.Values: 1, 2Example: `2`
children	ReactNode	Required. One to four <UseCaseCard> elements.
tween	object	Optional. Optional GSAP vars for card entrance.

Examples

<UseCaseGrid title="Wave 1 — four agreed flows" description="Workshop sign-off, May 2026">
  <UseCaseCard
    title="Supplier invoice intake"
    priority="now"
    area="Finance"
    owner="Maria Fernandes"
    impact="≈ 220 hrs / month"
    effort="M"
    timeToValue="6 weeks"
    description="Automate three-way matching between supplier invoices, purchase orders, and goods receipts."
  />
  <UseCaseCard
    title="Order acknowledgements"
    priority="now"
    area="Operations"
    owner="James Okafor"
    impact="≈ 90 hrs / month"
    effort="S"
    timeToValue="4 weeks"
    description="Auto-generate acknowledgement emails within five minutes."
  />
  <UseCaseCard
    title="HR ticket triage"
    priority="now"
    area="People"
    owner="Sarah Chen"
    impact="≈ 38 min / ticket"
    effort="S"
    timeToValue="5 weeks"
    description="Route and summarise employee requests before they reach a human inbox."
  />
  <UseCaseCard
    title="Contract renewal alerts"
    priority="next"
    area="Sales"
    owner="Tom Bradley"
    impact="≈ 12 renewals / quarter"
    effort="M"
    timeToValue="8 weeks"
    description="Surface accounts at risk 60 days before renewal with draft outreach."
  />
</UseCaseGrid>

<TeamMember>

coreContentListPresentation

One team member tile with avatar, name, role, department, and optional affiliation chip; compact when five or six cards share a grid.

When to use: Always inside `<TeamGrid>` on a slide. Up to six members per slide. Use `affiliation` to distinguish client, Lunnoa, and partner roles.

Often with: TeamGridPersonCardQuoteSlide

Preview

Delivery team

Maria Fernandes

Head of Finance

Client

Prop	Type	Notes
name	string	Required. Full name.Example: `Maria Fernandes`
role	string	Optional. Job title.Example: `Head of Finance`
department	string	Optional. Team or department.Example: `Finance`
avatarUrl	string	Optional. Optional headshot URL.
initials	string	Optional. Avatar fallback when no image.Example: `MF`
affiliation	"Client" \| "Lunnoa" \| "Partner"	Optional. Optional org chip.Values: Client, Lunnoa, PartnerExample: `Client`

Examples

<TeamGrid title="Delivery team">
  <TeamMember name="Maria Fernandes" role="Head of Finance" affiliation="Client" initials="MF" />
</TeamGrid>

<TeamGrid>

coreContentListPresentation

Grid wrapper for one to six `<TeamMember>` children on a single slide; auto 3×2 layout for large rosters, staggered entrance on slide enter (client).

When to use: Team introduction slide early in a deck, or a steering-group recap. One to three members: single row. Four: 2×2. Five to six: 3×2. Split across slides if you have more than six.

Often with: TeamMemberTitleSlideSectionSlide

Preview

Wave 1 delivery team

Client sponsors and Lunnoa leads

Maria Fernandes

Head of Finance

Finance

Client

James Okafor

Operations Manager

Operations

Client

Elena Vasquez

Engagement lead

Lunnoa

Tom Bradley

Commercial director

Client

Sarah Chen

People operations

Client

Alex Morgan

Solutions architect

Lunnoa

Prop	Type	Notes
title	string	Optional. Slide heading above the grid.
description	string	Optional. Subtitle or roster note.
columns	2 \| 3	Optional. Override auto column count.Values: 2, 3Example: `3`
children	ReactNode	Required. One to six <TeamMember> elements.
tween	object	Optional. Optional GSAP vars for card entrance.

Examples

<TeamGrid title="Wave 1 delivery team" description="Client sponsors and Lunnoa leads">
  <TeamMember name="Maria Fernandes" role="Head of Finance" department="Finance" affiliation="Client" initials="MF" />
  <TeamMember name="James Okafor" role="Operations Manager" department="Operations" affiliation="Client" initials="JO" />
  <TeamMember name="Elena Vasquez" role="Engagement lead" affiliation="Lunnoa" initials="EV" />
  <TeamMember name="Tom Bradley" role="Commercial director" affiliation="Client" initials="TB" />
  <TeamMember name="Sarah Chen" role="People operations" affiliation="Client" initials="SC" />
  <TeamMember name="Alex Morgan" role="Solutions architect" affiliation="Lunnoa" initials="AM" />
</TeamGrid>

<SpecList>

coreContentListPresentation

Rule-topped label/value definition list, for specs, meta, or a compact fact sheet.

When to use: A short list of facts (scope, dates, owners, constraints) that does not need a full table.

Preview

Engagement

Client: Acme Corp
Sponsor: COO
Duration: 6 weeks
Scope: Finance + Ops

Prop	Type	Notes
title	string	Optional. Heading above the list.
items	{ label: string; value: string }[]	Required. Label/value pairs in display order.
columns	1 \| 2	Optional. Default: `1`. Lay items out in one or two columns.Values: 1, 2

Examples

<SpecList
  title="Engagement"
  columns={2}
  items={[
    { label: "Client", value: "Acme Corp" },
    { label: "Sponsor", value: "COO" },
    { label: "Duration", value: "6 weeks" },
    { label: "Scope", value: "Finance + Ops" },
  ]}
/>

<IndexList>

coreAgendaListPresentation

Numbered index of 4-8 entries in a hairline-divided two-column grid; rows stagger in on slide enter (client).

When to use: An editorial "contents" or "trends at a glance" page — several short titled entries read together, not a left-to-right sequence (use ProcessSteps for that).

Often with: ProcessStepsTopicGridAgendaSlide

Preview

The index, in six entries

Spring 2026 · selected trends

01.

Slow software

Tools that opt out of the urgency contest by default.

02.

Domestic interfaces

Screens designed to live in living rooms.

03.

Hand-set print again

A return to letterpress and small-edition print.

04.

Receipts and ledgers

Information designed to be filed, not consumed.

Prop	Type	Notes
title	string	Optional. Heading above the list.
eyebrow	string	Optional. Small label opposite the title (e.g. "Spring 2026 · selected trends").
entries	{ title: string; description?: string }[]	Required. 4-8 entries in display order.
columns	1 \| 2	Optional. Default: `2`. Grid column count.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<IndexList
  title="The index, in six entries"
  eyebrow="Spring 2026 · selected trends"
  entries={[
    { title: "Slow software", description: "Tools that opt out of the urgency contest by default." },
    { title: "Domestic interfaces", description: "Screens designed to live in living rooms." },
    { title: "Hand-set print again", description: "A return to letterpress and small-edition print." },
    { title: "Receipts and ledgers", description: "Information designed to be filed, not consumed." },
  ]}
/>

<Ledger>

coreDataListPresentation

Dense numbered ledger/trend table with a name, description, status tag, and a directional delta per row; rows stagger in on slide enter (client).

When to use: A printed-ledger reading of several tracked items with a change indicator (trend report, KPI review, watchlist) — denser than DataTable's dashboard styling and presentation-native.

Often with: StatusMatrixRiskRowListTopMovers

Preview

Trend ledger, in long

All eight · with our reading on each

No.ItemReadingStatusChange

01.Slow softwareTools that opt out of urgency by default.Quiet · welcomed↑ 14 pts

02.Domestic interfacesScreens designed to live in living rooms.Warm · ambient↑ 9 pts

03.Quietly weird typeDisplay faces with one slightly off detail.Curious · alert— flat

Prop	Type	Notes
title	string	Optional. Heading above the table.
eyebrow	string	Optional. Small label opposite the title.
columnLabels	[string, string, string, string, string]	Optional. Default: `["No.", "Item", "Reading", "Status", "Change"]`. Header labels, in column order.
rows	{ name: string; description?: string; tag?: string; delta?: string; deltaDirection?: "up" \| "down" \| "flat" }[]	Required. Ledger rows in display order. deltaDirection colours the delta and picks the arrow glyph.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<Ledger
  title="Trend ledger, in long"
  eyebrow="All eight · with our reading on each"
  rows={[
    { name: "Slow software", description: "Tools that opt out of urgency by default.", tag: "Quiet · welcomed", delta: "14 pts", deltaDirection: "up" },
    { name: "Domestic interfaces", description: "Screens designed to live in living rooms.", tag: "Warm · ambient", delta: "9 pts", deltaDirection: "up" },
    { name: "Quietly weird type", description: "Display faces with one slightly off detail.", tag: "Curious · alert", delta: "flat", deltaDirection: "flat" },
  ]}
/>

<RiskRowList>

financeListDataPresentation

Risk watchlist with severity chip, one-line note, and owner; rows stagger in on slide enter (client).

When to use: Use for an IC red and amber slide or a portfolio watchlist intro. Four to eight risks is the sweet spot.

Preview

Risks

High
FX exposure on euro revenue
Hedge ratio under target by 18 points.
Treasury
Medium
Key-person dependency in finance
Successor named, knowledge transfer in flight.
CFO

Prop	Type	Notes
title	string	Optional. Default: `Risks`. Slide heading.
risks	{ title: string; severity: "low" \| "medium" \| "high"; note: string; owner?: string }[]	Required. Risk rows. Severity drives the chip colour.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<RiskRowList
  risks={[
    { title: "FX exposure on euro revenue", severity: "high", note: "Hedge ratio under target by 18 points.", owner: "Treasury" },
    { title: "Key-person dependency in finance", severity: "medium", note: "Successor named, knowledge transfer in flight.", owner: "CFO" }
  ]}
/>

<ThesisBullets>

financeListStatementPresentation

Investment thesis bullets with numbered chips; bullets stagger in from the left on slide enter (client).

When to use: Use for three to five thesis points on IC slide 2. Keep each bullet to one tight sentence.

Preview

Investment thesis

1
Top three operator in a structurally undersupplied UK community-care market.
2
Margin expansion runway from a measured pricing-policy reset under new CFO.
3
Three identified bolt-on targets at sub-6x EBITDA priced before year-end.

Prop	Type	Notes
title	string	Optional. Default: `Investment thesis`. Slide heading.
bullets	string[]	Required. Three to five thesis bullet strings.
tween	object	Optional. Optional GSAP vars for the bullet entrance.

Examples

<ThesisBullets
  bullets={[
    "Top three operator in a structurally undersupplied UK community-care market.",
    "Margin expansion runway from a measured pricing-policy reset under new CFO.",
    "Three identified bolt-on targets at sub-6x EBITDA priced before year-end."
  ]}
/>

<ICActionsSince>

financeListDataPresentation

Status of conditions or actions agreed at the previous IC; rows show status chip plus optional owner and stagger in on slide enter (client).

When to use: Use as IC slide 2 or 3 to show what has happened since the last meeting. Three to eight items.

Preview

Actions since last IC

DoneSign top three customer MSAs.CCO
In progressResolve pension surplus question.CFO
OpenHire VP Engineering.CEO
BlockedClose the Frankfurt acquisition.Corp dev

Prop	Type	Notes
title	string	Optional. Default: `Actions since last IC`. Slide heading.
items	{ text: string; status: "done" \| "in-progress" \| "open" \| "blocked"; owner?: string }[]	Required. Action rows; status drives chip colour.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<ICActionsSince
  items={[
    { text: "Sign top three customer MSAs.", status: "done", owner: "CCO" },
    { text: "Resolve pension surplus question.", status: "in-progress", owner: "CFO" },
    { text: "Hire VP Engineering.", status: "open", owner: "CEO" },
    { text: "Close the Frankfurt acquisition.", status: "blocked", owner: "Corp dev" }
  ]}
/>

<TopMovers>

financeDataListPresentation

Two-column top contributors and detractors to NAV or MOIC; rows stagger in on slide enter (client).

When to use: Use for a portfolio performance review slide. Three to five rows per side.

Preview

Top movers

Contributors

Lumen Health
EBITDA beat from pricing reset
+£14m
Atlas Software
ARR up 28% on enterprise wins
+£9m

Detractors

Northwind Logistics
Volume down on customer churn
-£6m
Pico Materials
Energy cost pass-through lag
-£3m

Prop	Type	Notes
title	string	Optional. Default: `Top movers`. Slide heading.
contributorsTitle	string	Optional. Default: `Contributors`. Left column heading.
detractorsTitle	string	Optional. Default: `Detractors`. Right column heading.
contributors	{ name: string; driver: string; value: string }[]	Required. Top contributors. Pre-format value (e.g. "+£12m", "+90 bps").
detractors	{ name: string; driver: string; value: string }[]	Required. Top detractors. Pre-format value with sign.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<TopMovers
  contributors={[
    { name: "Lumen Health", driver: "EBITDA beat from pricing reset", value: "+£14m" },
    { name: "Atlas Software", driver: "ARR up 28% on enterprise wins", value: "+£9m" }
  ]}
  detractors={[
    { name: "Northwind Logistics", driver: "Volume down on customer churn", value: "-£6m" },
    { name: "Pico Materials", driver: "Energy cost pass-through lag", value: "-£3m" }
  ]}
/>

<WatchlistPanel>

financeListDataPresentation

Portfolio company watchlist with company, issue, trend chip, and actions; rows stagger in on slide enter (client).

When to use: Use for a portfolio review slide that calls out the names needing attention. Three to six items keeps the slide readable.

Preview

Watchlist

Northwind LogisticsCustomer churn in EU southDeterioratingPricing review by 30 Jun.
Pico MaterialsMargin pressure from energyStableHedge programme expanded.
Atlas SoftwareSalesforce ramp slower than planImprovingNew CRO joins in Q3.

Prop	Type	Notes
title	string	Optional. Default: `Watchlist`. Slide heading.
items	{ company: string; issue: string; trend: "improving" \| "stable" \| "deteriorating"; actions: string }[]	Required. Watchlist rows; trend drives chip colour and arrow.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<WatchlistPanel
  items={[
    { company: "Northwind Logistics", issue: "Customer churn in EU south", trend: "deteriorating", actions: "Pricing review by 30 Jun." },
    { company: "Pico Materials", issue: "Margin pressure from energy", trend: "stable", actions: "Hedge programme expanded." },
    { company: "Atlas Software", issue: "Salesforce ramp slower than plan", trend: "improving", actions: "New CRO joins in Q3." }
  ]}
/>

<BroadsideFadeList>
broadsideListStatementPresentation
Stacked display words at fading opacities (max 3).
When to use: Before / during / after or staged narrative.
Preview
06
before
during
after
Prop Type Notes
number string Optional. Catalogue number.
title string Optional. Optional side title.
items string[] Required. Up to three words/phrases.
Examples
```
<BroadsideFadeList number="06" items={["before", "during", "after"]} />
```

Prop	Type	Notes
number	string	Optional. Catalogue number.
title	string	Optional. Optional side title.
items	string[]	Required. Up to three words/phrases.

<BroadsideList>

broadsideListPresentation

Slash-marked bullet list capped at three items.

When to use: Short takeaways in Broadside voice.

Preview

Rules07

three rules only

Type is the image
One accent colour
No shadows

Prop	Type	Notes
chromeLeft	string	Optional. Top chrome left.
chromeRight	string	Optional. Top chrome right.
title	string	Optional. Headline.
items	string[]	Required. Up to three bullets.
footLeft	string	Optional. Footer left.
footRight	string	Optional. Footer right.

Examples

<BroadsideList chromeLeft="Rules" chromeRight="07" title="three rules only" items={["Type is the image", "One accent colour", "No shadows"]} />

Preview

Examples

Preview

Programme health

Examples

Preview

Blockers

Asks

Examples

Preview

Next 30 days

Examples

Preview

Wave 1 — four agreed flows

Supplier invoice intake

Examples

Preview

Wave 1 — four agreed flows

Supplier invoice intake

Order acknowledgements

HR ticket triage

Contract renewal alerts

Examples

Preview

Delivery team

Maria Fernandes

Examples

Preview

Wave 1 delivery team

Maria Fernandes

James Okafor

Elena Vasquez

Tom Bradley

Sarah Chen

Alex Morgan

Examples

Preview

Engagement

Examples

Preview

The index, in six entries

Examples

Preview

Trend ledger, in long

Examples

Preview

Risks

Examples

Preview

Investment thesis

Examples

Preview

Actions since last IC

Examples

Preview

Top movers

Contributors

Detractors

Examples

Preview

Watchlist

Examples

Preview

Examples

Preview

three rules only

Examples