x
1
2
3
4
5
6
7
8
9
<article data-controller="midwest-card" class="midwest-card midwest-stat"> <div class="wrap"> <section> <div class="stat-content"> <div class="stat-value">1,284</div> </div> </section> </div></article>1
2
3
4
5
6
7
8
9
10
11
12
13
<% icon_val = params[:icon].presence&.to_sym %><% color_val = params[:color].presence %><%= render Midwest::StatComponent.new( value: params[:value].presence || '1,284', label: params[:label].presence, trend: params[:trend].presence, trend_label: params[:trend_label].presence, comparison: params[:comparison].presence, comparison_label: params[:comparison_label].presence, icon: icon_val, color: color_val) %>Playground
Explore the component with live parameters.
| Param | Description | Input |
|---|---|---|
|
The main metric value |
|
|
|
Descriptive label below the value |
|
|
|
Optional icon shown alongside the metric |
|
|
|
Delta value, e.g. +12.5% or -3.2 |
|
|
|
Secondary label next to the delta, e.g. vs last month |
|
|
|
Prior-period baseline value shown as muted context |
|
|
|
Descriptor beside the baseline, e.g. vs last month |
|
|
|
Theme color |
|
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Stat/playground
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."