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
<div class="midwest-social-preview-card midwest-social-preview-tiktok">
  <div class="midwest-social-preview-tiktok-frame">
    <img class="midwest-social-preview-tiktok-poster" src="https://picsum.photos/seed/tt1/360/640" alt="">
    <div class="midwest-social-preview-tiktok-play">
      <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="Play"><title>Play</title>
            <path d="M133 440a35.37 35.37 0 01-17.5-4.67c-12-6.8-19.46-20-19.46-34.33V111c0-14.37 7.46-27.53 19.46-34.33a35.13 35.13 0 0135.77.45l247.85 148.36a36 36 0 010 61l-247.89 148.4A35.5 35.5 0 01133 440z"></path></svg>
        </div>
      </div>
    </div>
    <div class="midwest-social-preview-tiktok-rail">
      <div class="midwest-social-preview-tiktok-rail-avatar">
        <div class="midwest-social-preview-avatar">
          <img src="https://i.pravatar.cc/100?u=jane" alt="@janesmith">
        </div>
        <span class="midwest-social-preview-tiktok-follow">
          <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="Add"><title>Add</title>
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 112v288M400 256H112"></path></svg>
            </div>
          </div>
        </span>
      </div>
      <button type="button" class="midwest-social-preview-tiktok-action" aria-label="Like">
        <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="Heart"><title>Heart</title>
              <path d="M256 448a32 32 0 01-18-5.57c-78.59-53.35-112.62-89.93-131.39-112.8-40-48.75-59.15-98.8-58.61-153C48.63 114.52 98.46 64 159.08 64c44.08 0 74.61 24.83 92.39 45.51a6 6 0 009.06 0C278.31 88.81 308.84 64 352.92 64c60.62 0 110.45 50.52 111.08 112.64.54 54.21-18.63 104.26-58.61 153-18.77 22.87-52.8 59.45-131.39 112.8a32 32 0 01-18 5.56z"></path></svg>
          </div>
        </div>
        <span>128.4K</span>
      </button>
      <button type="button" class="midwest-social-preview-tiktok-action" aria-label="Comment">
        <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 ellipses"><title>Chatbubble ellipses</title>
              <path d="M398 81.84A227.4 227.4 0 00255.82 32C194.9 32 138 55.47 95.46 98.09 54.35 139.33 31.82 193.78 32 251.37a215.66 215.66 0 0035.65 118.76l.19.27c.28.41.57.82.86 1.22s.65.92.73 1.05l.22.4c1.13 2 2 4.44 1.23 6.9l-18.42 66.66a29.13 29.13 0 00-1.2 7.63A25.69 25.69 0 0076.83 480a29.44 29.44 0 0010.45-2.29l67.49-24.36.85-.33a14.75 14.75 0 015.8-1.15 15.12 15.12 0 015.37 1c1.62.63 16.33 6.26 31.85 10.6 12.9 3.6 39.74 9 60.77 9 59.65 0 115.35-23.1 156.83-65.06C457.36 365.77 480 310.42 480 251.49a213.5 213.5 0 00-4.78-45c-10.34-48.62-37.76-92.9-77.22-124.65zM87.48 380zM160 288a32 32 0 1132-32 32 32 0 01-32 32zm96 0a32 32 0 1132-32 32 32 0 01-32 32zm96 0a32 32 0 1132-32 32 32 0 01-32 32z"></path></svg>
          </div>
        </div>
        <span>2.3K</span>
      </button>
      <button type="button" class="midwest-social-preview-tiktok-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"><title>Bookmark</title>
              <path d="M400 480a16 16 0 01-10.63-4L256 357.41 122.63 476A16 16 0 0196 464V96a64.07 64.07 0 0164-64h192a64.07 64.07 0 0164 64v368a16 16 0 01-16 16z"></path></svg>
          </div>
        </div>
        <span>8.9K</span>
      </button>
      <button type="button" class="midwest-social-preview-tiktok-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="Arrow redo"><title>Arrow redo</title>
              <path d="M58.79 439.13A16 16 0 0148 424c0-73.1 14.68-131.56 43.65-173.77 35-51 90.21-78.46 164.35-81.87V88a16 16 0 0127.05-11.57l176 168a16 16 0 010 23.14l-176 168A16 16 0 01256 424v-79.77c-45 1.36-79 8.65-106.07 22.64-29.25 15.12-50.46 37.71-73.32 67a16 16 0 01-17.82 5.28z"></path></svg>
          </div>
        </div>
        <span>15.6K</span>
      </button>
    </div>
    <div class="midwest-social-preview-tiktok-overlay">
      <div class="midwest-social-preview-tiktok-handle">
        <h1>@janesmith</h1>
      </div>
      <p class="midwest-social-preview-tiktok-caption">Behind the scenes of our new design system 🎨 #design #ui #components</p>
      <div class="midwest-social-preview-tiktok-sound">
        <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="Musical notes"><title>Musical notes</title>
              <path d="M421.84 37.37a25.86 25.86 0 00-22.6-4.46L199.92 86.49A32.3 32.3 0 00176 118v226c0 6.74-4.36 12.56-11.11 14.83l-.12.05-52 18C92.88 383.53 80 402 80 423.91a55.54 55.54 0 0023.23 45.63A54.78 54.78 0 00135.34 480a55.82 55.82 0 0017.75-2.93l.38-.13 21.84-7.94A47.84 47.84 0 00208 423.91v-212c0-7.29 4.77-13.21 12.16-15.07l.21-.06L395 150.14a4 4 0 015 3.86v141.93c0 6.75-4.25 12.38-11.11 14.68l-.25.09-50.89 18.11A49.09 49.09 0 00304 375.92a55.67 55.67 0 0023.23 45.8 54.63 54.63 0 0049.88 7.35l.36-.12 21.84-7.95A47.83 47.83 0 00432 375.92V58a25.74 25.74 0 00-10.16-20.63z"></path></svg>
          </div>
        </div>
        <span>original sound - janesmith</span>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
<%= midwest_social_preview_tiktok(
  name: "Jane Smith",
  handle: "@janesmith",
  content_text: "Behind the scenes of our new design system 🎨 #design #ui #components",
  avatar_url: "https://i.pravatar.cc/100?u=jane",
  images: ["https://picsum.photos/seed/tt1/360/640"],
  sound_name: "original sound - janesmith",
  likes: 128_400,
  comments: 2_310,
  bookmarks: 8_900,
  shares: 15_600
) %>

TikTok

TikTok-styled vertical video preview with centered play affordance, right-hand action rail (like/comment/bookmark/share), and bottom overlay holding the handle, caption, and sound row.

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

Annotate a preview to embed its Figma design here:

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