Skip to Main Content

Overview

Metric Card is a compact card used to display a single key value alongside a label and supporting details, ideal for presenting KPIs, stats, or at-a-glance data points in a dashboard.

Instructions

  1. In Page Designer, select a region
  2. Go to the Property Editor
  3. Under the Region tab
    1. Find Identification → Type, use Metric Card
    2. Find Appearance → Template, use Blank with Attributes

Demo

Default Layout with Avatar and Badge

  • AAPL
    $189.45
    Apple
    2.34%
  • MSFT
    $415.80
    Microsoft
    0.87%
  • GOOGL
    $175.20
    Google
    1.12%
  • AMZN
    $198.60
    Amazon
    3.45%
  • TSLA
    $245.10
    Tesla
    1.00%

Inline Avatar and 3 Column Layout

  • AAPL
    $189.45
    Apple
    2.34%
  • MSFT
    $415.80
    Microsoft
    0.87%
  • GOOGL
    $175.20
    Google
    1.12%
  • AMZN
    $198.60
    Amazon
    3.45%
  • TSLA
    $245.10
    Tesla
    1.00%

Stacked Layout

  • AAPL
    $189.45
    Apple
    2.34%
  • MSFT
    $415.80
    Microsoft
    0.87%
  • GOOGL
    $175.20
    Google
    1.12%
  • AMZN
    $198.60
    Amazon
    3.45%
  • TSLA
    $245.10
    Tesla
    1.00%