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-index="1" class="midwest-song is-playing">
  <button type="button" data-action="click->midwest-playlist#playSong" aria-label="Play Midnight City by M83">
    <span class="midwest-song__index">
      <div class="midwest-icon midwest-song__playing-icon" aria-hidden="true">
        <div class="midwest-icon-inner">
          <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" aria-hidden="true"><path d="M133 440a35.37 35.37 0 01-17.5-4.67c-12-6.8-19.46-20-19.46-34.33V111c0-14.37 7.46-27.53 19.46-34.33a35.13 35.13 0 0135.77.45l247.85 148.36a36 36 0 010 61l-247.89 148.4A35.5 35.5 0 01133 440z"></path></svg>
        </div>
      </div>
    </span>
    <div class="midwest-song__tracklisting">
      <h2 class="midwest-song__info">
        <span>Midnight City</span> / M83
      </h2>
    </div>
  </button>
</div>
<div data-src="/audio/weeknd-starboy.mp3" data-title="Starboy" data-artist="The Weeknd" data-album="Starboy" data-index="2" class="midwest-song">
  <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">
      <h2 class="midwest-song__info">
        <span>Starboy</span> / The Weeknd
      </h2>
    </div>
  </button>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%#
  Playing state — the active track shows a play icon and highlighted styling.
%>
<%= midwest_song(
      title: "Midnight City",
      artist: "M83",
      album: "Hurry Up, We're Dreaming",
      index: 1,
      src: "/audio/m83-midnight-city.mp3",
      playing: true
    ) %>
<%= midwest_song(
      title: "Starboy",
      artist: "The Weeknd",
      album: "Starboy",
      index: 2,
      src: "/audio/weeknd-starboy.mp3"
    ) %>

Playing State

When a track is playing, it shows a play icon and highlighted styling.

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

Annotate a preview to embed its Figma design here:

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