Ranking List Card

The RankingListCard component helps you to simply create a beautiful list of rankings.

Demo

Transactions

23 - 30 March 2021

Netflix
27 March 2020, at 12:30 PM27 March 2020, at 12:30 PM
$ 2,500
Apple
23 March 2020, at 04:30 AM
+ $ 2,000
Partner #22213
19 March 2020, at 02:50 AM
- $ 1,400

<template>
 <RankingListCard
  :card="{ title: 'Transactions', date: '23 - 30 March 2021' }"
  :items="[
    {
      title: 'Netflix',
      date: '27 March 2020, at 12:30 PM',
      amount: '- $ 2,500',
      icon: 'fa-arrow-down',
      color: 'danger',
    },
    {
      title: 'Apple',
      date: '23 March 2020, at 04:30 AM',
      amount: '+ $ 2,000',
      icon: 'fa-arrow-up',
      color: 'success',
    },
    {
      title: 'Partner #22213',
      date: '19 March 2020, at 02:50 AM',
      amount: '+ $ 1,400',
      icon: 'fa-arrow-up',
      color: 'success',
    },
  ]"
/>
</template>

<script setup>
import RankingListCard from "@/examples/Cards/RankingListCard.vue";
</script>

1<template>
2 <RankingListCard
3  :card="{ title: 'Transactions', date: '23 - 30 March 2021' }"
4  :items="[
5    {
6      title: 'Netflix',
7      date: '27 March 2020, at 12:30 PM',
8      amount: '- $ 2,500',
9      icon: 'fa-arrow-down',
10      color: 'danger',
11    },
12    {
13      title: 'Apple',
14      date: '23 March 2020, at 04:30 AM',
15      amount: '+ $ 2,000',
16      icon: 'fa-arrow-up',
17      color: 'success',
18    },
19    {
20      title: 'Partner #22213',
21      date: '19 March 2020, at 02:50 AM',
22      amount: '+ $ 1,400',
23      icon: 'fa-arrow-up',
24      color: 'success',
25    },
26  ]"
27/>
28</template>
29
30<script setup>
31import RankingListCard from "@/examples/Cards/RankingListCard.vue";
32</script>

Props Information

Name	Type	Default	Description
card	title: stringsubtitle: stringdate: string		Used to set the `RankingListCard` title, subtitle, and date.
item	title: stringdate: stringamount: stringicon: stringcolor: string		Used to set the `RankingList` title, date, amount, icon, and color.