Mini Player Card - Soft UI

The MiniPlayerCard component helps you to simply create a beautiful player card.

Demo

Use this example to create an eye-catching player card.

Some Kind Of Blues

Deftones

<template>
 <mini-player-card
  color="primary"
  :song="{ title: 'Some Kind Of Blues', singer: 'Deftones' }"
/>
</template>

<script>
import MiniPlayerCard from '@/examples/Cards/MiniPlayerCard.vue";
export default { components: { MiniPlayerCard, }, };
</script>

1<template>
2 <mini-player-card
3  color="primary"
4  :song="{ title: 'Some Kind Of Blues', singer: 'Deftones' }"
5/>
6</template>
7
8<script>
9import MiniPlayerCard from '@/examples/Cards/MiniPlayerCard.vue";
10export default { components: { MiniPlayerCard, }, };
11</script>

Props Information

Name	Type	Default	Description
color	['success' 'primary' 'secondary' 'info' 'dark' 'danger' 'light' 'warning' 'error']	primary	`color` is used to add overlay color to the `MiniPlayerCard` component.
song	['title' 'singer']		`song` is an object used to add description.