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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<div class="min-h-screen bg-gray-1 dark:bg-gray-12">
  <header class="bg-white dark:bg-gray-11 border-b border-gray-2 dark:border-gray-9 px-6 py-3 flex items-center justify-between">
    <div class="flex items-center gap-2">
      <div class="midwest-icon text-theme-7 text-2xl">
        <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="Aperture"><title>Aperture</title>
            <path d="M250.54 129.17l-67.8-67.8A209.65 209.65 0 0086.32 136h161.4a4 4 0 002.82-6.83zM167.72 168H67.63a207.34 207.34 0 00-16.15 125.9l119.06-119.07a4 4 0 00-2.82-6.83zM344 167.72V67.56a207.82 207.82 0 00-125.89-16.08l119.06 119.06a4 4 0 006.83-2.82zM460.52 218.1L341.46 337.17a4 4 0 002.82 6.83h100.09a207.34 207.34 0 0016.15-125.9zM382.83 250.54l67.83-67.82A209.08 209.08 0 00376 86.2v161.52a4 4 0 006.83 2.82zM221.68 341.77a8 8 0 005.54 2.23h59.66a8 8 0 005.7-2.39l49.18-50a8 8 0 002.3-5.62l-.06-60.81a8 8 0 00-2.38-5.69l-50-49.25a8 8 0 00-5.63-2.3l-60.84.06a8 8 0 00-5.69 2.38l-49.25 50a8 8 0 00-2.3 5.63l.06 60.78a8 8 0 002.45 5.76zM261.46 382.83l67.8 67.8A209.65 209.65 0 00425.68 376h-161.4a4 4 0 00-2.82 6.83zM168 344.28v100.16a207.82 207.82 0 00125.89 16.08L174.83 341.46a4 4 0 00-6.83 2.82zM129.17 261.46l-67.83 67.83A209.1 209.1 0 00136 425.8V264.28a4 4 0 00-6.83-2.82z"></path></svg>
        </div>
      </div>
      <span class="font-bold text-theme-11">Orbit</span>
    </div>
    <div class="flex items-center gap-3">
      <div class="midwest-icon text-theme-6 text-base">
        <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="Lock closed"><title>Lock closed</title>
            <path d="M368 192h-16v-80a96 96 0 10-192 0v80h-16a64.07 64.07 0 00-64 64v176a64.07 64.07 0 0064 64h224a64.07 64.07 0 0064-64V256a64.07 64.07 0 00-64-64zm-48 0H192v-80a64 64 0 11128 0z"></path></svg>
        </div>
      </div>
      <span class="text-sm text-theme-7">Secure checkout</span>
    </div>
  </header>
  <div class="bg-white dark:bg-gray-11 border-b border-gray-2 dark:border-gray-9 px-6 py-4">
    <div class="midwest-steps" role="tablist" aria-label="Progress steps">
      <div class="midwest-step complete">
        <button class="step-button" role="tab" aria-selected="false" type="button">
          <div class="midwest-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" role="img" aria-label="Checkmark"><title>Checkmark</title>
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"></path></svg>
            </div>
          </div>
          <span class="copy">Cart</span>
        </button></div>
      <div class="midwest-step complete">
        <button class="step-button" role="tab" aria-selected="false" type="button">
          <div class="midwest-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" role="img" aria-label="Checkmark"><title>Checkmark</title>
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"></path></svg>
            </div>
          </div>
          <span class="copy">Shipping</span>
        </button></div>
      <div class="midwest-step current">
        <button class="step-button" role="tab" aria-selected="true" aria-current="step" type="button">
          <span class="copy">Payment</span>
        </button></div>
      <div class="midwest-step disabled">
        <button class="step-button" role="tab" aria-selected="false" aria-disabled="true" type="button" disabled="disabled">
          <span class="copy">Confirm</span>
        </button></div>
    </div>
  </div>
  <div class="midwest-layout size-lg padding-default type-sidebar-flipped" style="--layout-grid-gap: 3rem; --layout-sidebar-width: 380px">
    <div class="wrapper">
      <aside class="space-y-4">
        <article data-controller="midwest-card" class="midwest-card">
          <div class="wrap">
            <section>
              <h3 class="text-base font-semibold text-theme-11 mb-4">Order Summary</h3>
              <div class="space-y-3 divide-y divide-theme-3">
                <div class="py-3 first:pt-0 last:pb-0 flex items-start justify-between gap-3">
                  <div class="min-w-0">
                    <p class="text-sm font-medium text-theme-11">Orbit Pro — Annual</p>
                    <p class="text-xs text-theme-7">Up to 25 team members</p>
                  </div>
                  <div class="text-right flex-shrink-0">
                    <span class="text-sm font-semibold text-theme-11">$960.00</span>
                    <span class="text-xs text-theme-7">/yr</span>
                  </div>
                </div>
                <div class="py-3 first:pt-0 last:pb-0 flex items-start justify-between gap-3">
                  <div class="min-w-0">
                    <p class="text-sm font-medium text-theme-11">Data export add-on</p>
                    <p class="text-xs text-theme-7">Unlimited exports</p>
                  </div>
                  <div class="text-right flex-shrink-0">
                    <span class="text-sm font-semibold text-theme-11">$120.00</span>
                    <span class="text-xs text-theme-7">/yr</span>
                  </div>
                </div>
              </div>
              <div class="mt-4 pt-4 border-t border-theme-3 space-y-1.5 text-sm">
                <div class="flex justify-between text-theme-8">
                  <span>Subtotal</span><span>$1,080.00</span>
                </div>
                <div class="flex justify-between text-theme-8">
                  <span>Discount (WELCOME20)</span><span class="text-green-7">−$216.00</span>
                </div>
                <div class="flex justify-between text-theme-8">
                  <span>Tax (IL, 10.25%)</span><span>$88.02</span>
                </div>
                <div class="flex justify-between font-bold text-theme-12 text-base pt-2 border-t border-theme-3">
                  <span>Total</span><span>$952.02</span>
                </div>
              </div>
              <div class="mt-3 flex gap-2 items-end">
                <div class="midwest-input midwest-form-group type-text" data-controller="midwest-input">
                  <div class="midwest-form-group__top">
                    <label class="midwest-label " for="promo_code-fa48">
                    </label>
                  </div>
                  <input type="text" name="promo_code" id="promo_code-fa48" placeholder="Promo code" data-midwest-input-target="input" />
                </div>
                <a class="midwest-button variant-outline size-small theme-primary" name="button" href="/">
                  <span class="midwest-button-content">Apply</span>
                  <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
                    <div class="midwest-loading-icon-inner">
                      <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
                      <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                        <circle cx="15" cy="15" r="15">
                          <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                        <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                          <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                        <circle cx="105" cy="15" r="15">
                          <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                      </svg>
                    </div>
                  </div>
                </a>
              </div>
            </section>
          </div>
        </article>
        <div class="midwest-callout theme-green">
          <div class="callout-wrap">
            <div data-controller="midwest-prose" class="midwest-prose prose">
              <p class="text-sm">20% off your first year — saving you $216.00.</p>
            </div>
          </div>
        </div>
    </aside>
      <section>
        <article data-controller="midwest-card" class="midwest-card">
          <div class="wrap">
            <section>
              <h3 class="text-base font-semibold text-theme-11 mb-5">Payment Details</h3>
              <div class="space-y-4">
                <div class="midwest-input midwest-form-group type-text" data-controller="midwest-input">
                  <div class="midwest-form-group__top">
                    <label class="midwest-label " for="cardholder_name-fa50">
                      Cardholder name
                    </label>
                  </div>
                  <input type="text" name="cardholder_name" id="cardholder_name-fa50" placeholder="Alex Kim" data-midwest-input-target="input" />
                </div>
                <div class="midwest-input midwest-form-group type-text" data-controller="midwest-input">
                  <div class="midwest-form-group__top">
                    <label class="midwest-label " for="card_number-fa58">
                      Card number
                    </label>
                  </div>
                  <input type="text" name="card_number" id="card_number-fa58" placeholder="•••• •••• •••• ••••" data-midwest-input-target="input" />
                </div>
                <div class="grid grid-cols-2 gap-4">
                  <div class="midwest-input midwest-form-group type-text" data-controller="midwest-input">
                    <div class="midwest-form-group__top">
                      <label class="midwest-label " for="expiry-fa60">
                        Expiry
                      </label>
                    </div>
                    <input type="text" name="expiry" id="expiry-fa60" placeholder="MM / YY" data-midwest-input-target="input" />
                  </div>
                  <div class="midwest-input midwest-form-group type-text" data-controller="midwest-input">
                    <div class="midwest-form-group__top">
                      <label class="midwest-label " for="cvc-fa68">
                        CVC
                      </label>
                    </div>
                    <input type="text" name="cvc" id="cvc-fa68" placeholder="•••" data-midwest-input-target="input" />
                  </div>
                </div>
                <div class="midwest-checkbox midwest-form-group ">
                  <div class="midwest-form-group__top">
                    <input type="checkbox" id="save_card-fa70" value="1" class="checkbox" aria-checked="false" />
                    <label class="midwest-label " for="save_card-fa70">
                      Save card for future payments
                    </label>
                  </div>
                </div>
              </div>
              <div class="mt-6">
                <a class="midwest-button variant-default size-default fill theme-primary" name="button" href="/">
                  <span class="midwest-button-content">
                    <div class="midwest-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="M368 192h-16v-80a96 96 0 10-192 0v80h-16a64.07 64.07 0 00-64 64v176a64.07 64.07 0 0064 64h224a64.07 64.07 0 0064-64V256a64.07 64.07 0 00-64-64zm-48 0H192v-80a64 64 0 11128 0z"></path></svg>
                      </div>
                    </div>
                    Pay $952.02</span>
                  <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
                    <div class="midwest-loading-icon-inner">
                      <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
                      <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                        <circle cx="15" cy="15" r="15">
                          <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                        <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                          <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                        <circle cx="105" cy="15" r="15">
                          <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                          <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                        </circle>
                      </svg>
                    </div>
                  </div>
                </a>
              </div>
              <p class="text-xs text-theme-6 text-center mt-3">
                Protected by 256-bit SSL encryption. Cancel anytime.
              </p>
            </section>
          </div>
        </article>
    </section>
    </div>
  </div>
</div>
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<div class="min-h-screen bg-gray-1 dark:bg-gray-12">
  <header class="bg-white dark:bg-gray-11 border-b border-gray-2 dark:border-gray-9 px-6 py-3 flex items-center justify-between">
    <div class="flex items-center gap-2">
      <%= midwest_icon :aperture, class: "text-theme-7 text-2xl" %>
      <span class="font-bold text-theme-11">Orbit</span>
    </div>
    <div class="flex items-center gap-3">
      <%= midwest_icon :'lock-closed', class: "text-theme-6 text-base" %>
      <span class="text-sm text-theme-7">Secure checkout</span>
    </div>
  </header>
  <%# Progress steps %>
  <div class="bg-white dark:bg-gray-11 border-b border-gray-2 dark:border-gray-9 px-6 py-4">
    <%= midwest_steps do |s| %>
      <% s.with_step("Cart", complete: true) %>
      <% s.with_step("Shipping", complete: true) %>
      <% s.with_step("Payment", current: true) %>
      <% s.with_step("Confirm", disabled: true) %>
    <% end %>
  </div>
  <%= midwest_layout(type: :sidebar, size: :lg, sidebar_width: 380, gap: 3, flipped: true) do %>
    <%# ---- Order summary sidebar ---- %>
    <aside class="space-y-4">
      <%= midwest_card do %>
        <h3 class="text-base font-semibold text-theme-11 mb-4">Order Summary</h3>
        <div class="space-y-3 divide-y divide-theme-3">
          <% [
            { name: "Orbit Pro — Annual", desc: "Up to 25 team members", price: "$960.00", per: "/yr" },
            { name: "Data export add-on", desc: "Unlimited exports", price: "$120.00", per: "/yr" },
          ].each do |item| %>
            <div class="py-3 first:pt-0 last:pb-0 flex items-start justify-between gap-3">
              <div class="min-w-0">
                <p class="text-sm font-medium text-theme-11"><%= item[:name] %></p>
                <p class="text-xs text-theme-7"><%= item[:desc] %></p>
              </div>
              <div class="text-right flex-shrink-0">
                <span class="text-sm font-semibold text-theme-11"><%= item[:price] %></span>
                <span class="text-xs text-theme-7"><%= item[:per] %></span>
              </div>
            </div>
          <% end %>
        </div>
        <div class="mt-4 pt-4 border-t border-theme-3 space-y-1.5 text-sm">
          <div class="flex justify-between text-theme-8">
            <span>Subtotal</span><span>$1,080.00</span>
          </div>
          <div class="flex justify-between text-theme-8">
            <span>Discount (WELCOME20)</span><span class="text-green-7">−$216.00</span>
          </div>
          <div class="flex justify-between text-theme-8">
            <span>Tax (IL, 10.25%)</span><span>$88.02</span>
          </div>
          <div class="flex justify-between font-bold text-theme-12 text-base pt-2 border-t border-theme-3">
            <span>Total</span><span>$952.02</span>
          </div>
        </div>
        <div class="mt-3 flex gap-2 items-end">
          <%= midwest_form_input(name: 'promo_code', placeholder: 'Promo code') %>
          <%= midwest_button("Apply", variant: :outline, size: :small) %>
        </div>
      <% end %>
      <%= midwest_callout(state: :success, title: "WELCOME20 applied") do %>
        <%= midwest_prose do %>
          <p class="text-sm">20% off your first year — saving you $216.00.</p>
        <% end %>
      <% end %>
    </aside>
    <%# ---- Payment form ---- %>
    <section>
      <%= midwest_card do %>
        <h3 class="text-base font-semibold text-theme-11 mb-5">Payment Details</h3>
        <div class="space-y-4">
          <%= midwest_form_input(name: 'cardholder_name', label: 'Cardholder name', placeholder: 'Alex Kim') %>
          <%= midwest_form_input(name: 'card_number', label: 'Card number', placeholder: '•••• •••• •••• ••••') %>
          <div class="grid grid-cols-2 gap-4">
            <%= midwest_form_input(name: 'expiry', label: 'Expiry', placeholder: 'MM / YY') %>
            <%= midwest_form_input(name: 'cvc', label: 'CVC', placeholder: '•••') %>
          </div>
          <%= midwest_form_checkbox(name: 'save_card', label: 'Save card for future payments') %>
        </div>
        <div class="mt-6">
          <%= midwest_button("Pay $952.02", fill: true, icon: :'lock-closed') %>
        </div>
        <p class="text-xs text-theme-6 text-center mt-3">
          Protected by 256-bit SSL encryption. Cancel anytime.
        </p>
      <% end %>
    </section>
  <% end %>
</div>

Checkout Review

Two-column checkout: order line items and delivery form on the left; order summary, totals, and action on the right.

No params configured.

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

Accessibility

Figma embed for Layouts/checkout_review

Annotate a preview to embed its Figma design here:

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