Case Study Layout
Full case study page layout
Overview
A compound component for rendering a complete case study page. Each sub-component is independently composable inside the root wrapper.
Usage
import { CaseStudyLayout } from "@leanicon/web-builder-library";Default
Full case study with all sub-components: hero with logo and industry tag, metrics bar, body prose, and author quote.
How Acme Corp cut operational costs by 40% in six months
Acme Corp is a global manufacturing leader with operations spanning 12 facilities across three continents. Before adopting our platform, procurement and warehouse workflows relied on disconnected spreadsheets and manual approvals — a process that cost the business weeks of delay every quarter.
After a 90-day rollout, Acme Corp saw a 40% reduction in operational costs, driven primarily by automated purchase-order routing and real-time inventory reconciliation.
“We went from quarterly fire drills to a smooth, predictable operation. The ROI was undeniable within the first six months.”
Minimal layout
Hero and body only — no metrics bar or quote.
TechCo grows annual recurring revenue 3x with smarter onboarding
TechCo's product team reduced time-to-value for new users from 14 days to under 48 hours by integrating our analytics suite directly into their onboarding flow.
Hero with background image
Pass backgroundImage to render a full-bleed image behind the hero. A dark overlay is applied automatically.
How Acme Corp cut operational costs by 40% in six months
Acme Corp is a global manufacturing leader with operations spanning 12 facilities across three continents.
Hero without logo
When companyLogo is omitted, the hero renders only the industry tag and title.
How Acme Corp cut operational costs by 40% in six months
Acme Corp is a global manufacturing leader with operations spanning 12 facilities across three continents.
Hero without industry tag
When industryTag is omitted, the pill badge is hidden.
How Acme Corp cut operational costs by 40% in six months
Acme Corp is a global manufacturing leader with operations spanning 12 facilities across three continents.
Hero — title only
The simplest hero: only the required title prop.
How Acme Corp cut operational costs by 40% in six months
Acme Corp is a global manufacturing leader with operations spanning 12 facilities across three continents.
Metrics with prefix and suffix
Use prefix and suffix to format metric values — e.g. $2.4M or 99.9%.
FinServ Corp achieves record returns with data-driven insights
FinServ Corp leveraged our analytics platform to streamline their reporting pipeline, cutting manual reconciliation time by 80%.
Quote without author title
When authorTitle is omitted, only the author name is shown.
How Acme Corp cut operational costs by 40% in six months
Acme Corp is a global manufacturing leader with operations spanning 12 facilities across three continents.
“We went from quarterly fire drills to a smooth, predictable operation.”
Dark mode
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.
“Our associates finally have the information they need, right when they need it.”
Minimal layout — dark mode
TechCo grows annual recurring revenue 3x with smarter onboarding
TechCo's product team reduced time-to-value for new users from 14 days to under 48 hours by integrating our analytics suite directly into their onboarding flow.
Hero with background image — dark mode
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.
Metrics with prefix and suffix — dark mode
FinServ Corp achieves record returns with data-driven insights
FinServ Corp leveraged our analytics platform to streamline their reporting pipeline, cutting manual reconciliation time by 80%.
Quote without author title — dark mode
How Acme Corp cut operational costs by 40% in six months
Acme Corp is a global manufacturing leader with operations spanning 12 facilities across three continents.
“We went from quarterly fire drills to a smooth, predictable operation.”
Props
CaseStudyLayout
Prop | Type | Default | Description |
|---|---|---|---|
|
| — | Sub-components to compose (required) |
|
| — | Force light or dark mode |
|
| — | Additional CSS classes on root |
CaseStudyLayout.Hero
Prop | Type | Description |
|---|---|---|
|
| Page title (required) |
|
| Optional company logo |
|
| Optional full-bleed background (adds dark overlay) |
|
| Optional industry pill badge |
CaseStudyLayout.Metrics
Prop | Type | Description |
|---|---|---|
|
| Array of |
CaseStudyLayout.Body
Prop | Type | Description |
|---|---|---|
|
| Prose content (required) |
CaseStudyLayout.Quote
Prop | Type | Description |
|---|---|---|
|
| Blockquote text (required) |
|
| Author name (required) |
|
| Optional role/title after the author name |
Notes
CaseStudyLayout.Bodyapplies Tailwind Typography — ensure@tailwindcss/typographyis installed.backgroundImageon the hero automatically adds a.darkwrapper and a semi-transparent overlay for text legibility.- Dark mode: pass
colorScheme="dark"or place inside a.darkancestor.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
colorScheme | enum | — | No | |
className | string | — | No | |
title | string | — | Yes | |
companyLogo | ImageProps | — | No | |
backgroundImage | ImageProps | — | No | |
industryTag | string | — | No | |
headingLevel | enum | h1 | No | h1 when the layout IS the page surface (default); h2 when embedded under a page h1 (spec 007 D7). |
metrics | MetricItem[] | — | Yes | |
quote | string | — | Yes | |
authorName | string | — | Yes | |
authorTitle | string | — | No |