Categories List

PRO

The CategoriesList component helps you to simply create a beautiful list of items.

Demo

Categories

Devices
250 in stock 346+ sold
Tickets
23 closed 15 open
Error logs
1 is active 40 closed

<template>
 <CategoriesList
  :items="[
    {
      icon: {
        component: 'ni ni-mobile-button',
        background: 'dark',
      },
      label: 'Devices',
      description: '250 in stock <strong>346+ sold</strong>',
    },
    {
      icon: {
        component: 'ni ni-tag',
        background: 'dark',
      },
      label: 'Tickets',
      description: '123 closed <strong>15 open</strong>',
    },
    {
      icon: { component: 'ni ni-box-2', background: 'dark' },
      label: 'Error logs',
      description: '1 is active <strong>40 closed</strong>',
    },
  ]"
 />
</template>

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

1<template>
2 <CategoriesList
3  :items="[
4    {
5      icon: {
6        component: 'ni ni-mobile-button',
7        background: 'dark',
8      },
9      label: 'Devices',
10      description: '250 in stock <strong>346+ sold</strong>',
11    },
12    {
13      icon: {
14        component: 'ni ni-tag',
15        background: 'dark',
16      },
17      label: 'Tickets',
18      description: '123 closed <strong>15 open</strong>',
19    },
20    {
21      icon: { component: 'ni ni-box-2', background: 'dark' },
22      label: 'Error logs',
23      description: '1 is active <strong>40 closed</strong>',
24    },
25  ]"
26 />
27</template>
28
29<script setup>
30import CategoriesList from "@/examples/Cards/CategoriesList.vue";
31</script>

Props Information

Name	Type	Default	Description
title	String	Categories	Used to set the `CategoriesList` title.
categories*	Array		Used to set the `CategoriesList` items, it should be an `array`of objects and the objects should contain the following keys: `icon`, `label`, `description`. It is a required prop.
isRTL	bool	false	Used to set the direction of `CategoriesList` in RTL pages.