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
<div class="flex flex-col gap-8">
  <div class="midwest-social-preview-card midwest-social-preview-twitter">
    <div class="midwest-social-preview-header">
      <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="Logo twitter"><title>Logo twitter</title>
            <path d="M496 109.5a201.8 201.8 0 01-56.55 15.3 97.51 97.51 0 0043.33-53.6 197.74 197.74 0 01-62.56 23.5A99.14 99.14 0 00348.31 64c-54.42 0-98.46 43.4-98.46 96.9a93.21 93.21 0 002.54 22.1 280.7 280.7 0 01-203-101.3A95.69 95.69 0 0036 130.4c0 33.6 17.53 63.3 44 80.7A97.5 97.5 0 0135.22 199v1.2c0 47 34 86.1 79 95a100.76 100.76 0 01-25.94 3.4 94.38 94.38 0 01-18.51-1.8c12.51 38.5 48.92 66.5 92.05 67.3A199.59 199.59 0 0139.5 405.6a203 203 0 01-23.5-1.4A278.68 278.68 0 00166.74 448c181.36 0 280.44-147.7 280.44-275.8 0-4.2-.11-8.4-.31-12.5A198.48 198.48 0 00496 109.5z"></path></svg>
        </div>
      </div>
    </div>
    <div class="midwest-social-preview-twitter-body">
      <div class="midwest-social-preview-twitter-avatar-col">
        <div class="midwest-social-preview-avatar">
          <img src="https://i.pravatar.cc/100?u=jane" alt="Jane Smith">
        </div>
      </div>
      <div class="midwest-social-preview-twitter-content-col">
        <div class="midwest-social-preview-profile">
          <div class="midwest-social-preview-profile-left">
            <div class="midwest-social-preview-name">
              <h1>Jane Smith</h1>
              <p>@janesmith · Now</p>
            </div>
          </div>
          <div class="midwest-social-preview-profile-right">
            <div class="midwest-icon midwest-social-preview-ellipsis">
              <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="Chevron down"><title>Chevron down</title>
                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 184l144 144 144-144"></path></svg>
              </div>
            </div>
          </div>
        </div>
        <div class="midwest-social-preview-body">
          <p>Just shipped a new feature! Really proud of the team's work on this release.</p>
        </div>
        <div class="midwest-social-preview-mosaic mosaic-1 mosaic-rounded">
          <img src="https://picsum.photos/seed/tw1/450/300" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="midwest-social-preview-card midwest-social-preview-twitter">
    <div class="midwest-social-preview-header">
      <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="Logo twitter"><title>Logo twitter</title>
            <path d="M496 109.5a201.8 201.8 0 01-56.55 15.3 97.51 97.51 0 0043.33-53.6 197.74 197.74 0 01-62.56 23.5A99.14 99.14 0 00348.31 64c-54.42 0-98.46 43.4-98.46 96.9a93.21 93.21 0 002.54 22.1 280.7 280.7 0 01-203-101.3A95.69 95.69 0 0036 130.4c0 33.6 17.53 63.3 44 80.7A97.5 97.5 0 0135.22 199v1.2c0 47 34 86.1 79 95a100.76 100.76 0 01-25.94 3.4 94.38 94.38 0 01-18.51-1.8c12.51 38.5 48.92 66.5 92.05 67.3A199.59 199.59 0 0139.5 405.6a203 203 0 01-23.5-1.4A278.68 278.68 0 00166.74 448c181.36 0 280.44-147.7 280.44-275.8 0-4.2-.11-8.4-.31-12.5A198.48 198.48 0 00496 109.5z"></path></svg>
        </div>
      </div>
    </div>
    <div class="midwest-social-preview-twitter-body">
      <div class="midwest-social-preview-twitter-avatar-col">
        <div class="midwest-social-preview-avatar">
          <img src="https://i.pravatar.cc/100?u=jane" alt="Jane Smith">
        </div>
      </div>
      <div class="midwest-social-preview-twitter-content-col">
        <div class="midwest-social-preview-profile">
          <div class="midwest-social-preview-profile-left">
            <div class="midwest-social-preview-name">
              <h1>Jane Smith</h1>
              <p>@janesmith · Now</p>
            </div>
          </div>
          <div class="midwest-social-preview-profile-right">
            <div class="midwest-icon midwest-social-preview-ellipsis">
              <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="Chevron down"><title>Chevron down</title>
                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 184l144 144 144-144"></path></svg>
              </div>
            </div>
          </div>
        </div>
        <p class="midwest-social-preview-twitter-reply-to">
          Replying to <span class="midwest-social-preview-twitter-mention">@designsystems</span>
        </p>
        <div class="midwest-social-preview-body">
          <p>Thanks for the kind words! We've been working on this for months.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="midwest-social-preview-card midwest-social-preview-twitter">
    <div class="midwest-social-preview-header">
      <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="Logo twitter"><title>Logo twitter</title>
            <path d="M496 109.5a201.8 201.8 0 01-56.55 15.3 97.51 97.51 0 0043.33-53.6 197.74 197.74 0 01-62.56 23.5A99.14 99.14 0 00348.31 64c-54.42 0-98.46 43.4-98.46 96.9a93.21 93.21 0 002.54 22.1 280.7 280.7 0 01-203-101.3A95.69 95.69 0 0036 130.4c0 33.6 17.53 63.3 44 80.7A97.5 97.5 0 0135.22 199v1.2c0 47 34 86.1 79 95a100.76 100.76 0 01-25.94 3.4 94.38 94.38 0 01-18.51-1.8c12.51 38.5 48.92 66.5 92.05 67.3A199.59 199.59 0 0139.5 405.6a203 203 0 01-23.5-1.4A278.68 278.68 0 00166.74 448c181.36 0 280.44-147.7 280.44-275.8 0-4.2-.11-8.4-.31-12.5A198.48 198.48 0 00496 109.5z"></path></svg>
        </div>
      </div>
    </div>
    <div class="midwest-social-preview-twitter-body">
      <div class="midwest-social-preview-twitter-avatar-col">
        <div class="midwest-social-preview-avatar">
          <img src="https://i.pravatar.cc/100?u=jane" alt="Jane Smith">
        </div>
      </div>
      <div class="midwest-social-preview-twitter-content-col">
        <div class="midwest-social-preview-profile">
          <div class="midwest-social-preview-profile-left">
            <div class="midwest-social-preview-name">
              <h1>Jane Smith</h1>
              <p>@janesmith · Now</p>
            </div>
          </div>
          <div class="midwest-social-preview-profile-right">
            <div class="midwest-icon midwest-social-preview-ellipsis">
              <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="Chevron down"><title>Chevron down</title>
                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 184l144 144 144-144"></path></svg>
              </div>
            </div>
          </div>
        </div>
        <div class="midwest-social-preview-body">
          <p>This is exactly what we needed!</p>
        </div>
        <div class="midwest-social-preview-twitter-quote">
          <div class="midwest-social-preview-name">
            <h1>Design Systems Weekly</h1>
            <p>@designsystems</p>
          </div>
          <div class="midwest-social-preview-body">
            <p>Announcing our new component library v2.0 with 50+ components.</p>
          </div>
        </div>
      </div>
    </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
<div class="flex flex-col gap-8">
  <%# Standard tweet %>
  <%= midwest_social_preview_twitter(
    name: "Jane Smith",
    handle: "@janesmith",
    content_text: "Just shipped a new feature! Really proud of the team's work on this release.",
    avatar_url: "https://i.pravatar.cc/100?u=jane",
    images: ["https://picsum.photos/seed/tw1/450/300"]
  ) %>
  <%# Reply tweet %>
  <%= midwest_social_preview_twitter(
    name: "Jane Smith",
    handle: "@janesmith",
    content_text: "Thanks for the kind words! We've been working on this for months.",
    avatar_url: "https://i.pravatar.cc/100?u=jane",
    reply_to: "@designsystems"
  ) %>
  <%# Quote tweet %>
  <%= midwest_social_preview_twitter(
    name: "Jane Smith",
    handle: "@janesmith",
    content_text: "This is exactly what we needed!",
    avatar_url: "https://i.pravatar.cc/100?u=jane",
    quote_text: "Announcing our new component library v2.0 with 50+ components.",
    quote_name: "Design Systems Weekly",
    quote_handle: "@designsystems"
  ) %>
</div>

Twitter

Twitter/X-styled post preview with side-by-side avatar layout, reply indicator, and quote tweet.

No params configured.

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

Accessibility

Figma embed for Social Preview/twitter

Annotate a preview to embed its Figma design here:

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