Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="midwest-device-frame device-macbook orientation-portrait color-silver has-shadow">
  <div class="midwest-device-frame-body">
    <div class="midwest-device-frame-screen">
      <div class="midwest-video " style="--video-aspect-ratio: 16/9">
        <iframe class="w-full h-auto video-embed" title="Promo video" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
      </div>
    </div>
    <span class="midwest-device-frame-camera" aria-hidden="true"></span>
  </div>
  <div class="midwest-device-frame-base" aria-hidden="true">
    <span class="midwest-device-frame-notch"></span>
  </div>
</div>
1
2
3
4
5
6
7
8
<%= midwest_device_frame(device: :macbook, color: :silver) do |frame| %>
  <% frame.with_screen do %>
    <%= midwest_video(
      url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
      title: "Promo video"
    ) %>
  <% end %>
<% end %>

Rich content

The screen slot accepts arbitrary markup — here a live Video component plays inside a MacBook lid.

No params configured.

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

Accessibility

Figma embed for Device Frame/rich_content

Annotate a preview to embed its Figma design here:

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