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
<div class="midwest-social-preview-card midwest-social-preview-mastodon">
  <div class="midwest-social-preview-header"><span class="midwest-social-preview-wordmark">Mastodon</span></div>
  <div class="midwest-social-preview-mastodon-boosted">
    <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="Repeat"><title>Repeat</title>
          <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M320 120l48 48-48 48"></path><path d="M352 168H144a80.24 80.24 0 00-80 80v16M192 392l-48-48 48-48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path><path d="M160 344h208a80.24 80.24 0 0080-80v-16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg>
      </div>
    </div>
    <span>Alex Rivera boosted</span>
  </div>
  <div class="midwest-social-preview-mastodon-body">
    <div class="midwest-social-preview-mastodon-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-mastodon-content-col">
      <div class="midwest-social-preview-mastodon-meta">
        <div class="midwest-social-preview-mastodon-author">
          <span class="midwest-social-preview-mastodon-name">Jane Smith</span>
          <span class="midwest-social-preview-mastodon-handle">@janesmith@ruby.social</span>
        </div>
        <div class="midwest-social-preview-mastodon-meta-right">
          <span class="midwest-social-preview-mastodon-time">2h</span>
        </div>
      </div>
      <div class="midwest-social-preview-body mx-0 mt-1">
        <p>Excited to share our latest design system update! Building components that scale across platforms.</p>
      </div>
      <div class="midwest-social-preview-mastodon-actions">
        <button type="button" class="midwest-social-preview-mastodon-action" aria-label="Reply">
          <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="Chatbubble outline"><title>Chatbubble outline</title>
                <path d="M87.49 380c1.19-4.38-1.44-10.47-3.95-14.86a44.86 44.86 0 00-2.54-3.8 199.81 199.81 0 01-33-110C47.65 139.09 140.73 48 255.83 48 356.21 48 440 117.54 459.58 209.85a199 199 0 014.42 41.64c0 112.41-89.49 204.93-204.59 204.93-18.3 0-43-4.6-56.47-8.37s-26.92-8.77-30.39-10.11a31.09 31.09 0 00-11.12-2.07 30.71 30.71 0 00-12.09 2.43l-67.83 24.48a16 16 0 01-4.67 1.22 9.6 9.6 0 01-9.57-9.74 15.85 15.85 0 01.6-3.29z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"></path></svg>
            </div>
          </div>
          <span>12</span>
        </button>
        <button type="button" class="midwest-social-preview-mastodon-action" aria-label="Boost">
          <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="Repeat"><title>Repeat</title>
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M320 120l48 48-48 48"></path><path d="M352 168H144a80.24 80.24 0 00-80 80v16M192 392l-48-48 48-48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path><path d="M160 344h208a80.24 80.24 0 0080-80v-16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg>
            </div>
          </div>
          <span>34</span>
        </button>
        <button type="button" class="midwest-social-preview-mastodon-action" aria-label="Favourite">
          <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="Star outline"><title>Star outline</title>
                <path d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path></svg>
            </div>
          </div>
          <span>187</span>
        </button>
        <button type="button" class="midwest-social-preview-mastodon-action" aria-label="Bookmark">
          <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="Bookmark outline"><title>Bookmark outline</title>
                <path d="M352 48H160a48 48 0 00-48 48v368l144-128 144 128V96a48 48 0 00-48-48z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg>
            </div>
          </div>
        </button>
        <button type="button" class="midwest-social-preview-mastodon-action" aria-label="Share">
          <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="Share social outline"><title>Share social outline</title>
                <circle cx="128" cy="256" r="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></circle><circle cx="384" cy="112" r="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></circle><circle cx="384" cy="400" r="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></circle><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M169.83 279.53l172.34 96.94M342.17 135.53l-172.34 96.94"></path></svg>
            </div>
          </div>
        </button>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
<%= midwest_social_preview_mastodon(
  name: "Jane Smith",
  handle: "@janesmith@ruby.social",
  content_text: "Excited to share our latest design system update! Building components that scale across platforms.",
  avatar_url: "https://i.pravatar.cc/100?u=jane",
  timestamp: "2h",
  boosted_by: "Alex Rivera",
  reply_count: 12,
  boost_count: 34,
  favorite_count: 187
) %>

Mastodon

Mastodon-styled (fediverse) post preview with purple wordmark, rounded-square avatar, "X boosted" attribution, native content-warning disclosure, and a five-action bar (reply/boost/favourite/bookmark/share) with inline counts.

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

Annotate a preview to embed its Figma design here:

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