Statistic card
A simple statistic card with a heading and optional description. It can be centered with a prop and is intended for use in columns or with a carousel wrapper.
10,000
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
1st
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
98.7%
Et dolore magna aliqua. Ut enim ad minim veniam laboris nisi.
How to use
<Section class="mt-4 md:mt-12" columns={3}>
<Markdown class="md:col-span-3">
# Statistic card
A simple statistic card with a heading and optional description. It can be centered with a prop and is intended for use in columns or with a carousel wrapper.
</Markdown>
import StatisticCard from "~/components/cards/Statistic.astro";
<StatisticCard
heading="10,000"
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
/>
<StatisticCard
heading="1st"
description="Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
/>
<StatisticCard
heading="98.7%"
description="Et dolore magna aliqua. Ut enim ad minim veniam laboris nisi."
/>
</Section>Props
| Prop | Type | Description |
|---|---|---|
description | string | (optional) The card description or supporting text. |
heading | string | The statistic (heading) displayed by the card, <h3> |
layout | object | (optional) Layout data for the component. See below. |
class | string | (optional) Additional classes applied to the root <div>. |
| (extends) | HTMLAttributes<"div"> | (optional) All standard HTML attributes for a <div>. |
Examples
2 Columns
1st
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
98.7%
Et dolore magna aliqua. Ut enim ad minim veniam laboris nisi.
3 Columns
10,000
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
1st
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
98.7%
Et dolore magna aliqua. Ut enim ad minim veniam laboris nisi.
4 Columns
10,000
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
1st
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
98.7%
Et dolore magna aliqua. Ut enim ad minim veniam laboris nisi.
Winner
Ullamco exercitation ex laboris aliqua aliquip veniam sed ipsum adipiscing.
3 Column Carousel
10,000
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
1st
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
98.7%
Et dolore magna aliqua. Ut enim ad minim veniam laboris nisi.
Winner
Ullamco exercitation ex laboris aliqua aliquip veniam sed ipsum adipiscing.
A++
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Millions
Ullamco exercitation ex laboris aliqua aliquip veniam sed ipsum adipiscing.
4 Column Carousel
10,000
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
1st
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
98.7%
Et dolore magna aliqua. Ut enim ad minim veniam laboris nisi.
Winner
Ullamco exercitation ex laboris aliqua aliquip veniam sed ipsum adipiscing.
A++
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Millions
Ullamco exercitation ex laboris aliqua aliquip veniam sed ipsum adipiscing.
About MDX
astro-skeleton uses the @astrojs/mdx integration installed and configured in the astro.config.mjs config file.
Why MDX?
MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to mix JavaScript and UI Components into Markdown content for things like interactive charts or alerts.
If you have existing content authored in MDX, this integration will hopefully make migrating a breeze.