Midwest Component Library v0.28.2

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
228
229
230
231
232
233
234
235
236
237
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
    <meta name="color-scheme" content="light dark">
    <meta name="supported-color-schemes" content="light dark">
    <title>Receipt</title>
    <!--[if mso]>
      <noscript>
        <xml>
          <o:OfficeDocumentSettings>
            <o:PixelsPerInch>96</o:PixelsPerInch>
          </o:OfficeDocumentSettings>
        </xml>
      </noscript>
    <![endif]-->
    <style>
      /* Stop iOS/Windows linkifying dates, addresses and phone numbers into
         unstyled blue text. */
      a[x-apple-data-detectors], .unstyle-auto-detected-links a, .aBn {
        color: inherit !important;
        text-decoration: none !important;
        font-size: inherit !important;
        font-family: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
      }
      /* Outlook.com forces its own line-height onto every element. */
      .ExternalClass, .ExternalClass p, .ExternalClass td,
      .ExternalClass div, .ExternalClass span, .ExternalClass font {
        line-height: 100%;
      }
      /* Gmail and Outlook.com both add margin to the body wrapper. */
      body { margin: 0 !important; padding: 0 !important; width: 100% !important; }
      /* Yahoo and Outlook add space under images inside table cells. */
      img { -ms-interpolation-mode: bicubic; }
      table { border-collapse: collapse !important; }
      @media (prefers-color-scheme: dark) {
      .mw-email-fg-page_background { color: #030405 !important; }
      .mw-email-bg-page_background { background-color: #030405 !important; }
      .mw-email-bd-page_background { border-color: #030405 !important; }
      .mw-email-fg-surface { color: #0e1113 !important; }
      .mw-email-bg-surface { background-color: #0e1113 !important; }
      .mw-email-bd-surface { border-color: #0e1113 !important; }
      .mw-email-fg-surface_muted { color: #191d22 !important; }
      .mw-email-bg-surface_muted { background-color: #191d22 !important; }
      .mw-email-bd-surface_muted { border-color: #191d22 !important; }
      .mw-email-fg-border { color: #252a30 !important; }
      .mw-email-bg-border { background-color: #252a30 !important; }
      .mw-email-bd-border { border-color: #252a30 !important; }
      .mw-email-fg-heading { color: #ffffff !important; }
      .mw-email-bg-heading { background-color: #ffffff !important; }
      .mw-email-bd-heading { border-color: #ffffff !important; }
      .mw-email-fg-body { color: #bbbfc3 !important; }
      .mw-email-bg-body { background-color: #bbbfc3 !important; }
      .mw-email-bd-body { border-color: #bbbfc3 !important; }
      .mw-email-fg-muted { color: #9ea3a9 !important; }
      .mw-email-bg-muted { background-color: #9ea3a9 !important; }
      .mw-email-bd-muted { border-color: #9ea3a9 !important; }
      .mw-email-fg-link { color: #51a8f8 !important; }
      .mw-email-bg-link { background-color: #51a8f8 !important; }
      .mw-email-bd-link { border-color: #51a8f8 !important; }
      .mw-email-fg-accent { color: #3393ea !important; }
      .mw-email-bg-accent { background-color: #3393ea !important; }
      .mw-email-bd-accent { border-color: #3393ea !important; }
      .mw-email-fg-accent_soft { color: #002f5e !important; }
      .mw-email-bg-accent_soft { background-color: #002f5e !important; }
      .mw-email-bd-accent_soft { border-color: #002f5e !important; }
      .mw-email-fg-code_surface { color: #191d22 !important; }
      .mw-email-bg-code_surface { background-color: #191d22 !important; }
      .mw-email-bd-code_surface { border-color: #191d22 !important; }
      .mw-email-fg-code_text { color: #bbbfc3 !important; }
      .mw-email-bg-code_text { background-color: #bbbfc3 !important; }
      .mw-email-bd-code_text { border-color: #bbbfc3 !important; }
      .mw-email-fg-table_header { color: #d8dbdd !important; }
      .mw-email-bg-table_header { background-color: #d8dbdd !important; }
      .mw-email-bd-table_header { border-color: #d8dbdd !important; }
      .mw-email-fg-state_success_surface { color: #004d17 !important; }
      .mw-email-bg-state_success_surface { background-color: #004d17 !important; }
      .mw-email-bd-state_success_surface { border-color: #004d17 !important; }
      .mw-email-fg-state_success_border { color: #007f2e !important; }
      .mw-email-bg-state_success_border { background-color: #007f2e !important; }
      .mw-email-bd-state_success_border { border-color: #007f2e !important; }
      .mw-email-fg-state_success_text { color: #a2efb8 !important; }
      .mw-email-bg-state_success_text { background-color: #a2efb8 !important; }
      .mw-email-bd-state_success_text { border-color: #a2efb8 !important; }
      .mw-email-fg-state_success_accent { color: #31bc64 !important; }
      .mw-email-bg-state_success_accent { background-color: #31bc64 !important; }
      .mw-email-bd-state_success_accent { border-color: #31bc64 !important; }
      .mw-email-fg-state_warning_surface { color: #5e2000 !important; }
      .mw-email-bg-state_warning_surface { background-color: #5e2000 !important; }
      .mw-email-bd-state_warning_surface { border-color: #5e2000 !important; }
      .mw-email-fg-state_warning_border { color: #ae4100 !important; }
      .mw-email-bg-state_warning_border { background-color: #ae4100 !important; }
      .mw-email-bd-state_warning_border { border-color: #ae4100 !important; }
      .mw-email-fg-state_warning_text { color: #ffc1a2 !important; }
      .mw-email-bg-state_warning_text { background-color: #ffc1a2 !important; }
      .mw-email-bd-state_warning_text { border-color: #ffc1a2 !important; }
      .mw-email-fg-state_warning_accent { color: #ff7c28 !important; }
      .mw-email-bg-state_warning_accent { background-color: #ff7c28 !important; }
      .mw-email-bd-state_warning_accent { border-color: #ff7c28 !important; }
      .mw-email-fg-state_error_surface { color: #5e0000 !important; }
      .mw-email-bg-state_error_surface { background-color: #5e0000 !important; }
      .mw-email-bd-state_error_surface { border-color: #5e0000 !important; }
      .mw-email-fg-state_error_border { color: #ab0505 !important; }
      .mw-email-bg-state_error_border { background-color: #ab0505 !important; }
      .mw-email-bd-state_error_border { border-color: #ab0505 !important; }
      .mw-email-fg-state_error_text { color: #ffa2a2 !important; }
      .mw-email-bg-state_error_text { background-color: #ffa2a2 !important; }
      .mw-email-bd-state_error_text { border-color: #ffa2a2 !important; }
      .mw-email-fg-state_error_accent { color: #ee3c3c !important; }
      .mw-email-bg-state_error_accent { background-color: #ee3c3c !important; }
      .mw-email-bd-state_error_accent { border-color: #ee3c3c !important; }
      .mw-email-fg-state_info_surface { color: #004f5d !important; }
      .mw-email-bg-state_info_surface { background-color: #004f5d !important; }
      .mw-email-bd-state_info_surface { border-color: #004f5d !important; }
      .mw-email-fg-state_info_border { color: #08859a !important; }
      .mw-email-bg-state_info_border { background-color: #08859a !important; }
      .mw-email-bd-state_info_border { border-color: #08859a !important; }
      .mw-email-fg-state_info_text { color: #a2f0fe !important; }
      .mw-email-bg-state_info_text { background-color: #a2f0fe !important; }
      .mw-email-bd-state_info_text { border-color: #a2f0fe !important; }
      .mw-email-fg-state_info_accent { color: #3dc5db !important; }
      .mw-email-bg-state_info_accent { background-color: #3dc5db !important; }
      .mw-email-bd-state_info_accent { border-color: #3dc5db !important; }
      .mw-email-fg-state_alert_surface { color: #5e5600 !important; }
      .mw-email-bg-state_alert_surface { background-color: #5e5600 !important; }
      .mw-email-bd-state_alert_surface { border-color: #5e5600 !important; }
      .mw-email-fg-state_alert_border { color: #ae9300 !important; }
      .mw-email-bg-state_alert_border { background-color: #ae9300 !important; }
      .mw-email-bd-state_alert_border { border-color: #ae9300 !important; }
      .mw-email-fg-state_alert_text { color: #fff7a2 !important; }
      .mw-email-bg-state_alert_text { background-color: #fff7a2 !important; }
      .mw-email-bd-state_alert_text { border-color: #fff7a2 !important; }
      .mw-email-fg-state_alert_accent { color: #ffd52e !important; }
      .mw-email-bg-state_alert_accent { background-color: #ffd52e !important; }
      .mw-email-bd-state_alert_accent { border-color: #ffd52e !important; }
      }
    </style>
  </head>
  <body bgcolor="#f6f6f7" class="mw-email-bg-page_background" style="background-color:#f6f6f7;margin:0;padding:0;width:100%;word-spacing:normal;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%">
    <div style="display:none;max-height:0;overflow:hidden">͏‌ ͏‌ </div>
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f6f6f7" class="mw-email-bg-page_background" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;background-color:#f6f6f7">
      <tbody>
        <tr>
          <td align="center" style="padding:0">
            <!--[if mso]>
              <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center">
                <tr>
                  <td><![endif]-->
            <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;width:100%;max-width:600px;margin:0 auto">
              <tbody>
                <tr>
                  <td style="padding:0">
                    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#ffffff" class="mw-email-bg-surface" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;background-color:#ffffff">
                      <tbody>
                        <tr>
                          <td style="padding:24px 24px;text-align:left;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif">
                            <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse:collapse">
                              <tbody>
                                <tr>
                                  <td class="mw-email-fg-body" style="color:#191d22;padding:12px 0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px;font-weight:400;text-align:left;vertical-align:top">
                                    Midwest License — Team <span style="color:#252a30">× 1</span>
                                  </td>
                                  <td class="mw-email-fg-body" style="color:#191d22;padding:12px 0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px;font-weight:400;text-align:right;vertical-align:top;white-space:nowrap">$240.00</td>
                                </tr>
                                <tr>
                                  <td class="mw-email-fg-body" style="color:#191d22;padding:12px 0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px;font-weight:400;text-align:left;vertical-align:top">
                                    Priority Support (annual) <span style="color:#252a30">× 1</span>
                                  </td>
                                  <td class="mw-email-fg-body" style="color:#191d22;padding:12px 0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px;font-weight:400;text-align:right;vertical-align:top;white-space:nowrap">$120.00</td>
                                </tr>
                                <tr>
                                  <td colspan="2" style="padding-top:12px">
                                    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;margin-top:0;margin-bottom:0">
                                      <tbody>
                                        <tr>
                                          <td class="mw-email-bd-border" style="border-color:#bbbfc3;border-top-width:1px;border-top-style:solid;font-size:0;line-height:0;height:0"> </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>
                                <tr>
                                  <td class="mw-email-fg-muted" style="color:#252a30;padding:4px 0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px;font-weight:400;text-align:left;vertical-align:top">Subtotal</td>
                                  <td class="mw-email-fg-body" style="color:#191d22;padding:4px 0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px;font-weight:400;text-align:right;vertical-align:top;white-space:nowrap">$360.00</td>
                                </tr>
                                <tr>
                                  <td class="mw-email-fg-muted" style="color:#252a30;padding:4px 0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px;font-weight:400;text-align:left;vertical-align:top">Shipping</td>
                                  <td class="mw-email-fg-body" style="color:#191d22;padding:4px 0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px;font-weight:400;text-align:right;vertical-align:top;white-space:nowrap">$0.00</td>
                                </tr>
                                <tr>
                                  <td class="mw-email-fg-muted" style="color:#252a30;padding:4px 0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px;font-weight:400;text-align:left;vertical-align:top">Tax</td>
                                  <td class="mw-email-fg-body" style="color:#191d22;padding:4px 0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px;font-weight:400;text-align:right;vertical-align:top;white-space:nowrap">$28.80</td>
                                </tr>
                                <tr>
                                  <td colspan="2">
                                    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;margin-top:0;margin-bottom:0">
                                      <tbody>
                                        <tr>
                                          <td class="mw-email-bd-border" style="border-color:#bbbfc3;border-top-width:1px;border-top-style:solid;font-size:0;line-height:0;height:0"> </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>
                                <tr>
                                  <td class="mw-email-fg-heading" style="color:#000000;padding:12px 0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:16px;font-weight:700;text-align:left;vertical-align:top">Total</td>
                                  <td class="mw-email-fg-heading" style="color:#000000;padding:12px 0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:16px;font-weight:700;text-align:right;vertical-align:top;white-space:nowrap">$388.80</td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
            <!--[if mso]></td>
          </tr>
        </table>
            <![endif]-->
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
<% theme = params[:theme].presence || "blue" %>
<%= midwest_email(theme: theme, title: "Receipt") do %>
  <%= midwest_email_receipt(
        items: [
          { name: "Midwest License — Team", qty: 1, amount: 240.00 },
          { name: "Priority Support (annual)", qty: 1, amount: 120.00 }
        ],
        subtotal: 360.00, tax: 28.80, shipping: 0.00, total: 388.80, currency: "$"
      ) %>
<% end %>

Receipt

Line items with subtotal / tax / total.

Param Description Input

Brand theme

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

Accessibility

Figma embed for Sections/receipt

Annotate a preview to embed its Figma design here:

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