Stats Content
Statistics content section
Overview
A muted-background section that composes up to three elements: a company logo bar with an optional label, a large testimonial blockquote, and a grid of stat cards. Each element is optional and they render in order with automatic spacing.
Usage
import { StatsContent } from "@leanicon/web-builder-library";Stats only
The simplest form — just the stat cards.
70% increase in sales leads
70%
4X SDR efficiency
4x
64% lower tech stack costs
64%
Stats only (2 columns)
Use columns={2} for a narrower two-column grid.
Faster deployments
2×
Cost reduction
40%
Uptime
99.9%
Integrations
50+
With company logos on cards
Each stat card can include a companyLogo to attribute the metric to a specific company.
70% increase in sales leads
70%
4X SDR efficiency
4x
64% lower tech stack costs
64%
With logo bar
Add a label and logos to show a trust bar above the stat cards.
Trusted by industry leaders
Faster deployments
2×
Cost reduction
40%
Uptime
99.9%
With testimonial
Add a testimonial blockquote between the logo bar and stat cards.
“Every rep is more productive with Apollo. We booked 75% more meetings while cutting manual work in half.”
More meetings booked
75%
Less manual work
50%
Pipeline generated
3x
Full (all elements)
Combine the logo bar, testimonial, and stat cards for the richest layout.
Join over 500,000 companies using Apollo
“Every rep is more productive with Apollo. We booked 75% more meetings while cutting manual work in half.”
70% increase in sales leads
70%
4X SDR efficiency
4x
64% lower tech stack costs
64%
Dark mode
Join over 500,000 companies using Apollo
“Every rep is more productive with Apollo. We booked 75% more meetings while cutting manual work in half.”
70% increase in sales leads
70%
4X SDR efficiency
4x
64% lower tech stack costs
64%
Props
Prop | Type | Default | Description |
|---|---|---|---|
|
| — | Array of stat card objects (required) |
|
| — | Small uppercase text above the logo bar |
|
| — | Array of logo images for the trust bar |
|
| — | Testimonial blockquote with author info |
|
|
| Number of stat card columns |
|
| — | Force light or dark mode |
|
| — | Additional CSS classes on root |
StatCard
Prop | Type | Description |
|---|---|---|
|
| The metric value (e.g. |
|
| Description text below the value |
|
| Optional company logo displayed in the card |
StatsContentTestimonial
Prop | Type | Description |
|---|---|---|
|
| The testimonial text |
|
| Name of the person quoted |
|
| Title / role of the person |
|
| Company logo next to the attribution |
StatsContentLogo
Prop | Type | Description |
|---|---|---|
|
| Logo image source URL |
|
| Accessible alt text |
Notes
- Elements render in order: logo bar → testimonial → stat cards, each with
mt-16spacing when preceded by another element. - Dark mode: pass
colorScheme="dark"or place inside a.darkancestor. - The
codeprop in examples uses clean paths (e.g./autodesk.svg) — in the live preview, placeholder images are used instead.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
label | string | — | No | |
logos | StatsContentLogo[] | — | No | |
testimonial | StatsContentTestimonial | — | No | |
stats | StatCard[] | — | Yes | |
columns | enum | 3 | No | |
colorScheme | enum | — | No | |
className | string | — | No |