--color-body-secondary, excerpt in the lighter step, reading time back to secondary.
Content · 7 of 13
The insight card. Its 2.25rem radius is a step that exists nowhere else in
the token file — between --radius-card (1.5rem) and
--radius-custom (2.75rem).
| Prop | Type | Notes |
|---|---|---|
| article * | ArticleSummary | The seven fields the component reads, declared in the component itself: slug, cover.url, cover.name, date, locale, title, excerpt, readingtime. TypeScript is structural, so a generated CMS entity satisfies it unchanged — but the component carries no CMS schema. |
| resolveImage | (url: string) => string | CMS media URLs arrive relative (uploads/x.png). The caller supplies the resolver; pass nothing when the URLs are already absolute, and the component uses them as they are. |
| basePath | string | Prefix the slug is appended to. The caller owns where its articles live. |
| className | string | Appended to the anchor. Note the prop is className, not class — unlike Button. |
The whole card is one anchor. Hovering changes nothing — in current source the hover state re-applies the resting surface (see findings).
The heading level is hard-coded to <h2>.
Source renders the article title as an h2 with no way to
override it. On the insights index every card emits an h2,
which sit as siblings of the page's own section headings and flatten the
document outline. In a carousel of six, a screen reader reports six
same-level headings with no grouping. The mounted cards above really do
emit h2s — this page inherits the flattened outline it is
reporting.
The hover lift is a no-op.
The anchor carries bg-surface-secondary hover:bg-surface-secondary
— the hover re-applies the resting token, so transition-colors
and cursor-pointer promise an affordance that never comes.
An earlier revision lifted to a lighter surface on hover; either restore
that (hover:bg-surface-tertiary) or drop the transition.
cover.name is used as alt text.
:alt="article.cover.name" puts the CMS filename into the
accessible name — typically something like
bim-export-hero.png. Since the image is decorative next to a
title that already carries the meaning, alt="" would be more
correct than a filename read aloud.
The date can render empty.
formattedDate now guards its inputs — it returns ''
when locale or date is missing (an earlier revision
let undefined reach the formatter). An article with no date
therefore renders an empty <time> element rather than
throwing: silent, but structurally odd markup.
Radius 2.25rem is undeclared as a token.
It is written inline as rounded-[2.25rem]. The system has this
as --radius-article; the component does not use it.