Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
<div class="max-w-sm">
  <div class="midwest-image">
    <img class="midwest-image-main" src="https://fastly.picsum.photos/id/685/800/600.jpg?hmac=sWb0xR86JlxAieZShPwfbn0gAT0FFv55TkLcfQTw0Hk" alt="Lightbox suppressed" loading="lazy">
  </div>
</div>
1
2
3
4
5
6
7
8
<div class="max-w-sm">
  <%= render Midwest::ImageComponent.new(
    src: 'https://fastly.picsum.photos/id/685/800/600.jpg?hmac=sWb0xR86JlxAieZShPwfbn0gAT0FFv55TkLcfQTw0Hk',
    large: 'https://picsum.photos/1600/1200?hmac=k5EUl8hekITjm1Q6F9hjkV_dZsVtr9VwXh_MSf4SbxQ',
    alt: 'Lightbox suppressed',
    nozoom: true
  ) %>
</div>

No zoom

Pass nozoom: true to suppress the lightbox even when large: is set.

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

Annotate a preview to embed its Figma design here:

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