Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
<div data-src="/audio/sample-track.mp3" data-title="Song Title" data-artist="Artist Name" data-album="Album Name" data-picture="/images/albums/sample.jpg" data-index="1" class="midwest-song">
  <button type="button" data-action="click->midwest-playlist#playSong" aria-label="Play Song Title by Artist Name">
    <span class="midwest-song__index">
      01
    </span>
    <div class="midwest-song__tracklisting">
      <h2 class="midwest-song__info">
        <span>Song Title</span> / Artist Name
      </h2>
    </div>
    <img class="midwest-song__backdrop" alt="Album art for Song Title by Artist Name" src="/images/albums/sample.jpg" />
  </button>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%#
  Playground preview — renders with the provided parameters.
%>
<%= midwest_song(
  title: params[:title].presence || "Song Title",
  artist: params[:artist].presence || "Artist Name",
  album: params[:album].presence || "Album Name",
  index: (params[:index].presence || 1).to_i,
  src: "/audio/sample-track.mp3",
  playing: params[:playing] == "true",
  artwork: params[:artwork] == "true",
  picture: "/images/albums/sample.jpg"
) %>

Playground

Explore the song component with live parameters.

Param Description Input

Track title

Artist name

Album name

Track index

Currently playing

Show artwork preview

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

Accessibility

Figma embed for Song/playground

Annotate a preview to embed its Figma design here:

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