eds-card-stat
Explore the Interactive Component
Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.
See It in Use with Code
Check out this practical implementation of component.
Plain HTML
In React
In Vue
Overview
EdsCardStat is a card component designed to display statistics with a large number, label, and description.
Key features:
- Large prominent number display (e.g., “44+”, “100%”, “AA”)
- Label describing the statistic
- Optional description for additional context
- Hover effects with animated top border
- Support for optional links
This component is ideal for dashboards, landing pages, and any interface displaying key metrics.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
description | description | Optional description providing additional context | string | undefined |
label (required) | label | The label describing the statistic | string | undefined |
number (required) | number | The main statistic number or value to display (e.g., “44+”, “100%”, “AA”) | string | undefined |
url | url | Optional URL to link the card to | string | undefined |
variant | variant | Visual variant: ‘default’ for light text on dark background, ‘inverse’ for dark text on light background | "default" | "inverse" | 'default' |
Built with StencilJS