EngineeringShipping faster with a component registry
How we cut landing page build time from days to hours by treating sections as installable units.
Article Card
EngineeringEngineeringHow we cut landing page build time from days to hours by treating sections as installable units.
An article card with cover image, category chip, excerpt, and author row for blog and news grids.
The import and the props worth knowing about, in one place.
import { Card5 } from "@/components/beste/component/card5";
// The whole card becomes a link when href is set.
<Card5
src="/blog/registry-cover.jpg"
category="Engineering"
title="Shipping faster with a component registry"
excerpt="How we cut landing page build time from days to hours."
authorName="Selin Aksoy"
authorSrc="/avatars/selin.jpg"
date="Jun 12, 2026"
readTime="6 min read"
href="/blog/component-registry"
/>
<Card5
src="/blog/design-tokens.jpg"
category="Design"
title="Design tokens that survive a rebrand"
authorName="Mert Aydin"
date="May 28, 2026"
tone="foreground" // category chip: "primary" (default) | "foreground"
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Hover | The card lifts and the image scales inside its frame; `motion-reduce` turns the movement off. |
|---|
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
src* | string | — | Cover image URL |
category | string | — | Category chip above the title |
title* | string | — | Article title |
excerpt | string | — | Short excerpt under the title |
authorName* | string | — | Author name |
authorSrc | string | — | Author avatar URL. Falls back to an initial circle when omitted |
date* | string | — | Publish date (e.g. "Jun 12, 2026") |
readTime | string | — | Read time (e.g. "6 min read") |
href | string | — | If set, the whole card links to this href |
tone | "primary" | "foreground" | — | Category chip color |
className | string | — | Additional classes merged onto the root |
