Insight Card

A compact card for highlighting a single insight — a key fact, a stat, a takeaway, or a "did you know" moment. Often used in dashboards, summary panels, or alongside primary content. Smaller and more text-dense than LearningPathCard; purely presentational with no motion.

Preview

42%

Reduction in wall-clock

Switching from full attention to flash-attention on a 4k-context model recovered nearly half the forward-pass time.

Customize

Tone

toneaccent

Slots

show value

show footer

Installation

npx shadcn@latest add https://craftbits.dev/r/insight-card.json

Usage

import { InsightCard } from "@craft-bits/core";
 
<InsightCard tone="accent" value="42%" title="Reduction in wall-clock">
  Switching from full attention to flash-attention on a 4k-context model
  recovered nearly half the forward-pass time.
</InsightCard>

Quote / pull-quote with citation:

<InsightCard
  title="Attention is just a weighted average."
  footer="— Vaswani et al., 2017"
>
  Every other piece of the transformer machinery is in service of computing
  the weights well.
</InsightCard>

Heads-up with icon and warning tone:

import { TriangleAlert } from "lucide-react";
 
<InsightCard
  tone="warning"
  title="Watch the temperature"
  icon={<TriangleAlert size={16} />}
>
  Sampling at temperature 0 collapses diversity — useful for unit tests,
  dangerous for benchmarks.
</InsightCard>

Anatomy

Left rail — a 3px tinted edge driven by tone. Four tones: default (neutral), accent (brand), success (green), warning (amber).
Icon — optional 5×5 icon slot at top-left. Inherits the tone color via currentColor so a lucide-react icon picks up the rail color automatically.
Value — optional 2rem serif headline with tabular-nums. Designed for stats ("42%"), counts ("3.2×"), or pull-quote first words.
Title — optional serif italic heading above the body.
Body — the main reading content. Wraps with [text-wrap:pretty].
Footer — optional small monospace-caps row for sources, citations, or attribution.

Props

Prop	Type	Default	Description
`tone`	`'default' \| 'accent' \| 'success' \| 'warning'`	`'default'`	Semantic color of the left rail, icon, and value.
`title`	`ReactNode`	—	Heading above the body. Serif italic.
`value`	`ReactNode`	—	The big featured number/word. Serif `2rem`, `tabular-nums`.
`icon`	`ReactNode`	—	Leading icon (top-left). Inherits tone via `currentColor`.
`footer`	`ReactNode`	—	Small mono-caps source / citation row.
`children`	`ReactNode`	required	The body.
`className`	`string`	—	Merged onto the root `<div>` via `cn()`.

The native HTML title attribute is replaced by the ReactNode title prop via Omit<HTMLAttributes<HTMLDivElement>, 'title'>.

Accessibility

Renders as a plain <div> — no implicit role. Wrap in <article> or supply role="region" aria-labelledby="…" when the card is a discrete landmark.
The icon is aria-hidden="true" so screen readers read only the textual content.
All four tone × --cb-bg-elevated combinations meet WCAG AA contrast in the default theme; verify with custom palettes.
No motion — safe for prefers-reduced-motion: reduce.

Credits

Extracted from: algoflashcards (src/platform/ui/InsightCard.tsx). Restructured the original flat icon-plus-text row into a stacked card with optional serif value / title / icon / footer slots, generalized the per-instance iconColor prop into a four-tone CVA variant, and dropped the project-specific index prop.