Brand components
CTA band
the press band with a classifieds kicker, a two-voice Playfair headline and an outlined on-press mailto button.
Preview
Classifieds
Book a free 20-minute call. No obligation.
Install
bash
npx shadcn add @eloquent/cta-bandUsage
tsx
import { CtaBand } from "@/components/ui/cta-band";
<CtaBand
kicker="Classifieds"
lead="Book a free 20-minute call."
tail="No obligation."
actionLabel="Book by email"
href="mailto:name@example.com"
/>Use one inverse block per surface: if the page already has the press footer, this band replaces it above the fold or is dropped.
States
Classifieds
Book a free 20-minute call. No obligation.
Classifieds · Projects
Tell me what you need built.
| State | Treatment |
|---|---|
| Default | 1px on-press outline, on-press text |
| Press | on-press fill, press text |
| Focus | 2px on-press outline, 2px offset (ink would vanish on press) |
| Hover | None |
Keyboard
| Key | Action |
|---|---|
| Tab | Moves to the button |
| Enter | Follows the link (opens the mail client for mailto:) |
Vietnamese
Rao vặt
Đặt một cuộc gọi miễn phí 20 phút. Không ràng buộc.
Ink adaptation
Brand item with no upstream. press is the single inverse block of a surface; the button is an outline, so the band stays a composition of rules and type.