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
39
40
41
42
<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>
<div data-src="/audio/weeknd-blinding-lights.mp3" data-title="Blinding Lights" data-artist="The Weeknd" data-album="After Hours" data-picture="/images/albums/after-hours.jpg" data-index="3" class="midwest-song has-artwork">
  <button type="button" data-action="click->midwest-playlist#playSong" aria-label="Play Blinding Lights by The Weeknd">
    <span class="midwest-song__index">
      03
    </span>
    <div class="midwest-song__tracklisting">
      <img class="midwest-song__preview-image" alt="Album art for Blinding Lights" src="/images/albums/after-hours.jpg" />
      <h2 class="midwest-song__info">
        <span>Blinding Lights</span> / The Weeknd
      </h2>
    </div>
    <img class="midwest-song__backdrop" alt="Album art for Blinding Lights by The Weeknd" src="/images/albums/after-hours.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
24
25
26
27
28
29
30
31
32
33
<%#
  Full song details — all metadata options enabled including artwork and backdrop.
%>
<%= 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
    ) %>
<%= midwest_song(
      title: "Blinding Lights",
      artist: "The Weeknd",
      album: "After Hours",
      picture: "/images/albums/after-hours.jpg",
      index: 3,
      src: "/audio/weeknd-blinding-lights.mp3",
      artwork: true
    ) %>

Full Details

A track with all metadata options including artwork, album, and backdrop.

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

Annotate a preview to embed its Figma design here:

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