Phoenix + DaisyUI

Stat

Stat Open in playground
Total Page Views
89,400
21% more than last month 
<.stats class="shadow">
  <.stat>
    <:title>Total Page Views</:title>
    <:value>89,400</:value>
    <:desc>21% more than last month</:desc>
  </.stat>
</.stats>
Stat with icon and image Open in playground
Downloads
31K
Jan 1st - Feb 1st
Page Views
2.6M
21% more than last month
86%
Tasks done
31 tasks remaining 
<.stats class="shadow">
  <.stat>
    <:figure class="text-primary"><.icon name="hero-heart" /></:figure>
    <:title>Downloads</:title>
    <:value class="text-primary">31K</:value>
    <:desc>Jan 1st - Feb 1st</:desc>
  </.stat>
  <.stat>
    <:figure class="text-secondary"><.icon name="hero-camera" /></:figure>
    <:title>Page Views</:title>
    <:value class="text-secondary">2.6M</:value>
    <:desc>21% more than last month</:desc>
  </.stat>
  <.stat>
    <.stat_figure class="text-secondary">
      <.avatar online>
        <div class="w-16 rounded-full">
          <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
        </div>
      </.avatar>
    </.stat_figure>
    <.stat_value>86%</.stat_value>
    <.stat_title>Tasks done</.stat_title>
    <.stat_desc class="text-secondary">31 tasks remaining</.stat_desc>
  </.stat>
</.stats>
Centered items and direction Open in playground
Downloads
31K
Jan 1st - Feb 1st
Users
4,200
↗︎ 40 (2%)
New Registers
1,200
↘︎ 90 (14%)
Downloads
31K
Jan 1st - Feb 1st
Users
4,200
↗︎ 40 (2%)
New Registers
1,200
↘︎ 90 (14%) 
<.stats class="shadow" direction="horizontal">
  <.stat class="place-items-center">
    <:title>Downloads</:title>
    <:value>31K</:value>
    <:desc>Jan 1st - Feb 1st</:desc>
  </.stat>
  <.stat class="place-items-center">
    <:title>Users</:title>
    <:value class="text-secondary">4,200</:value>
    <:desc class="text-primary">↗︎ 40 (2%)</:desc>
  </.stat>
  <.stat class="place-items-center">
    <:title>New Registers</:title>
    <:value>1,200</:value>
    <:desc>↘︎ 90 (14%)</:desc>
  </.stat>
</.stats>
<.stats class="shadow" direction="vertical">
  <.stat class="place-items-center">
    <:title>Downloads</:title>
    <:value>31K</:value>
    <:desc>Jan 1st - Feb 1st</:desc>
  </.stat>
  <.stat class="place-items-center">
    <:title>Users</:title>
    <:value class="text-secondary">4,200</:value>
    <:desc class="text-primary">↗︎ 40 (2%)</:desc>
  </.stat>
  <.stat class="place-items-center">
    <:title>New Registers</:title>
    <:value>1,200</:value>
    <:desc>↘︎ 90 (14%)</:desc>
  </.stat>
</.stats>