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"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
EngineeringHow we cut landing page build time from days to hours by treating sections as installable units.
import { Card5 } from "@/components/beste/component/card5";
<Card5
src="https://images.unsplash.com/photo-1781902834597-25a42a64b3c9?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
category="Engineering"
title="Shipping faster with a component registry"
excerpt="How we cut landing page build time from days to hours by treating sections as installable units."
authorName="Jane Posford"
authorSrc="https://i.pravatar.cc/64?img=26"
date="Jun 12, 2026"
readTime="6 min read"
href="#"
/>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 |
We rebuilt our marketing site in a weekend. The blocks are clean, accessible, and the code reads like we wrote it ourselves.
A testimonial card with star rating, quote, and author row for reviews and social proof sections.
A portfolio card with a full bleed image, hover zoom, and gradient title overlay for work showcases.
A photo stack card whose tucked prints fan out on hover for albums, galleries, and case studies.
A 3D book cover card that swings open on hover to reveal page edges for ebooks, guides, and lead magnets.
