Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<div class="midwest-grid fit" style="--grid-width: 200px; --grid-gap: 2rem">
  <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 class="stat-label">Total users</div>
        </div>
      </section>
      <footer>        
        <div class="stat-meta">
          <div class="stat-trend trend-up">
            <span class="midwest-badge has-icon size-sm theme-green trend-value">
              <div class="midwest-icon ">
                <div class="midwest-icon-inner">
                  <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Arrow up circle"><title>Arrow up circle</title>
                    <path d="M256 48C141.13 48 48 141.13 48 256s93.13 208 208 208 208-93.13 208-208S370.87 48 256 48zm91.36 212.65a16 16 0 01-22.63.09L272 208.42V342a16 16 0 01-32 0V208.42l-52.73 52.32A16 16 0 11164.73 238l80-79.39a16 16 0 0122.54 0l80 79.39a16 16 0 01.09 22.65z"></path></svg>
                </div>
              </div>
              <span class="value">+12.5%</span>
            </span>                <span class="trend-label">vs last month</span>
          </div>
        </div>
      </footer>
    </div>
  </article>
  <article data-controller="midwest-card" class="midwest-card midwest-stat">
    <div class="wrap">
      <section>
        <div class="stat-content">
          <div class="stat-value">$4,820</div>
          <div class="stat-label">Revenue</div>
        </div>
      </section>
      <footer>        
        <div class="stat-meta">
          <div class="stat-trend trend-down">
            <span class="midwest-badge has-icon size-sm theme-red trend-value">
              <div class="midwest-icon ">
                <div class="midwest-icon-inner">
                  <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Arrow down circle"><title>Arrow down circle</title>
                    <path d="M256 464c114.87 0 208-93.13 208-208S370.87 48 256 48 48 141.13 48 256s93.13 208 208 208zm-91.36-212.65a16 16 0 0122.63-.09L240 303.58V170a16 16 0 0132 0v133.58l52.73-52.32A16 16 0 11347.27 274l-80 79.39a16 16 0 01-22.54 0l-80-79.39a16 16 0 01-.09-22.65z"></path></svg>
                </div>
              </div>
              <span class="value">-3.2%</span>
            </span>                <span class="trend-label">vs last month</span>
          </div>
        </div>
      </footer>
    </div>
  </article>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%= midwest_grid(fit: true) do %>
  <%= render Midwest::StatComponent.new(
    value: '1,284',
    label: 'Total users',
    trend: '+12.5%',
    trend_label: 'vs last month'
  ) %>
  <%= render Midwest::StatComponent.new(
    value: '$4,820',
    label: 'Revenue',
    trend: '-3.2%',
    trend_label: 'vs last month'
  ) %>
<% end %>

With trend

Pass trend: to show an up/down indicator with a delta value. Positive values show green/up, negative show red/down.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Stat/with_trend

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."