Brand components

Cover

kicker, two-voice headline and a 16:9 ink scene, for slide titles and social images.

Case study · 2026

Ten agents, one pipeline

Ink drawing: a folded newspaper beside a cup of coffee

Install

bash

npx shadcn add @eloquent/cover

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

Usage

tsx

import { Cover } from "@/components/ui/cover";

<Cover
  kicker="Case study · 2026"
  lead="Ten agents,"
  tail="one pipeline"
  scene={{ src: "/ink/pipeline.svg", alt: "Ink drawing of a printing press" }}
/>

For a slide title or a social image, give the cover a fixed width (for example className="w-[1200px]") and capture it.

States

Smaller headline

A quieter cover, for a section slide

One voice

Only the roman lead

State	Treatment
Heading	`h1` at size `xl` by default; `headingAs` and `headingSize` change both
Kicker	Tracked caps with a leading ink rule
Scene	16:9, greyscale, multiplied onto tint-1, never cropped
Decorative scene	An empty `alt` hides it from assistive technology

Keyboard

This component is not interactive. It is not a tab stop, so Tab skips it.

Key	Action
Tab	Skips it; not a tab stop

Vietnamese

Nghiên cứu điển hình · 2026

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

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 and the type carry the layout; there is no gradient, overlay or text on the image.