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
<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="midwest-icon stat-icon" aria-hidden="true">
          <div class="midwest-icon-inner">
            <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" aria-hidden="true"><path d="M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path><path d="M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"></path><path d="M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path><path d="M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"></path></svg>
          </div>
        </div>
        <div class="stat-content">
          <div class="stat-value">1,284</div>
          <div class="stat-label">Total users</div>
        </div>
      </section>
    </div>
  </article>
  <article data-controller="midwest-card" class="midwest-card midwest-stat">
    <div class="wrap">
      <section>
        <div class="midwest-icon stat-icon" aria-hidden="true">
          <div class="midwest-icon-inner">
            <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" aria-hidden="true"><rect x="32" y="80" width="448" height="256" rx="16" ry="16" transform="rotate(180 256 208)" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M64 384h384M96 432h320"></path><circle cx="256" cy="208" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></circle><path d="M480 160a80 80 0 01-80-80M32 160a80 80 0 0080-80M480 256a80 80 0 00-80 80M32 256a80 80 0 0180 80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg>
          </div>
        </div>
        <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-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">+8.1%</span>
            </span>            </div>
        </div>
      </footer>
    </div>
  </article>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%= midwest_grid(fit: true) do %>
  <%= render Midwest::StatComponent.new(
    value: '1,284',
    label: 'Total users',
    icon: :'people-outline'
  ) %>
  <%= render Midwest::StatComponent.new(
    value: '$4,820',
    label: 'Revenue',
    icon: :'cash-outline',
    trend: '+8.1%'
  ) %>
<% end %>

With icon

Pass icon: to display an icon alongside the metric.

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_icon

Annotate a preview to embed its Figma design here:

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