Docs Menu

Stat Blocks

Stat Blocks have the following properties:

Property Required? Type Options Description
label no string Label of the stat
stat no string The actual stat
type bool
  • null (default)
  • warning
  • success
  • info
  • notice
 The color theme of the Progress Bar.

Basic Examples
Basic Stat Block example. 

            
1<x-fcui-stats>
2 
3        <x-fcui-stat-block stat="249" label="Customers" />
4 
5        <x-fcui-stat-block stat="$5,810" label="Revenue This Week" />
6 
7        <x-fcui-stat-block stat="2,890" label="Views" />
8 
9</x-fcui-stats>
Customers
249
Views
2,890
Views
2,890

Advanced Example
Stats Block with different types. 

            
 1<x-fcui-stats bg="transparent" spacing="4">
 2 
 3    <x-slot:panels>
 4 
 5        <x-fcui-stat-block stat="249" label="Customers" type="info" />
 6 
 7        <x-fcui-stat-block stat="$5,810" label="Revenue This Week" type="warning" />
 8 
 9        <x-fcui-stat-block stat="30" label="Downloads" type="notice" />
10 
11        <x-fcui-stat-block stat="2,890" label="Views" />
12 
13    </x-slot:panels>
14 
15</x-fcui-stats>
Customers
249
Revenue This Week
$5,810
Downloads
30
Views
2,890