WidgetStats

Source code

The Stats component is a comprehensive widget for showcasing statistical data with a headline, tagline, and customizable call-to-action. It is ideal for presenting multiple key metrics in a visually structured and accessible way.

https://

Tagline

Title

Subtitle

132K: Downloads
24.8K: Stars
10.3K: Forks
48.4K: Users

Read all

---
import { WidgetStats } from '@yatoday/astro-ui/astro';
---

<WidgetStats
  title="Title"
  subtitle="Subtitle"
  tagline="Tagline"
  items={[
    { title: '132K', description: 'Downloads' },
    { title: '24.8K', description: 'Stars' },
    { title: '10.3K', description: 'Forks' },
    { title: '48.4K', description: 'Users' },
  ]}
  callToAction={{
    text: 'Read all',
    href: '/',
    icon: 'tabler:chevron-right',
  }}
/>

Props

Prop	Type	Default	Description
`title`	`string`	-	`Title` in Headline component
`subtitle`	`string`	-	`Subtitle` in Headline component
`tagline`	`string`	-	`Tagline` in Headline component
`callToAction`	`ToAction \| string \| ToAction[] \| string[]`	-	Action button or link. See the ToAction for details.
`items`	`Array`	`[]`	Array of Stat items. Type here.
`isAfterContent`	`boolean`	`false`	-
`id`	`string`	-	Specify a unique id for the section
`isDark`	`boolean`	`false`	Adds the `dark` CSS class to the WidgetWrapper
`bg`	`string`	-	Set background element
`classes.container`	`string`	-	CSS classes for the root container
`classes.headline.{...}`	`string`	-	CSS classes for the Headline component
`classes.items.{...}`	`Object`	-	CSS classes for the Stats 0 component