Component library

Showing 9 components 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" />

<TeamMember>

sharedListContentNarrative

One team member tile with avatar, name, role, department, and optional affiliation badge.

When to use: Always inside `<TeamGrid>`. Use for delivery teams, workshop squads, or mixed client/Lunnoa rosters (up to six per grid).

Often with: TeamGridPersonCard

Preview

Maria Fernandes

Head of Finance

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; defaults to initials from name.Example: `MF`
affiliation	"Client" \| "Lunnoa" \| "Partner"	Optional. Optional org badge for mixed teams.Values: Client, Lunnoa, PartnerExample: `Client`

Examples

<TeamMember name="Maria Fernandes" role="Head of Finance" department="Finance" affiliation="Client" initials="MF" />

<TeamGrid>

sharedListContentNarrative

Grid of up to six TeamMember cards with optional heading.

When to use: Delivery team, workshop squad, or steering group in document reports. Use 3 columns by default; 2 for wider cards.

Often with: TeamMemberPersonCard

Preview

Wave 1 delivery team

Client sponsors and Lunnoa delivery leads

Maria Fernandes

Head of Finance

Finance

Client

James Okafor

Operations Manager

Operations

Client

Elena Vasquez

Engagement lead

Lunnoa

Prop	Type	Notes
title	string	Optional. Section heading above the grid.
description	string	Optional. Subtitle or roster note.
columns	2 \| 3	Optional. Default: `3`. Desktop column count.Values: 2, 3Example: `3`
children	ReactNode	Required. One to six <TeamMember> elements.

Examples

<TeamGrid title="Wave 1 delivery team" description="Client sponsors and Lunnoa delivery 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" department="Lunnoa" affiliation="Lunnoa" initials="EV" />
</TeamGrid>

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.

<DataTable>

sharedDataListDashboard

Card-style data grid with optional status tabs, sortable columns, status badges, row checkboxes (illustrative), filter affordance, and client-side pagination.

When to use: Use for tabular report appendices (delivery lists, backlog queues, milestone trackers) where readers benefit from filtering and paging without leaving the report. Keep row counts modest for print; prefer `pageSize` 5–10. In SEO reports, use it for page-level appendices (top pages by clicks, redirect maps, content inventory); for keyword rankings prefer the purpose-built <KeywordRankingTable>.

Preview

Delivery activities

Track your recent shipping activities

Select					Route		Status
	#324112	Electronics	Acme	10 Apr 2028 2:15 pm	Berlin–Milan	$1,250.00	Delivered

Showing 1 to 1 of 1

Prop	Type	Notes
title	string	Required. Table card title.Example: `Delivery activities`
description	string	Optional. Subtitle under the title.Example: `Track your recent shipping activities`
columns	{ key: string; label: string; sortable?: boolean }[]	Required. Column definitions; `key` matches keys on each row object.
rows	Record<string, string>[]	Required. Row data; values are strings so they serialise cleanly inside MDX.
tabs	{ id: string; label: string }[]	Optional. Optional filter tabs. Include `{ id: "all", label: "All" }` first for an unfiltered view. Other `id` values slug-match `tabFilterKey` on each row (e.g. status "In Transit" matches tab `in-transit`).
tabFilterKey	string	Optional. Default: `status`. Row field used when filtering by tab.
badgeColumnKey	string	Optional. Default: `status`. Column whose cells render as coloured status pills.
showCheckboxes	boolean	Optional. Default: `true`. Show a leading illustrative checkbox column.
showFilterButton	boolean	Optional. Default: `true`. Show a secondary Filter button (illustrative; no sheet wired).
filterButtonLabel	string	Optional. Default: `"Filter"`. Label for the filter button.
pageSize	number	Optional. Default: `5`. Rows per page; set `0` to disable pagination footer.

Examples

<DataTable
    title="Delivery activities"
    description="Track your recent shipping activities"
    tabs={[
        { id: "all", label: "All" },
        { id: "delivered", label: "Delivered" },
        { id: "in-transit", label: "In transit" },
        { id: "pending", label: "Pending" },
        { id: "processing", label: "Processing" }
    ]}
    columns={[
        { key: "orderId", label: "Order ID", sortable: true },
        { key: "category", label: "Category", sortable: true },
        { key: "company", label: "Company", sortable: true },
        { key: "arrival", label: "Arrival", sortable: true },
        { key: "route", label: "Route", sortable: false },
        { key: "price", label: "Price", sortable: true },
        { key: "status", label: "Status", sortable: false }
    ]}
    rows={[{ orderId: "#324112", category: "Electronics", company: "Acme", arrival: "10 Apr 2028 2:15 pm", route: "Berlin–Milan", price: "$1,250.00", status: "Delivered" }]}
/>

<RebalanceTradeList>

financeDataListDashboard

Ordered list of proposed rebalance trades with buy/sell/hold chips, formatted amounts, optional weight before/after, and optional turnover footer.

When to use: Use after an allocation drift review to show the concrete trades required to return to target. Keep amounts pre-formatted strings (currency or % of NAV).

Often with: AllocationDriftChartSimpleDataTableDataTable

Preview

Proposed rebalance trades

To restore policy weights as of 31 May 2026

Sell
MSCI World ETF
Trim overweight global equity sleeve
£420,000
22.1% → 20.0%
Buy
Sterling IG credit fund
£280,000
23.4% → 25.0%
Hold
Private equity co-invest
Within tolerance; no trade required
—

Estimated turnover3.2% of NAV

Prop	Type	Notes
title	string	Optional. Section heading.
description	string	Optional. Muted subheading.
trades	{ asset: string; action: "buy" \| "sell" \| "hold"; amount: string; weightBefore?: string; weightAfter?: string; note?: string }[]	Required. Proposed trades in execution order.
turnoverLabel	string	Optional. Footer label, e.g. "Estimated turnover".
turnoverValue	string	Optional. Footer value; shown only when both turnover props are set.

Examples

<RebalanceTradeList
  title="Proposed rebalance trades"
  description="To restore policy weights as of 31 May 2026"
  trades={[
    { asset: "MSCI World ETF", action: "sell", amount: "£420,000", weightBefore: "22.1%", weightAfter: "20.0%", note: "Trim overweight global equity sleeve" },
    { asset: "Sterling IG credit fund", action: "buy", amount: "£280,000", weightBefore: "23.4%", weightAfter: "25.0%" },
    { asset: "Private equity co-invest", action: "hold", amount: "—", note: "Within tolerance; no trade required" }
  ]}
  turnoverLabel="Estimated turnover"
  turnoverValue="3.2% of NAV"
/>

<KeywordRankingTable>

seoDataListDashboard

Keyword ranking table with SERP position, position change arrows (green up / red down), monthly volume, colour-coded difficulty, search-intent chips, and the ranking URL.

When to use: Use for the core keyword evidence in an SEO report: current rankings, movers since the last crawl, or a target keyword list. Keep to 8–15 rows per table for print; split by topic cluster if longer. Omit `position` (or set 0) for keywords not ranking in the top 100.

Often with: SerpPositionDistributionOpportunityMatrixDataTable

Preview

Priority keywords — current rankings

Keyword	Position	Change	Volume / mo	Difficulty	Intent	URL
workflow automation software	8	6	2,400	68	Commercial	/platform
ai agent platform	12	1	1,900	72	Commercial	/platform/agents
invoice automation	>100	–	3,600	55	Transactional	/solutions/finance

Source: Ahrefs, 14 Jun 2026, UK desktop

Prop	Type	Notes
title	string	Optional. Table heading.Example: `Priority keywords — current rankings`
description	string	Optional. Muted subheading.
rows	{ keyword: string; position?: number; previousPosition?: number; volume?: string; difficulty?: number; intent?: "informational" \| "navigational" \| "commercial" \| "transactional"; url?: string }[]	Required. One row per keyword. Change is derived from previousPosition − position (positive = improved). difficulty is 0–100.
sourceNote	string	Optional. Caption below the table.Example: `Source: Ahrefs, 14 Jun 2026, UK desktop`

Examples

<KeywordRankingTable
    title="Priority keywords — current rankings"
    sourceNote="Source: Ahrefs, 14 Jun 2026, UK desktop"
    rows={[
        { keyword: "workflow automation software", position: 8, previousPosition: 14, volume: "2,400", difficulty: 68, intent: "commercial", url: "/platform" },
        { keyword: "ai agent platform", position: 12, previousPosition: 11, volume: "1,900", difficulty: 72, intent: "commercial", url: "/platform/agents" },
        { keyword: "invoice automation", volume: "3,600", difficulty: 55, intent: "transactional", url: "/solutions/finance" }
    ]}
/>

<SeoAuditChecklist>

seoDataListDashboard

Technical audit checklist: one row per check with a pass / warn / fail / info status chip, affected count (pages or URLs), and a one-line remediation hint. The header summarises fail/warn/pass counts.

When to use: Use to report crawl findings (indexability, meta data, canonicals, structured data, hreflang) in the technical section of an SEO report. Group long audits into several checklists with `groupLabel` rather than one very long list. Every fail should map to a `<Recommendation>` later in the report.

Often with: CoreWebVitalsCardPillarScoreCardRecommendation

Preview

Crawl audit — indexability

Screaming Frog crawl of 1,240 HTML pages, 14 Jun 2026

1 fail1 warning1 pass

Parameter URLs consuming crawl budget
Faceted navigation generates indexable parameter combinations; add canonical + robots rules.
3,100 URLsFail
Missing meta descriptions
Concentrated in the blog archive.
34 pagesWarning
XML sitemap valid and referenced in robots.txt
Pass
Structured data on product pages
No Product schema yet; opportunity rather than defect.
0 pagesInfo

Prop	Type	Notes
title	string	Optional. Card heading.Example: `Crawl audit — indexability`
description	string	Optional. Muted subheading, e.g. crawler and scope.
groupLabel	string	Optional. Small uppercase band above the list for grouping.Example: `Indexability`
items	{ check: string; status: "pass" \| "warn" \| "fail" \| "info"; affected?: string; detail?: string }[]	Required. One row per audit check, most severe first.

Examples

<SeoAuditChecklist
    title="Crawl audit — indexability"
    description="Screaming Frog crawl of 1,240 HTML pages, 14 Jun 2026"
    items={[
        { check: "Parameter URLs consuming crawl budget", status: "fail", affected: "3,100 URLs", detail: "Faceted navigation generates indexable parameter combinations; add canonical + robots rules." },
        { check: "Missing meta descriptions", status: "warn", affected: "34 pages", detail: "Concentrated in the blog archive." },
        { check: "XML sitemap valid and referenced in robots.txt", status: "pass" },
        { check: "Structured data on product pages", status: "info", affected: "0 pages", detail: "No Product schema yet; opportunity rather than defect." }
    ]}
/>

Narrative

Preview

Examples

Preview

Maria Fernandes

Examples

Preview

Wave 1 delivery team

Maria Fernandes

James Okafor

Elena Vasquez

Examples

Dashboard

Preview

Supplier invoice intake

Examples

Preview

Supplier invoice intake

Order acknowledgements

Examples

Preview

Delivery activities

Examples

Preview

Proposed rebalance trades

Examples

Preview

Priority keywords — current rankings

Examples

Preview

Crawl audit — indexability

Examples