Components

Card

Card with no box: heavy 3px top rule, serif content, hairline footer; header, title, description, action, content and footer parts.

Dispatch

The register of record, updated nightly

A short standfirst sets the story in one sentence.

Procurement notices are filed, dated and indexed the same day, so a reader can follow a decision from the first notice to the last.

Install

bash

npx shadcn add @eloquent/card

Usage

tsx

import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";

<Card>
  <CardHeader>
    <CardTitle>The register of record, updated nightly</CardTitle>
    <CardDescription>A short standfirst sets the story in one sentence.</CardDescription>
    <CardAction>…</CardAction>
  </CardHeader>
  <CardContent>…</CardContent>
  <CardFooter>…</CardFooter>
</Card>

CardTitle renders an h3. Pass as="h2" (or any of h2 to h6, or div) to match the page's heading level.

States

Default

A 3px ink rule opens the card; there is no box.

Content sits on the page, set in the serif face.

Small

Tighter padding, same rule.

Cards in a grid share the heavy top rule.

State	Treatment
Default	3px ink rule on top, content on the page, no box
`size="sm"`	Tighter gaps and a smaller title; same rule
Footer	Opens with a 1px ink hairline
Focus (children)	2px ink outline, 2px offset, on the buttons and links inside

A card has no hover state. Only its interactive children respond.

Keyboard

Key	Action
Tab / Shift+Tab	Move through the card's interactive children in source order
Enter / Space	Activate the focused button or link

The card itself is not focusable.

Vietnamese

Tin nhanh

Sổ đăng ký lưu trữ, cập nhật mỗi đêm

Một dòng dẫn nhập tóm tắt câu chuyện trong một câu.

Các thông báo mua sắm được lập hồ sơ, ghi ngày và lập chỉ mục ngay trong ngày, để người đọc theo dõi một quyết định từ thông báo đầu tiên đến thông báo cuối cùng.

Ink adaptation

Upstream shadcn's rounded border, background panel and shadow are removed. Structure comes from rules: a 3px ink rule opens the card (as it opens a section in a grid of stories) and a hairline opens the footer. The title is Playfair Display 900 and renders as a heading; description and content are Source Serif 4 in full ink, never grey.