Orders List Card

The OrdersListCard allows you to simply create beautiful Orders List Card.

Demo

Top Selling Products

Product	Value	Ads Spent	Refunds
Nike v22 Running 12.821 orders	$130.992	$9.500	13
Black Chair 2.421 orders	$40.600	$9.430	54

<template>
 <OrdersListCard
  title="Top Selling Products"
  :headers="['Product', 'Value', 'Ads Spent', 'Refunds']"
  :lists="[
    {
      title: 'Nike v22 Running',
      order: '12.821',
      values: ['$130.992', '$9.500', '13'],
      info: 'Refund rate is lower with 97% than other products',
      image: 'https://bit.ly/3Te0p0I',
      icon: 'bold-down text-success',
    },
    {
      title: 'Black Chair',
      order: '2.421',
      values: ['$40.600', '$9.430', '54'],
      image: 'https://bit.ly/3Moy2dX',
      icon: 'bold-up text-danger',
    },
  ]"
/>
</template>

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

1<template>
2 <OrdersListCard
3  title="Top Selling Products"
4  :headers="['Product', 'Value', 'Ads Spent', 'Refunds']"
5  :lists="[
6    {
7      title: 'Nike v22 Running',
8      order: '12.821',
9      values: ['$130.992', '$9.500', '13'],
10      info: 'Refund rate is lower with 97% than other products',
11      image: 'https://bit.ly/3Te0p0I',
12      icon: 'bold-down text-success',
13    },
14    {
15      title: 'Black Chair',
16      order: '2.421',
17      values: ['$40.600', '$9.430', '54'],
18      image: 'https://bit.ly/3Moy2dX',
19      icon: 'bold-up text-danger',
20    },
21  ]"
22/>
23</template>
24
25<script setup>
26import OrdersListCard from "@/examples/Cards/OrdersListCard.vue";
27</script>

Props Information

Name	Type	Description
title	String	`title` is used to add the title of the `OrdersListCard` component.
headers	Array	`headers` is is used to add headers to the `OrdersListCard`.
lists*	values titleorderinfoimageicon	`lists` is is used to add a list of items to the `OrdersListCard` component. It is a required prop.