Stats

Here are some examples showcasing stats.

Basic Stats

Stats are used to display simple data points. They can be used to display a number (the main content), a title, and a description.

Preview

$8,619.45

Views

1,208

Views in the last 24 hours.

Average Cart Value

$319

You're doing quite well on your ACV!

Code

.w-full.bg-base-100.lg:grid.lg:grid-flow-col.lg:auto-cols-auto.items-center.gap-x-4.border.rounded-lg
  = daisy_stat do
    = number_to_currency(8619.45)

  = daisy_stat( title: "Views", description: "Views in the last 24 hours.") do
    = number_with_delimiter(1208)

  - # Example passing options as blocks. This allows you to pass in HTML.
  = daisy_stat do |stat|
    - stat.with_title do
      %p.stat-title Average Cart Value

    = number_to_currency(319, precision: 0)

    - stat.with_description do
      %p.stat-desc You're doing quite well on your ACV!

Complex Stats

Stats can also be used to display more complex data points. You can pass in an image, an icon, or any other content you'd like.

Preview

Tasks

Completed this month.

Students

1,112

Total enrollments.

New!

New Students

New students in July!

Code

.w-full.bg-base-100.lg:flex.lg:flex-wrap.justify-between.items-center.gap-x-4.border.rounded-lg
  = daisy_stat(css: "max-w-80", title: "Tasks", description: "Completed this month.", src: image_path("avatars/lady-smiling-1.jpg")) do
    25

  = daisy_stat(css: "max-w-80", title: "Students", description: "Total enrollments.", icon: "academic-cap") do
    = number_with_delimiter(1112)

  = daisy_stat(css: "max-w-80") do |stat|
    - stat.with_title do
      %p.stat-title New Students

    42

    - stat.with_description do
      %p.stat-desc New students in July!

    - stat.with_figure do
      = daisy_badge(css: "badge-primary") do
        New!

Made with by Profoundry .