Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
<div class="max-w-sm">
  <div class="midwest-image">
    <div class="midwest-image-poster" style="background-image: url('https://picsum.photos/80/60?hmac=k5EUl8hekITjm1Q6F9hjkV_dZsVtr9VwXh_MSf4SbxQ')"></div>
    <img class="midwest-image-main" src="https://fastly.picsum.photos/id/685/800/600.jpg?hmac=sWb0xR86JlxAieZShPwfbn0gAT0FFv55TkLcfQTw0Hk" alt="Image with blurred poster" loading="lazy">
  </div>
</div>
1
2
3
4
5
6
7
<div class="max-w-sm">
  <%= render Midwest::ImageComponent.new(
    src: 'https://fastly.picsum.photos/id/685/800/600.jpg?hmac=sWb0xR86JlxAieZShPwfbn0gAT0FFv55TkLcfQTw0Hk',
    poster: 'https://picsum.photos/80/60?hmac=k5EUl8hekITjm1Q6F9hjkV_dZsVtr9VwXh_MSf4SbxQ',
    alt: 'Image with blurred poster'
  ) %>
</div>

With poster

Pass poster: (a low-quality placeholder URL) to show a blurred background while the main image loads.

No params configured.

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

Accessibility

Figma embed for Image/with_poster

Annotate a preview to embed its Figma design here:

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