Koyaka
Patreon

List

Basic List

Preview Code
  • Most played songs this week
  • avatar
    Kingston
    Remaining Reason
  • avatar
    Lana
    Midnight Dreams
  • avatar
    Aria
    Neon Nights
  • avatar
    Jaxon
    Endless Echo
  • avatar
    Sophia
    Starry Skies 

    <ul class="list">
        <li class="label">Most played songs this week</li>

        <li>
            <div class="avatar">
                <img src="https://i.pravatar.cc/400?img=58" alt="avatar" />
            </div>
            <div class="flex-grow">
                <strong>Kingston</strong>
                <div class="text-7 mt-1 uppercase font-semibold">
                    Remaining Reason
                </div>
            </div>
            <div>
                <button class="button ghost">
                    <div class="icon"><i class="fa-solid fa-play"></i></div>
                </button>
                <button class="button ghost">
                    <div class="icon"><i class="fa-regular fa-heart"></i></div>
                </button>
            </div>
        </li>

        <li>
            <div class="avatar">
                <img src="https://i.pravatar.cc/400?img=12" alt="avatar" />
            </div>
            <div class="flex-grow">
                <strong>Lana</strong>
                <div class="text-7 mt-1 uppercase font-semibold">
                    Midnight Dreams
                </div>
            </div>
            <div>
                <button class="button ghost">
                    <div class="icon"><i class="fa-solid fa-play"></i></div>
                </button>
                <button class="button ghost">
                    <div class="icon"><i class="fa-regular fa-heart"></i></div>
                </button>
            </div>
        </li>

        <li>
            <div class="avatar">
                <img src="https://i.pravatar.cc/400?img=25" alt="avatar" />
            </div>
            <div class="flex-grow">
                <strong>Aria</strong>
                <div class="text-7 mt-1 uppercase font-semibold">
                    Neon Nights
                </div>
            </div>
            <div>
                <button class="button ghost">
                    <div class="icon"><i class="fa-solid fa-play"></i></div>
                </button>
                <button class="button ghost">
                    <div class="icon"><i class="fa-regular fa-heart"></i></div>
                </button>
            </div>
        </li>

        <li>
            <div class="avatar">
                <img src="https://i.pravatar.cc/400?img=37" alt="avatar" />
            </div>
            <div class="flex-grow">
                <strong>Jaxon</strong>
                <div class="text-7 mt-1 uppercase font-semibold">
                    Endless Echo
                </div>
            </div>
            <div>
                <button class="button ghost">
                    <div class="icon"><i class="fa-solid fa-play"></i></div>
                </button>
                <button class="button ghost">
                    <div class="icon"><i class="fa-regular fa-heart"></i></div>
                </button>
            </div>
        </li>

        <li>
            <div class="avatar">
                <img src="https://i.pravatar.cc/400?img=44" alt="avatar" />
            </div>
            <div class="flex-grow">
                <strong>Sophia</strong>
                <div class="text-7 mt-1 uppercase font-semibold">
                    Starry Skies
                </div>
            </div>
            <div>
                <button class="button ghost">
                    <div class="icon"><i class="fa-solid fa-play"></i></div>
                </button>
                <button class="button ghost">
                    <div class="icon"><i class="fa-regular fa-heart"></i></div>
                </button>
            </div>
        </li>
    </ul>

List Hoverable

Preview Code
  • Most played songs this week
  • avatar
    Kingston
    Remaining Reason
  • avatar
    Lana
    Midnight Dreams
  • avatar
    Aria
    Neon Nights
  • avatar
    Jaxon
    Endless Echo
  • avatar
    Sophia
    Starry Skies 

    <ul class="list hoverable">
        <li class="label">Most played songs this week</li>

        <li>
            <div class="avatar">
                <img src="https://i.pravatar.cc/400?img=58" alt="avatar" />
            </div>
            <div class="flex-grow">
                <strong>Kingston</strong>
                <div class="text-7 mt-1 uppercase font-semibold">
                    Remaining Reason
                </div>
            </div>
            <div>
                <button class="button ghost">
                    <div class="icon"><i class="fa-solid fa-play"></i></div>
                </button>
                <button class="button ghost">
                    <div class="icon"><i class="fa-regular fa-heart"></i></div>
                </button>
            </div>
        </li>

        <li>
            <div class="avatar">
                <img src="https://i.pravatar.cc/400?img=12" alt="avatar" />
            </div>
            <div class="flex-grow">
                <strong>Lana</strong>
                <div class="text-7 mt-1 uppercase font-semibold">
                    Midnight Dreams
                </div>
            </div>
            <div>
                <button class="button ghost">
                    <div class="icon"><i class="fa-solid fa-play"></i></div>
                </button>
                <button class="button ghost">
                    <div class="icon"><i class="fa-regular fa-heart"></i></div>
                </button>
            </div>
        </li>

        <li>
            <div class="avatar">
                <img src="https://i.pravatar.cc/400?img=25" alt="avatar" />
            </div>
            <div class="flex-grow">
                <strong>Aria</strong>
                <div class="text-7 mt-1 uppercase font-semibold">
                    Neon Nights
                </div>
            </div>
            <div>
                <button class="button ghost">
                    <div class="icon"><i class="fa-solid fa-play"></i></div>
                </button>
                <button class="button ghost">
                    <div class="icon"><i class="fa-regular fa-heart"></i></div>
                </button>
            </div>
        </li>

        <li>
            <div class="avatar">
                <img src="https://i.pravatar.cc/400?img=37" alt="avatar" />
            </div>
            <div class="flex-grow">
                <strong>Jaxon</strong>
                <div class="text-7 mt-1 uppercase font-semibold">
                    Endless Echo
                </div>
            </div>
            <div>
                <button class="button ghost">
                    <div class="icon"><i class="fa-solid fa-play"></i></div>
                </button>
                <button class="button ghost">
                    <div class="icon"><i class="fa-regular fa-heart"></i></div>
                </button>
            </div>
        </li>

        <li>
            <div class="avatar">
                <img src="https://i.pravatar.cc/400?img=44" alt="avatar" />
            </div>
            <div class="flex-grow">
                <strong>Sophia</strong>
                <div class="text-7 mt-1 uppercase font-semibold">
                    Starry Skies
                </div>
            </div>
            <div>
                <button class="button ghost">
                    <div class="icon"><i class="fa-solid fa-play"></i></div>
                </button>
                <button class="button ghost">
                    <div class="icon"><i class="fa-regular fa-heart"></i></div>
                </button>
            </div>
        </li>
    </ul>

List Hoverable + Compact

Preview Code
  • Most played songs this week
  • Remaining Reason
  • Midnight Dreams
  • Neon Nights
  • Endless Echo
  • Starry Skies
  • Ocean Breeze
  • Golden Hour

    <ul class="list hoverable compact">
        <li class="label">Most played songs this week</li>
        <li>Remaining Reason</li>
        <li>Midnight Dreams</li>
        <li>Neon Nights</li>
        <li>Endless Echo</li>
        <li>Starry Skies</li>
        <li>Ocean Breeze</li>
        <li>Golden Hour</li>
    </ul>

List Solid

Preview Code
  • Most played songs this week
  • Remaining Reason
  • Midnight Dreams
  • Neon Nights
  • Endless Echo
  • Starry Skies
  • Ocean Breeze
  • Golden Hour

    <ul class="list solid hoverable">
        <li class="label">Most played songs this week</li>
        <li>Remaining Reason</li>
        <li>Midnight Dreams</li>
        <li>Neon Nights</li>
        <li>Endless Echo</li>
        <li>Starry Skies</li>
        <li>Ocean Breeze</li>
        <li>Golden Hour</li>
    </ul>

Contents