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
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<!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>Progress</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:32px 24px;text-align:left;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif">
                            <h2 class="mw-email-fg-heading" style="color:#000000;margin:0;padding:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:20px;font-weight:600;line-height:1.375;text-align:left">Finish setting up your profile</h2>
                            <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
                              <tbody>
                                <tr>
                                  <td height="12" style="height:12px;line-height:12px;font-size:0;mso-line-height-rule:exactly"> </td>
                                </tr>
                              </tbody>
                            </table>
                            <p class="mw-email-fg-body" style="color:#191d22;margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:16px;font-weight:400;line-height:1.5;text-align:left">A complete profile helps your teammates recognise you.</p>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <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;margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px;font-weight:500;text-align:left">Profile 60% complete</td>
                                  <td class="mw-email-fg-muted" style="color:#252a30;margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px;text-align:right;white-space:nowrap">60%</td>
                                </tr>
                              </tbody>
                            </table>
                            <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
                              <tbody>
                                <tr>
                                  <td height="8" style="height:8px;line-height:8px;font-size:0;mso-line-height-rule:exactly"> </td>
                                </tr>
                              </tbody>
                            </table>
                            <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;table-layout:fixed;border-radius:10px;overflow:hidden">
                              <tbody>
                                <tr>
                                  <td class="mw-email-bg-accent" style="background-color:#1c7ed6;width:60%;height:10px;font-size:0;line-height:10px" height="10"> </td>
                                  <td class="mw-email-bg-border" style="background-color:#bbbfc3;width:40%;height:10px;font-size:0;line-height:10px" height="10"> </td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <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:0 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%" 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;margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:14px;font-weight:500;text-align:left">Storage used</td>
                                        </tr>
                                      </tbody>
                                    </table>
                                    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
                                      <tbody>
                                        <tr>
                                          <td height="8" style="height:8px;line-height:8px;font-size:0;mso-line-height-rule:exactly"> </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;table-layout:fixed;border-radius:10px;overflow:hidden">
                                      <tbody>
                                        <tr>
                                          <td class="mw-email-bg-accent" style="background-color:#1c7ed6;width:80%;height:10px;font-size:0;line-height:10px" height="10"> </td>
                                          <td class="mw-email-bg-border" style="background-color:#bbbfc3;width:20%;height:10px;font-size:0;line-height:10px" height="10"> </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </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
11
<% theme = params[:theme].presence || "blue" %>
<% value = (params[:value].presence || 60).to_i %>
<%= midwest_email(theme: theme, title: "Progress") do %>
  <%= midwest_email_content(heading: "Finish setting up your profile") do %>
    <%= midwest_email_text("A complete profile helps your teammates recognise you.") %>
  <% end %>
  <%= midwest_email_progress(value: value, label: "Profile #{value}% complete") %>
  <%= midwest_email_section(background: :surface, padding_y: :none) do %>
    <%= midwest_email_progress(value: 8, max: 10, label: "Storage used", show_percentage: false) %>
  <% end %>
<% end %>

Progress

A table-drawn progress bar with a label and percentage.

Param Description Input

Brand theme

Percent complete (0–100)

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

Accessibility

Figma embed for Sections/progress

Annotate a preview to embed its Figma design here:

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