Marketing blocks
Metrics sections
Large-number metrics sections: simple row, bordered cards, split with image and image overlay. Figma: Metrics section.
import
{ MetricsSection, type MetricStat, type MetricsLayout } from "@pepulux/ui"Simple
Numbers that speak for themselves
We help teams ship faster, every day.
400+Projects completedShipped for teams around the world.
600%Return on investmentAverage uplift reported by customers.
10kGlobal downloadsInstalled across every platform.
Cards (muted)
Trusted by teams worldwide
400+Projects completedShipped for teams around the world.
600%Return on investmentAverage uplift reported by customers.
10kGlobal downloadsInstalled across every platform.
200+5-star reviewsRated highly on every major store.
Split with image
Impact
Shipping faster than ever
Results from teams using Pepulux.
400+Projects completedShipped for teams around the world.
600%Return on investmentAverage uplift reported by customers.
10kGlobal downloadsInstalled across every platform.
200+5-star reviewsRated highly on every major store.
Image overlay
Growing every quarter
400+Projects completed
600%Return on investment
10kGlobal downloads
200+5-star reviews
Brand
Proven results
A track record you can rely on.
400+Projects completedShipped for teams around the world.
600%Return on investmentAverage uplift reported by customers.
10kGlobal downloadsInstalled across every platform.
200+5-star reviewsRated highly on every major store.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| layout | "simple" | "cards" | "split" | "image-overlay" | "simple" | Figma layout |
| tone | "light" | "muted" | "brand" | "light" | Background tone — Figma Light / Muted / Brand |
| stats | MetricStat[] | — | { value; label; description? } |
| image | string | — | Artwork for split / image-overlay |
| title / description / eyebrow | ReactNode | — | Heading content |