Returnless UI

KPI Card ​

KPI Card is a component that displays a key performance indicator in a card format. It is used to display a single metric or a set of metrics that are important to the user.

Usage ​

Total returns today

952

+ 25%
Total returns last 30 days

10,483

- 25%
js
<script lang="ts" setup>
import {
  Badge,
  BadgeContent,
  BadgeIcon,
  KPICard,
  KPICardSection,
} from '@returnless/focus-ui';
import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/vue/16/solid';
</script>

<template>
  <KPICard>
    <KPICardSection title="Total returns today" value="952">
      <Badge color="green">
        <BadgeContent>+ 25%</BadgeContent>
        <BadgeIcon>
          <ArrowTrendingUpIcon />
        </BadgeIcon>
      </Badge>
    </KPICardSection>
    <KPICardSection title="Total returns last 30 days" value="10,483">
      <Badge color="red">
        <BadgeIcon>
          <ArrowTrendingDownIcon />
        </BadgeIcon>
        <BadgeContent>- 25%</BadgeContent>
      </Badge>
    </KPICardSection>
  </KPICard>
</template>

Vertical KPI Card ​

Total returns today

952

+ 25%
Total returns last 30 days

10,483

- 25%
js
<script lang="ts" setup>
import {
  Badge,
  BadgeContent,
  BadgeIcon,
  KPICard,
  KPICardSection,
} from '@returnless/focus-ui';
import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/vue/16/solid';
</script>

<template>
  <KPICard orientation="vertical">
    <KPICardSection title="Total returns today" value="952">
      <Badge color="green">
        <BadgeContent>+ 25%</BadgeContent>
        <BadgeIcon>
          <ArrowTrendingUpIcon />
        </BadgeIcon>
      </Badge>
    </KPICardSection>
    <KPICardSection title="Total returns last 30 days" value="10,483">
      <Badge color="red">
        <BadgeIcon>
          <ArrowTrendingDownIcon />
        </BadgeIcon>
        <BadgeContent>- 25%</BadgeContent>
      </Badge>
    </KPICardSection>
  </KPICard>
</template>