SourceCard
StableA numbered link card for one source.
Also known as source, reference card, link card, citation card
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Source list
<ol className="grid w-full max-w-xl gap-2 sm:grid-cols-2">
<SourceCard source={{ id: 1, title: "Quarterly results", url: "https://example.com/results", domain: "example.com", snippet: "Revenue grew in every region compared with last year." }} />
<SourceCard source={{ id: 2, title: "Market overview", url: "https://example.org/market", domain: "example.org" }} />
</ol>The numbers match the small numbers in the text.
When to use it
One numbered source that an answer drew on. The number matches the citation in the text, so people can check where a claim came from.
Made of: Number marker · Title · Website · Excerpt
Use it for
- The list of sources under a reply.
- A place for citation markers in the text to jump to.
Not for
- The marker inside the sentence itself: use CitationMarker.
- A whole set of sources laid out in columns: use SourceList.
Do and avoid
Do
- Put cards in a numbered list so they match the small numbers in the text.
- Keep numbers steady and matching the CitationMarkers.
- Add an excerpt when the title alone is unclear.
Avoid
- Do not use lime for text. Here it only fills the small number circle.
- Do not leave the website blank. It tells people where the link goes.
- Do not use it outside a list.
On a phone
- The whole card is one link that opens in a new tab, so the tap target is the full card.
- The title is cut to one line and the snippet to two lines, so every card stays short.
- Render it inside a list that sets the columns. The card itself fills the width it is given.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| sourcerequired | Source | none | Object with id (number), title (string), url (string), domain (string) and snippet (string, optional). The id forms the li anchor source-{id}. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one SourceCard switches all of this from its properties panel, across 4 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| State | Hover, Pressed and Focus come from the browser. | Default, Hover, Pressed, Focus |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- hover
- The card gets a stronger border and a soft background under the pointer.
- focus
- A visible focus ring appears when you reach the card link with the keyboard.
- truncated
- A long title is cut to one line and a long snippet to two lines.
Tokens
Change one of these and every part that uses it follows.
--lime--border--border-strong--surface--surface-sunken--fg-subtle--radius-card
Built in
- The whole card is one link. Screen readers read the number, title, website and excerpt in order.
- Long titles and excerpts are cut short on screen, but screen readers still read all of it.
- Each card carries an anchor for its number, so citation markers can jump to it.
- The rise-in motion stops when people turn off motion in their system settings.
What you need to do
- Put cards in a numbered list (ol), so screen readers hear the count.
- Say in the nearby text that sources open in a new tab.
- Give every source its own number, matching its citation marker.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide