Component library

Showing 3 components in the workshop kit with role list.

Narrative

<PersonCard>

workshopListQuoteNarrative

Contributor attribution card.

When to use: Use in contributor or participant sections to credit interviewees, sponsors, and reviewers.

Preview

Maria Fernandes

Head of Finance · Finance

Interviewee

Prop	Type	Notes
name	string	Required. Person's full name.Example: `Maria Fernandes`
role	string	Optional. Job title.Example: `Head of Finance`
department	string	Optional. Team or department.Example: `Finance`
contributedAs	"Interviewee" \| "Participant" \| "Sponsor" \| "Reviewer"	Optional. How the person contributed to the report.Values: Interviewee, Participant, Sponsor, ReviewerExample: `Interviewee`

Examples

<PersonCard name="Maria Fernandes" role="Head of Finance" department="Finance" contributedAs="Interviewee" />

Dashboard

<UseCaseCard>

workshopContentListDashboard

One use case tile with priority, area, owner, impact, effort, and time-to-value.

When to use: Use to surface recommended automation use cases. Always inside <UseCaseGrid>.

Often with: UseCaseGrid

Preview

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

<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>
workshopContentListDashboard
Grid of UseCaseCards.
When to use: Wrap recommended use cases together. Use 2 columns by default; 3 only if you have many small cards.
Often with: UseCaseCard
Preview
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
Prop Type Notes
columns 2 | 3 Optional. Default: 2. Desktop column count.Values: 2, 3Example: 2
children ReactNode Required. One or more <UseCaseCard> elements.
Examples
```
<UseCaseGrid columns={2}>
    <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."
    />
</UseCaseGrid>
```

Prop	Type	Notes
columns	2 \| 3	Optional. Default: `2`. Desktop column count.Values: 2, 3Example: `2`
children	ReactNode	Required. One or more <UseCaseCard> elements.

Narrative

Preview

Examples

Dashboard

Preview

Supplier invoice intake

Examples

Preview

Supplier invoice intake

Order acknowledgements

Examples