VexellDocs · v1.5

AI primitive

CitationCard

Inline citation chip with source title, optional URL, page anchor and confidence percentage. Anchors a generated answer back to its sources.

Usage

Pick your edition with the tabs. Selection syncs across all docs.

tsx
import { CitationCard } from '@/components/molecules'

<CitationCard
  index={1}
  title="Q3 spec.pdf"
  href="https://example.com/spec.pdf"
  page={12}
  confidence={0.92}
/>

Props

Same surface in both editions; HTML version exposes equivalents through Alpine x-data.

PropTypeDefaultDescription
indexnumberBracketed index shown next to the title (e.g. [1]).
titlestringSource title.
hrefstringOptional link to the source.
pagenumberOptional page anchor.
confidencenumber0–1 score; rendered as a colored percentage chip.

Accessibility

  • role

    Card renders as <a> when href is provided, <span> otherwise.

  • contrast

    Confidence chip and percentage meet WCAG AA in light + dark.

Read next