Component library

Showing 4 components with role cta.

<DecisionCallout>

financeStatementCTAPresentation

Single ask with question, recommendation, and optional vote options; the card scales in on slide enter (client).

When to use: Use for the closing IC slide before the appendix when a single decision needs to land.

Preview

Decision required

Approve the additional £8m equity injection at par to fund Wave 2 build-out?

Recommendation

Approve, conditional on signed MSAs with the top three Wave 1 customers by 30 June.

Approve
Approve with conditions
Defer

Prop	Type	Notes
question	string	Required. The decision being asked of the committee.
recommendation	string	Required. Recommended answer in one sentence.
decisionLabel	string	Optional. Default: `Decision required`. Pill text above the question.
options	string[]	Optional. Optional pill list of formal vote options (e.g. Approve, Defer).
tween	object	Optional. Optional GSAP vars for the card entrance.

Examples

<DecisionCallout
  question="Approve the additional £8m equity injection at par to fund Wave 2 build-out?"
  recommendation="Approve, conditional on signed MSAs with the top three Wave 1 customers by 30 June."
  options={["Approve", "Approve with conditions", "Defer"]}
/>

<VoteSlide>

financeDataCTAPresentation

Formal IC resolution slide with numbered resolutions and optional abstentions note; resolutions stagger in on slide enter (client).

When to use: Use as the formal closing slide before the appendix when a vote is recorded.

Preview

For consideration and vote

Resolutions

1
Approve the additional £8m equity injection at par.
2
Authorise the CFO to execute the amended SHA on these terms.

Member B recused per conflicts policy.

Prop	Type	Notes
title	string	Optional. Default: `Resolutions`. Slide heading.
voteLabel	string	Optional. Default: `For consideration and vote`. Small label above the title (matches IC conventions).
resolutions	{ id: string; text: string }[]	Required. Resolution rows. id is the short label (e.g. "1", "1A").
abstentionsNote	string	Optional. Optional small note about abstentions or recusals.
tween	object	Optional. Optional GSAP vars for the row entrance.

Examples

<VoteSlide
  resolutions={[
    { id: "1", text: "Approve the additional £8m equity injection at par." },
    { id: "2", text: "Authorise the CFO to execute the amended SHA on these terms." }
  ]}
  abstentionsNote="Member B recused per conflicts policy."
/>

<PlanComparisonGrid>

expressiveCompareCTAPresentation

Side-by-side pricing or plan comparison cards with feature lists and optional featured tier highlight.

When to use: SaaS pricing, service tiers, or licence options. Typically three tiers; mark the recommended plan with featured: true.

Preview

Pricing

Choose a plan

Starter

£0 /mo

For evaluation.

5 users
Community support

Start free

Team

£29 /mo

For growing teams.

Unlimited workflows
SSO

Book a demo

Enterprise

Custom

For regulated environments.

Dedicated support
Audit logs

Contact sales

Prop	Type	Notes
label	string	Optional. Eyebrow above the section title.
title	string	Optional. Section headline.
tiers	{ name: string; price: string; priceSuffix?: string; description?: string; features: string[]; featured?: boolean; cta?: string }[]	Required. Plan cards (typically three). Pre-format price strings with currency.
tween	object	Optional. Optional GSAP vars for card entrance.

Examples

<PlanComparisonGrid
  label="Pricing"
  title="Choose a plan"
  tiers={[
    { name: "Starter", price: "£0", priceSuffix: "/mo", description: "For evaluation.", features: ["5 users", "Community support"], cta: "Start free" },
    { name: "Team", price: "£29", priceSuffix: "/mo", description: "For growing teams.", features: ["Unlimited workflows", "SSO"], featured: true, cta: "Book a demo" },
    { name: "Enterprise", price: "Custom", description: "For regulated environments.", features: ["Dedicated support", "Audit logs"], cta: "Contact sales" }
  ]}
/>

<ClosingSlide>

expressiveOutroCTAPresentation

Closing slide with headline, supporting copy, and primary/secondary call-to-action labels.

When to use: Final slide: next step, demo request, or contact prompt.

Preview

Ready for a pilot?

We can scope the first workflow in a single engagement week.

Book a demoDownload the brief

Prop	Type	Notes
label	string	Optional. Eyebrow above the headline.
title	string	Required. Closing headline.
body	string	Optional. Supporting sentence.
primaryCta	string	Optional. Primary button label.
secondaryCta	string	Optional. Secondary button label.

Examples

<ClosingSlide
  title="Ready for a pilot?"
  body="We can scope the first workflow in a single engagement week."
  primaryCta="Book a demo"
  secondaryCta="Download the brief"
/>