MarketCard
Installation
import { MarketCard } from "@/components/product/market-card/market-card";Overview
Market card for feed grids, hero placements, and sidebar rows. Renders either a single-outcome market (with an author byline) or a multi-outcome group (a ranked list of named outcomes with percentages). Status is either active or resolved — resolved group outcomes each carry their own resolution (yes / no / tie) so the winning row(s) can be visually marked. The title is optionally pressable independent of the favorite toggle.
Height rules
- default — fixed h-[198px], component-owned (p-3 + header + body + mt-auto + footer + p-3)
- hero — h-full, sized by parent container
- row — content-driven height
Interactive Demo
Interactive components for verifying state changes (favorite toggle, title press).
Default Layout — State Matrix
All default layout states. Fixed h-[198px]. Group body = 82px viewport (2.5 rows, gap-1.5). Verifies height, spacing, overflow scroll.
DEFAULT + GROUP + ACTIVE
Largest Company end of May?
Who will win the 2026 presidential election?
Many outcomes — scroll test
DEFAULT + GROUP + RESOLVED
Largest Company end of May?
Resolved TIE outcome
DEFAULT + SINGLE + ACTIVE
Largest Company end of May?
by oliviarhyeDEFAULT + SINGLE + RESOLVED
Largest Company end of May?
by oliviarhyeWill Bitcoin exceed $200k?
by cryptokingHero Layout — State Matrix
Hero uses h-full — height controlled by parent. Container below is 400px to verify fill behavior.
HERO + SINGLE + ACTIVE
HERO + SINGLE + RESOLVED
Will an Ethereum ETF be approved within this year?
HERO + GROUP + ACTIVE
HERO + GROUP + RESOLVED
Which company was the largest as May concluded?