Stock Cards

Overview

Stock cards are the primary way users interact with stock data in StockFind. They combine multiple components to display financial information clearly.

Basic Stock Card

The standard stock card shows ticker, name, price, and change.

Metric Cards Grid

Display key metrics in a grid layout.

Best Practices

Use Semantic Colors

• Success (green): Positive price changes, good metrics
• Danger (red): Negative price changes, concerning metrics
• Warning (amber): Neutral or cautionary indicators
• Default (gray): Informational, no sentiment

Use Tabular Numbers

Always use tabular-nums for financial figures to ensure proper alignment.

<span className="tabular-nums">$1,234.56</span>

Consistent Spacing

Use gap-2 within card content for tight spacing, gap-4 between cards.

<Card.Content className="flex flex-col gap-2">
  {/* Metric rows */}
</Card.Content>

Accessible Labels

Ensure all interactive elements have proper labels.

<Tooltip>
  <Tooltip.Trigger>
    <span className="cursor-help">P/E Ratio</span>
  </Tooltip.Trigger>
  <Tooltip.Content>
    Price-to-Earnings ratio explanation
  </Tooltip.Content>
</Tooltip>