Component library

Narrative

• <Quote>

  sharedQuoteNarrative

  Pull-quote from an interview, with attribution.

  When to use: Use for high-signal, verbatim statements that capture how stakeholders actually framed a problem. One quote per finding is common.

  Preview

  “

  We do the same five-step approval on every supplier invoice. The five steps make sense. Doing them all by hand five hundred times a month does not.

  ”

  Prop	Type	Notes
  attribution	string	Optional. Person's name.Example: Maria Fernandes
  role	string	Optional. Their role and/or department.Example: Head of Finance
  children	ReactNode	Required. The quoted text. Do not include surrounding quotation marks — the component adds them.

  Examples

  <Quote attribution="Maria Fernandes" role="Head of Finance">
      We do the same five-step approval on every supplier invoice. The five
      steps make sense. Doing them all by hand five hundred times a month
      does not.
  </Quote>

• <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" />