Thành phần thương hiệu

Headline

two-voice headline (roman lead, italic tail) in four sizes; the marker highlight shows only when it is a link.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Ten agents, one pipeline

Read it in serif, use it in sans

Install

bash

npx shadcn add @eloquent/headline

Usage

tsx

import { Headline } from "@/components/ui/headline";

<Headline as="h1" size="xl" lead="Ten agents," tail="one pipeline" />
<Headline size="md" href="/work/agents" lead="Read it in serif," tail="use it in sans" />

States

Size xl, the front page

Size lg, a section

Size md, a story

Size sm, a card or dialog

As a link: hover or focus for the marker

State	Treatment
Sizes	xl 48/60px, lg 36/44px, md 30/34px, sm 22px
Static	No hover, no highlight
Link, hover or focus	The `.hl` marker band sweeps under the text (none under reduced motion)
Link, focus-visible	2px ink outline with a 2px offset

Keyboard

Key	Action
Tab	Moves to the headline link (a static headline is skipped)
Enter	Follows the link

Vietnamese

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

Đọc bằng chữ có chân, dùng bằng chữ không chân

Ink adaptation

Brand item with no upstream. The marker highlight is the only hover effect and shows only when the headline is a link; the link's hit area covers the whole heading block.