A source preview with a title, excerpt, and destination.
import { CitationCard } from '@vrum/ui';
<CitationCard
href={"https://d3js.org/"}
title={"D3 documentation"}
domain={"d3js.org"}
number={1}
snippet={"Tools for creating data visualizations with web standards."}
date={"Oct 7, 2026"}
size={"md"}
external={true}
/>| Prop | Type | Default | Description |
|---|---|---|---|
href* | string | none | href configuration. |
title* | string | none | Heading shown above the content. |
size | "sm" | "md" | "md" | Size of the component. |
favicon | React.ReactNode | none | favicon configuration. |
domain | string | none | domain configuration. |
number | number | none | number configuration. |
snippet | string | none | snippet configuration. |
date | string | none | date configuration. |
external | boolean | true | external configuration. |
type | string | none | type configuration. |
defaultChecked | boolean | none | default checked configuration. |
defaultValue | string | number | readonly string[] | none | Initial value for an uncontrolled component. |
autoFocus | boolean | none | auto focus configuration. |
className | string | none | Additional CSS classes. |
id | string | none | id configuration. |
style | CSSProperties | none | Inline style overrides. |
aria-invalid | boolean | "false" | "true" | "grammar" | "spelling" | none | Indicates the entered value does not conform to the format expected by the application. |
aria-label | string | none | Defines a string value that labels the current element. |
children | ReactNode | none | Content rendered inside the component. |
onFocus | FocusEventHandler<HTMLAnchorElement> | none | on focus configuration. |
onBlur | FocusEventHandler<HTMLAnchorElement> | none | on blur configuration. |
onChange | ChangeEventHandler<HTMLAnchorElement, Element> | none | Called when the input value changes. |
onSubmit | SubmitEventHandler<HTMLAnchorElement> | none | Called when the form is submitted. |
onKeyDown | KeyboardEventHandler<HTMLAnchorElement> | none | on key down configuration. |
onClick | MouseEventHandler<HTMLAnchorElement> | none | Called when the control is activated. |
onSelect | ReactEventHandler<HTMLAnchorElement> | none | on select configuration. |