AlphaInk
Formats/Vivid Devices/Hero Pricing Card
vivid-devicehtmlv1.0.0

Hero Pricing Card

Top-of-page hero with ticker eyebrow, headline thesis, and a 3-column card showing last close / 12M target / rating.

Open preview →

Hero Pricing Card

The opening visual of a vivid investment thesis — sets ticker, hook, and price target before any analysis.

What this device does

Compresses what an institutional report buries in a "Summary" page into one above-the-fold panel. Reader sees: who, what's the call, where's it going, how confident — all without scrolling.

When to use

  • First panel of a vivid-infographic-recipe
  • Audience: retail or advisor; mobile-first
  • NOT for: institutional reports (those want a full summary page + chart)

How agents use this

data = {
  ticker: "AAPL",
  exchange: "NASDAQ",
  date: "Apr 27, 2026",
  headline: "Apple is on <em>sale</em> inside the Mag 7.",
  subheadline: "Down 2% YTD while peers are up 8 to 24%. Margin engine is quietly hitting record highs.",
  last_close: 208.40,
  target_price: 245,
  upside_pct: 18,
  rating: "Buy",
  conviction: "high",
  byline: "By Hai Z. · AlphaInk Tech · ~4 min read"
}

Visual register

Dark canvas with radial-gradient accent glows. Headline uses Space Grotesk display at clamp(40px, 7vw, 72px). The 3-column hero card stacks to single column under 640px.

Why it works

Three pieces of information (price, target, rating) anchor the reader before any prose loads. The headline declares a position; the card backs it with numbers. Same shape every panel can be remembered against.

Example output

See ./preview.html — AAPL Buy reiteration, April 2026.