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
<div class="midwest-social-preview-card midwest-social-preview-youtube">
  <div class="midwest-social-preview-youtube-thumb">
    <img class="midwest-social-preview-youtube-poster" src="https://picsum.photos/seed/yt1/640/360" alt="">
    <div class="midwest-social-preview-youtube-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="Logo youtube"><title>Logo youtube</title>
            <path d="M508.64 148.79c0-45-33.1-81.2-74-81.2C379.24 65 322.74 64 265 64h-18c-57.6 0-114.2 1-169.6 3.6C36.6 67.6 3.5 104 3.5 149 1 184.59-.06 220.19 0 255.79q-.15 53.4 3.4 106.9c0 45 33.1 81.5 73.9 81.5 58.2 2.7 117.9 3.9 178.6 3.8q91.2.3 178.6-3.8c40.9 0 74-36.5 74-81.5 2.4-35.7 3.5-71.3 3.4-107q.34-53.4-3.26-106.9zM207 353.89v-196.5l145 98.2z"></path></svg>
        </div>
      </div>
    </div>
    <span class="midwest-social-preview-youtube-duration">14:22</span>
  </div>
  <div class="midwest-social-preview-youtube-watch">
    <div class="midwest-social-preview-avatar">
      <img src="https://i.pravatar.cc/100?u=dsw" alt="Design Systems Weekly">
    </div>
    <div class="midwest-social-preview-youtube-info">
      <h1 class="midwest-social-preview-youtube-title">Building a ViewComponent Design System from Scratch</h1>
      <div class="midwest-social-preview-youtube-channel">
        <span>Design Systems Weekly</span>
        <div class="midwest-icon midwest-social-preview-youtube-verified">
          <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="Checkmark circle"><title>Checkmark circle</title>
              <path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm108.25 138.29l-134.4 160a16 16 0 01-12 5.71h-.27a16 16 0 01-11.89-5.3l-57.6-64a16 16 0 1123.78-21.4l45.29 50.32 122.59-145.91a16 16 0 0124.5 20.58z"></path></svg>
          </div>
        </div>
      </div>
      <p class="midwest-social-preview-youtube-meta">1.2M views ยท Jul 18, 2026</p>
    </div>
    <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="Ellipsis vertical"><title>Ellipsis vertical</title>
          <circle cx="256" cy="256" r="48"></circle><circle cx="256" cy="416" r="48"></circle><circle cx="256" cy="96" r="48"></circle></svg>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
<%= midwest_social_preview_youtube(
  name: "Design Systems Weekly",
  title: "Building a ViewComponent Design System from Scratch",
  avatar_url: "https://i.pravatar.cc/100?u=dsw",
  images: ["https://picsum.photos/seed/yt1/640/360"],
  duration: "14:22",
  views: 1_240_000,
  timestamp: 3.days.ago,
  verified: true
) %>

YouTube

YouTube-styled preview with a 16:9 thumbnail, duration badge, and a watch-row holding the channel avatar, video title, and view count.

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

Annotate a preview to embed its Figma design here:

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