Mission Card (alonepro/mission-card)
The Mission Card block pairs a portrait photograph with a floating, high-contrast statistic badge overlaid in any corner. As visitors scroll the block into the viewport, the statistic triggers a count-up animation, highlighting years of service, funds raised, or lives touched.
Key Features
- Corner Badge Overlay: Position the stat badge at
bottom-left,bottom-right,top-left, ortop-right. - Animated Number Counter: Configurable count-up animation that triggers on scroll enter.
- Prefix & Suffix Support: Prepend symbols (e.g.
$,€) or append suffixes (e.g.+,%,M,K). - Aspect Ratio Control: Supports portrait ratios such as
4/5or3/4to align with neighboring text columns. - Card Icon Accent: Select an icon (e.g.
award,heart,shield) to display inside the badge.
Inspector Settings
| Setting | Type | Default | Description |
|---|---|---|---|
imageUrl | String | — | Main featured photograph. |
imageAspectRatio | String | "4/5" | CSS container aspect ratio. |
statNumber | Number | 15 | Target number for the count animation. |
statPrefix | String | "" | Character(s) displayed before the number. |
statSuffix | String | "+" | Character(s) displayed after the number (e.g. +, %). |
statLabel | String | "YEARS" | Bold headline label beneath the counter. |
statDescription | String | "Giving children a place to belong" | Explanatory caption inside the badge. |
enableCountAnimation | Toggle | true | Animate the number counting up from 0 on viewport entry. |
countDuration | Number | 2000 | Duration of count-up animation in milliseconds. |
showDivider | Toggle | true | Display a subtle separator inside the badge. |
badgePosition | Select | "bottom-left" | Corner placement: bottom-left, bottom-right, top-left, top-right. |
iconType | Select | "award" | Lucide icon rendered alongside the statistic. |
linkUrl | String | "" | Optional link wrapping the entire mission card. |
enableScrollAnimation | Toggle | true | Viewport entrance animation for the card. |