Brand components

Story card

kicker, headline, lede and stack under a heavy rule, with an optional 96px 9:16 ink thumbnail.

Work · Sep 2025 – Present

Ten agents, one pipeline

A document pipeline in which each agent owns one stage, so that every draft can be traced back to its source.

Java
Spring Boot
PostgreSQL

Ink drawing: a folded newspaper beside a cup of coffee

Install

bash

npx shadcn add @eloquent/story-card

It installs kicker, headline, tech-line and ink-figure with it.

Usage

tsx

import { StoryCard } from "@/components/ui/story-card";

<StoryCard
  kicker="Work · Sep 2025 – Present"
  lead="Ten agents,"
  tail="one pipeline"
  href="/work/ten-agents"
  lede="A document pipeline in which each agent owns one stage."
  stack={["Java", "Spring Boot", "PostgreSQL"]}
  stackLabel="Stack"
  thumbnail={{ src: "/ink/pipeline.svg", alt: "Ink drawing of a printing press" }}
/>

States

Without a thumbnail

Text only, full width

Without a thumbnail the body takes the whole width of the card.

TypeScript
React

Without a link

A static headline, no marker

With no href the headline is plain text, so nothing highlights and nothing takes focus.

State	Treatment
Card	A 3px heavy top rule; no border box, no ground
Headline link	Marker highlight on hover or focus; 2px ink outline on focus
Thumbnail	96px wide, 9:16, greyscale, `object-fit: contain`, top-aligned
No thumbnail	The body takes the full width

Keyboard

The headline link is the only tab stop (when href is set).

Key	Action
Tab	Moves to the headline link
Enter	Follows the link

Vietnamese

Công việc · 09/2025 – nay

Mười agent, một dây chuyền

Một dây chuyền tài liệu trong đó mỗi agent đảm nhận một công đoạn, để mọi bản thảo đều truy được về nguồn.

Java
Spring Boot
PostgreSQL

Bản vẽ mực: một tờ báo gấp đôi bên tách cà phê

Ink adaptation

Brand item with no upstream. A heavy rule replaces the border box of a shadcn card, and the only hover is the marker highlight under the headline.