Case Study Card Grid
Grid of case study cards
Overview
Renders an array of case study cards in a configurable column grid. Each card supports a company logo, a key metric highlight, excerpt text, and an industry badge.
Usage
import { CaseStudyCardGrid } from "@leanicon/web-builder-library";Default
Three-column grid with all card fields populated: logo, headline, metric, excerpt, and industry tag.
How Acme Corp cut operational costs by 40% in six months
40%Cost reductionAcme Corp adopted our platform to streamline procurement and warehouse workflows, eliminating manual steps across 12 facilities.
ManufacturingTechCo grows annual recurring revenue 3x with smarter onboarding
3xARR growthBy integrating our analytics suite, TechCo's product team reduced time-to-value for new users from 14 days to under 48 hours.
SaaSRetailBrand transforms the in-store experience across 500 locations
98%Customer satisfactionRetailBrand deployed our tooling at scale, giving store associates real-time inventory visibility and reducing checkout wait times by a third.
Retail
Two columns
Set columns={2} for a narrower layout.
- 40%Cost reduction
Acme Corp adopted our platform to streamline procurement and warehouse workflows, eliminating manual steps across 12 facilities.
Manufacturing - 3xARR growth
By integrating our analytics suite, TechCo's product team reduced time-to-value for new users from 14 days to under 48 hours.
SaaS
One column
Set columns={1} for a single stacked layout.
- 40%Cost reduction
Acme Corp adopted our platform to streamline procurement and warehouse workflows, eliminating manual steps across 12 facilities.
Manufacturing - 3xARR growth
By integrating our analytics suite, TechCo's product team reduced time-to-value for new users from 14 days to under 48 hours.
SaaS - 98%Customer satisfaction
RetailBrand deployed our tooling at scale, giving store associates real-time inventory visibility and reducing checkout wait times by a third.
Retail
Without logos
Cards render without a company logo when companyLogo is omitted.
- How Acme Corp cut operational costs by 40% in six months40%Cost reduction
Acme Corp adopted our platform to streamline procurement and warehouse workflows, eliminating manual steps across 12 facilities.
Manufacturing - TechCo grows annual recurring revenue 3x with smarter onboarding3xARR growth
By integrating our analytics suite, TechCo's product team reduced time-to-value for new users from 14 days to under 48 hours.
SaaS - RetailBrand transforms the in-store experience across 500 locations98%Customer satisfaction
RetailBrand deployed our tooling at scale, giving store associates real-time inventory visibility and reducing checkout wait times by a third.
Retail
Without metrics
The metric highlight is hidden when metric is omitted from cards.
Acme Corp adopted our platform to streamline procurement and warehouse workflows, eliminating manual steps across 12 facilities.
ManufacturingBy integrating our analytics suite, TechCo's product team reduced time-to-value for new users from 14 days to under 48 hours.
SaaSRetailBrand deployed our tooling at scale, giving store associates real-time inventory visibility and reducing checkout wait times by a third.
Retail
Without industry tags
Industry badge is hidden when industryTag is omitted from cards.
- 40%Cost reduction
Acme Corp adopted our platform to streamline procurement and warehouse workflows, eliminating manual steps across 12 facilities.
- 3xARR growth
By integrating our analytics suite, TechCo's product team reduced time-to-value for new users from 14 days to under 48 hours.
- 98%Customer satisfaction
RetailBrand deployed our tooling at scale, giving store associates real-time inventory visibility and reducing checkout wait times by a third.
Minimal cards
Only the required fields: headline, excerpt, and href. No logo, metric, or industry tag.
- How Acme Corp cut operational costs by 40% in six months
Acme Corp adopted our platform to streamline procurement and warehouse workflows, eliminating manual steps across 12 facilities.
- TechCo grows annual recurring revenue 3x with smarter onboarding
By integrating our analytics suite, TechCo's product team reduced time-to-value for new users from 14 days to under 48 hours.
- RetailBrand transforms the in-store experience across 500 locations
RetailBrand deployed our tooling at scale, giving store associates real-time inventory visibility and reducing checkout wait times by a third.
Single study
A single card in a one-column layout.
- 40%Cost reduction
Acme Corp adopted our platform to streamline procurement and warehouse workflows, eliminating manual steps across 12 facilities.
Manufacturing
Single study in three-column grid
A single card placed in a three-column grid — useful for seeing how the grid handles sparse content.
- 40%Cost reduction
Acme Corp adopted our platform to streamline procurement and warehouse workflows, eliminating manual steps across 12 facilities.
Manufacturing
With animation
Cards animate in with a staggered slide-up effect via the animation prop.
- 40%Cost reduction
Acme Corp adopted our platform to streamline procurement and warehouse workflows, eliminating manual steps across 12 facilities.
Manufacturing - 3xARR growth
By integrating our analytics suite, TechCo's product team reduced time-to-value for new users from 14 days to under 48 hours.
SaaS - 98%Customer satisfaction
RetailBrand deployed our tooling at scale, giving store associates real-time inventory visibility and reducing checkout wait times by a third.
Retail
Dark mode
- 40%Cost reduction
Acme Corp adopted our platform to streamline procurement and warehouse workflows, eliminating manual steps across 12 facilities.
Manufacturing - 3xARR growth
By integrating our analytics suite, TechCo's product team reduced time-to-value for new users from 14 days to under 48 hours.
SaaS - 98%Customer satisfaction
RetailBrand deployed our tooling at scale, giving store associates real-time inventory visibility and reducing checkout wait times by a third.
Retail
Two columns — dark mode
- 40%Cost reduction
Acme Corp adopted our platform to streamline procurement and warehouse workflows, eliminating manual steps across 12 facilities.
Manufacturing - 3xARR growth
By integrating our analytics suite, TechCo's product team reduced time-to-value for new users from 14 days to under 48 hours.
SaaS
One column — dark mode
- 40%Cost reduction
Acme Corp adopted our platform to streamline procurement and warehouse workflows, eliminating manual steps across 12 facilities.
Manufacturing - 3xARR growth
By integrating our analytics suite, TechCo's product team reduced time-to-value for new users from 14 days to under 48 hours.
SaaS - 98%Customer satisfaction
RetailBrand deployed our tooling at scale, giving store associates real-time inventory visibility and reducing checkout wait times by a third.
Retail
Minimal cards — dark mode
- How Acme Corp cut operational costs by 40% in six months
Acme Corp adopted our platform to streamline procurement and warehouse workflows, eliminating manual steps across 12 facilities.
- TechCo grows annual recurring revenue 3x with smarter onboarding
By integrating our analytics suite, TechCo's product team reduced time-to-value for new users from 14 days to under 48 hours.
- RetailBrand transforms the in-store experience across 500 locations
RetailBrand deployed our tooling at scale, giving store associates real-time inventory visibility and reducing checkout wait times by a third.
With animation — dark mode
- 40%Cost reduction
Acme Corp adopted our platform to streamline procurement and warehouse workflows, eliminating manual steps across 12 facilities.
Manufacturing - 3xARR growth
By integrating our analytics suite, TechCo's product team reduced time-to-value for new users from 14 days to under 48 hours.
SaaS - 98%Customer satisfaction
RetailBrand deployed our tooling at scale, giving store associates real-time inventory visibility and reducing checkout wait times by a third.
Retail
Props
Prop | Type | Default | Description |
|---|---|---|---|
|
| — | Array of case study cards (required) |
|
|
| Number of grid columns |
|
| — | Animation config for card entrance |
|
| — | Force light or dark mode |
|
| — | Additional CSS classes on root |
CaseStudyCard
Prop | Type | Description |
|---|---|---|
|
| Card title — rendered as a link to |
|
| Short summary text |
|
| Link destination for the card |
|
| Optional company logo image |
|
| Optional key metric highlight |
|
| Optional industry badge |
CaseStudyCardGridAnimation
Prop | Type | Description |
|---|---|---|
|
| Animation config ( |
Notes
- Dark mode: pass
colorScheme="dark"or place inside a.darkancestor. - Animation types:
"fade","slide-up","slide-down","scale","none". - Animation is disabled automatically when the user prefers reduced motion.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
studies | CaseStudyCard[] | — | Yes | |
columns | enum | 3 | No | |
animation | CaseStudyCardGridAnimation | — | No | |
colorScheme | enum | — | No | |
className | string | — | No |