7onicDESIGN SYSTEM

MetricCard

KPI와 핵심 지표를 대시보드에서 명확하게 표시하는 컴포넌트입니다. 타이틀, 수치, 트렌드 인디케이터, 설명, 아이콘을 자유롭게 조합할 수 있습니다.

3
Variants
3
Sizes
3
Trend
Pure
React

Playground

Preview
D

Revenue

$45,231

Increased+20.1%

vs last month

Preset
Variant
Size
Radius
Options
Trend
<MetricCard>
  <MetricCard.Header>
    <MetricCard.Title>Revenue</MetricCard.Title>
    <MetricCard.Symbol><DollarSign /></MetricCard.Symbol>
  </MetricCard.Header>
  <MetricCard.Value>$45,231</MetricCard.Value>
  <MetricCard.Trend direction="up">+20.1%</MetricCard.Trend>
  <MetricCard.Description>vs last month</MetricCard.Description>
</MetricCard>

Variants

Revenue

$3,500

Increased+8.1%

default

Revenue

$3,500

Increased+8.1%

elevated

Revenue

$3,500

Increased+8.1%

ghost

<MetricCard variant="default">...</MetricCard>
<MetricCard variant="elevated">...</MetricCard>
<MetricCard variant="ghost">...</MetricCard>

Sizes

sm
패딩16px
수치text-xl (20px)
타이틀text-xs (12px)
아이콘icon-sm (16px)
default
패딩20px
수치text-2xl (24px)
타이틀text-sm (13px)
아이콘icon-md (20px)
lg
패딩24px
수치text-3xl (30px)
타이틀text-sm (13px)
아이콘icon-lg (24px)

반응형: default, lg 사이즈는 모바일(640px 미만)에서 패딩이 한 단계 자동 축소됩니다. sm 사이즈는 고정값입니다.

Features

Grid Preview

대시보드 실제 표시 이미지, grid-cols-2 lg:grid-cols-4 레이아웃 사용 예시입니다.

Revenue

$45,231

Increased+20.1%

vs last month

Users

2,350

Increased+12.5%

new signups

Orders

1,234

Decreased-3.2%

vs last week

Conversion

3.24%

No change0.0%

no change

<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
  <MetricCard>
    <MetricCard.Header>
      <MetricCard.Title>Revenue</MetricCard.Title>
      <MetricCard.Symbol><DollarSign /></MetricCard.Symbol>
    </MetricCard.Header>
    <MetricCard.Value>$45,231</MetricCard.Value>
    <MetricCard.Trend direction="up">+20.1%</MetricCard.Trend>
    <MetricCard.Description>vs last month</MetricCard.Description>
  </MetricCard>
  ...
</div>

Trend

트렌드 인디케이터는 방향에 따라 아이콘과 색상이 자동 적용됩니다. 색각 다양성을 고려하여 아이콘 + 텍스트로 의미를 전달합니다.

Up

$3,500

Increased+8.1%

Down

$3,500

Decreased-3.2%

Neutral

$3,500

No change0.0%

<MetricCard.Trend direction="up">+8.1%</MetricCard.Trend>
<MetricCard.Trend direction="down">-3.2%</MetricCard.Trend>
<MetricCard.Trend direction="neutral">0.0%</MetricCard.Trend>

Radius

Radius

0

Radius

8

Radius

12

Radius

16

Radius

24

<MetricCard radius="none" />    {/* 0px */}
<MetricCard radius="lg" />     {/* 8px */}
<MetricCard />                 {/* 12px — default */}
<MetricCard radius="2xl" />    {/* 16px */}
<MetricCard radius="3xl" />    {/* 24px */}

API

Component Structure

MetricCard— Pure React
.Header.Title.Symbol.Value.TrendProps.Description

Props

MetricCard

variant"default"
"default" | "elevated" | "ghost"

카드 스타일 variant

size"default"
"sm" | "default" | "lg"

카드 사이즈(패딩 및 폰트 크기에 영향)

radius"default"
"none" | "sm" | "base" | "default" | "lg" | "xl" | "2xl" | "3xl" | "full"

카드 모서리 둥글기(디자인 토큰 기준)

animatedfalse
boolean

MetricCard.Value의 수치를 카운트업 애니메이션으로 표시

MetricCard.Trend

direction—
"up" | "down" | "neutral"

트렌드 방향(필수): 아이콘과 색상이 자동 적용됨

Anatomy

1
2
3
Monthly Revenue
4
5
$2.84M
6
+12.5%
vs last month
7

December 2024 actual

1
Root
루트 컨테이너
2
Header
헤더 영역
3
Title
카드 타이틀
4
Icon
심볼 아이콘
5
Value
대형 수치
6
Trend
트렌드 지표
7
Description
보조 텍스트

Best Practices

✓

권장

  • ✓트렌드에 색상 + 아이콘 + 텍스트를 함께 사용
  • ✓그리드 레이아웃으로 카드를 균등 배치
  • ✓숫자는 읽기 쉬운 포맷으로 표시(쉼표 구분 등)
  • ✓비교 기간을 설명 텍스트로 명시
✕

지양

  • ✗색상만으로 트렌드 방향을 전달하지 않기(색각 다양성 고려)
  • ✗한 화면에 너무 많은 메트릭 카드 배치하지 않기
  • ✗맥락 없이 숫자만 표시하지 않기
  • ✗같은 그리드에 서로 다른 사이즈 카드 혼용하지 않기

Accessibility

키보드 조작

Tab포커스 이동

ARIA / WCAG

  • 트렌드 아이콘은 aria-hidden + sr-only 텍스트 사용
  • 색상만이 아닌 아이콘 + 텍스트로 의미 전달
  • 자연스러운 읽기 순서(타이틀 → 수치 → 트렌드 → 설명)
  • WCAG AA 색채 대비 준수