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
<div data-src="/audio/m83-midnight-city.mp3" data-title="Midnight City" data-artist="M83" data-album="Hurry Up, We're Dreaming" data-picture="/images/albums/m83-hurry-up.jpg" data-index="1" class="midwest-song has-artwork">
  <button type="button" data-action="click->midwest-playlist#playSong" aria-label="Play Midnight City by M83">
    <span class="midwest-song__index">
      01
    </span>
    <div class="midwest-song__tracklisting">
      <img class="midwest-song__preview-image" alt="Album art for Midnight City" src="/images/albums/m83-hurry-up.jpg" />
      <h2 class="midwest-song__info">
        <span>Midnight City</span> / M83
      </h2>
    </div>
    <img class="midwest-song__backdrop" alt="Album art for Midnight City by M83" src="/images/albums/m83-hurry-up.jpg" />
  </button>
</div>
<div data-src="/audio/weeknd-starboy.mp3" data-title="Starboy" data-artist="The Weeknd" data-album="Starboy" data-picture="/images/albums/starboy.jpg" data-index="2" class="midwest-song has-artwork">
  <button type="button" data-action="click->midwest-playlist#playSong" aria-label="Play Starboy by The Weeknd">
    <span class="midwest-song__index">
      02
    </span>
    <div class="midwest-song__tracklisting">
      <img class="midwest-song__preview-image" alt="Album art for Starboy" src="/images/albums/starboy.jpg" />
      <h2 class="midwest-song__info">
        <span>Starboy</span> / The Weeknd
      </h2>
    </div>
    <img class="midwest-song__backdrop" alt="Album art for Starboy by The Weeknd" src="/images/albums/starboy.jpg" />
  </button>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<%#
  With artwork enabled — displays album art preview beside the track info.
%>
<%= midwest_song(
      title: "Midnight City",
      artist: "M83",
      album: "Hurry Up, We're Dreaming",
      picture: "/images/albums/m83-hurry-up.jpg",
      index: 1,
      src: "/audio/m83-midnight-city.mp3",
      artwork: true
    ) %>
<%= midwest_song(
      title: "Starboy",
      artist: "The Weeknd",
      album: "Starboy",
      picture: "/images/albums/starboy.jpg",
      index: 2,
      src: "/audio/weeknd-starboy.mp3",
      artwork: true
    ) %>

With Artwork

Enable +artwork:+ to show a preview image alongside the track info.

No params configured.

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

Accessibility

Figma embed for Song/with_artwork

Annotate a preview to embed its Figma design here:

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