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>
 <ranking-list-card
  :card="{ title: 'Transactions', date: '23 - 30 March 2021' }"
  :item="[
    {
      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>
import RankingListCard from '@/examples/Cards/RankingListCard.vue";

export default {
 components: {
    RankingListCard,
   },
 };
</script>

1<template>
2 <ranking-list-card
3  :card="{ title: 'Transactions', date: '23 - 30 March 2021' }"
4  :item="[
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>
31import RankingListCard from '@/examples/Cards/RankingListCard.vue";
32
33export default {
34 components: {
35    RankingListCard,
36   },
37 };
38</script>

Props Information

Name	Type	Default	Description
card	{ title: string, subtitle: string, date: string }		Used to set the `RankingListCard` title, subtitle, and date.
item	[ title: string, date: string, amount: string, icon: string, color: string ]		Used to set the `RankingList` title, date, amount, icon, and color.