Patterns

Dashboard Pattern

semantic HTML

지표, 필터, 데이터 표를 조합한 대시보드 화면입니다.

stablefreeSince 0.4

Live example

Revenue$84.2K+12.4%

Orders1,284+8.1%

Conversion4.8%+0.7%

<section class="x-dashboard" data-standard-component="dashboard-pattern" aria-label="Dashboard metrics"><article class="x-stat">Revenue<strong>$84.2K</strong><small>+12.4%</small></article><article class="x-stat">Orders<strong>1,284</strong><small>+8.1%</small></article><article class="x-stat">Conversion<strong>4.8%</strong><small>+0.7%</small></article></section>

Variants and sizes

The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.

compactcomfortableroomy

Public API

Contract	Value
Implementation	`semantic HTML`
Status	`stable`
License	`free`
Since	`0.4`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

지표 그룹에 이름을 제공하고 색상만으로 증감이나 상태를 구분하지 않습니다.

Server template guidance

<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->