Cards

Overview

Document.Annotation.Sidebar.Card renders one annotation and provides card context to its subcomponents. The default card includes author metadata, editable annotation text, and hover actions.

Usage

<Document.Annotation.Sidebar.Card annotation={annotation} />

<Document.Annotation.Sidebar.Card annotation={annotation}>
  <Document.Annotation.Sidebar.Card.Header />
  <Document.Annotation.Sidebar.Card.Citation />
  <Document.Annotation.Sidebar.Card.Textarea />
  <Document.Annotation.Sidebar.Card.Footer>
    <Document.Annotation.Sidebar.Card.Timestamp />
  </Document.Annotation.Sidebar.Card.Footer>
</Document.Annotation.Sidebar.Card>

Examples

Default

<Document.Annotation.Sidebar.Card annotation={annotation} />

Active

<Document.Annotatable
  activeAnnotationId={annotation.id}
  annotations={[annotation]}
  onAnnotationCreate={handleCreate}
  onAnnotationUpdate={handleUpdate}
  onAnnotationDelete={handleDelete}
>
  <Document.Annotation.Sidebar.Card annotation={annotation} />
</Document.Annotatable>

Subcomponents

Document.Annotation.Sidebar.Card.Header

Displays the annotation author. If the author name is Mobius, the Mobius mark is shown instead of an avatar.

Document.Annotation.Sidebar.Card.Textarea

Inline editable annotation text.

Document.Annotation.Sidebar.Card.Citation

Displays the cited document text.

Document.Annotation.Sidebar.Card.Menu

Hover actions for editing or deleting an annotation.

Document.Annotation.Sidebar.Card.Footer

Footer container with contextual separator styling.

Additional Subcomponents