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
<!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>Social</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">
                            <div style="text-align:center;font-size:0">
                              <span style="display:inline-block;padding:0 16px;vertical-align:middle"><a href="https://twitter.com/acme" target="_blank" rel="noopener" style="text-decoration:none"><img src="https://placehold.co/48x48/1d9bf0/ffffff.png?text=X" alt="X" width="24" border="0" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;width:24px;max-width:100%;height:auto"></a></span><span style="display:inline-block;padding:0 16px;vertical-align:middle"><a href="https://github.com/acme" target="_blank" rel="noopener" style="text-decoration:none"><img src="https://placehold.co/48x48/111827/ffffff.png?text=GH" alt="GitHub" width="24" border="0" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;width:24px;max-width:100%;height:auto"></a></span><span style="display:inline-block;padding:0 16px;vertical-align:middle"><a href="https://linkedin.com/company/acme" target="_blank" rel="noopener" style="text-decoration:none"><img src="https://placehold.co/48x48/0a66c2/ffffff.png?text=in" alt="LinkedIn" width="24" border="0" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;width:24px;max-width:100%;height:auto"></a></span>
                            </div>
                          </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: "Social") do %>
  <%= midwest_email_section(background: :surface) do %>
    <%= midwest_email_social(links: [
          { url: "https://twitter.com/acme", image_url: "https://placehold.co/48x48/1d9bf0/ffffff.png?text=X", alt: "X" },
          { url: "https://github.com/acme",  image_url: "https://placehold.co/48x48/111827/ffffff.png?text=GH", alt: "GitHub" },
          { url: "https://linkedin.com/company/acme", image_url: "https://placehold.co/48x48/0a66c2/ffffff.png?text=in", alt: "LinkedIn" }
        ]) %>
  <% end %>
<% end %>

Social

Row of hosted-PNG social icons.

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/social

Annotate a preview to embed its Figma design here:

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