Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
<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">
  <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">
      <h2 class="midwest-song__info">
        <span>Midnight City</span> / M83
      </h2>
    </div>
  </button>
</div>
1
2
3
4
5
6
7
8
9
10
11
<%#
  Default song track display — shows index, title, and artist.
%>
<%= midwest_song(
      title: "Midnight City",
      artist: "M83",
      album: "Hurry Up, We're Dreaming",
      index: 1,
      src: "/audio/m83-midnight-city.mp3"
    ) %>

Default

A single track in a playlist, displaying index number, title, and artist.

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

Annotate a preview to embed its Figma design here:

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