Case Study Spotlight
Featured case study highlight
Overview
A centered promotional section for a featured case study. Supports an optional background image with a dark overlay, a company logo, one or more key metrics, and a CTA button.
Usage
import { CaseStudySpotlight } from "@leanicon/web-builder-library";Default
Full spotlight with company logo, headline, metrics, excerpt, and CTA button.
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 worldwide.
With background image
Pass backgroundImage to render a full-bleed image behind the section. A dark overlay is applied automatically and the logo is inverted for legibility.
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.
Without logo
When companyLogo is omitted, the section starts directly with the headline.
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 worldwide.
Without metrics
The metrics section is hidden when metrics is omitted.
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 worldwide.
Minimal
Only the required fields: headline, excerpt, and cta. No logo or metrics.
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 worldwide.
CTA — outline variant
Set cta.variant to "outline" for a bordered button style.
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 worldwide.
CTA — ghost variant
Set cta.variant to "ghost" for a transparent button style.
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 worldwide.
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 worldwide.
Without logo — 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 worldwide.
Without metrics — 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 worldwide.
Minimal — 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 worldwide.
CTA outline — 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 worldwide.
CTA ghost — 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 worldwide.
Background image — dark mode
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.
Props
Prop | Type | Default | Description |
|---|---|---|---|
|
| — | Main title text (required) |
|
| — | Supporting description text (required) |
|
| — | Call-to-action link (required) |
|
| — | Optional company logo |
|
| — | Optional array of metric highlights with separators |
|
| — | Optional full-bleed background (forces dark overlay) |
|
| — | Force light or dark mode |
|
| — | Additional CSS classes on root |
CTAButton
Prop | Type | Default | Description |
|---|---|---|---|
|
| — | Button text (required) |
|
| — | Link destination (required) |
|
|
| Button style variant |
Notes
- When
backgroundImageis provided, the component automatically wraps in<div className="dark">and applies a semi-transparent overlay. - The company logo is automatically inverted (
brightness-0 invert) when a background image is present. - Multiple metrics are displayed in a row with vertical separators between them.
- The CTA
variantprop maps to button styles:default(filled primary),outline(bordered), orghost(transparent). - Dark mode:
backgroundImageforces dark, or passcolorScheme="dark".
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
companyLogo | ImageProps | — | No | |
headline | string | — | Yes | |
metrics | CaseStudySpotlightMetric[] | — | No | |
excerpt | string | — | Yes | |
cta | CTAButton | — | Yes | |
backgroundImage | ImageProps | — | No | |
colorScheme | enum | — | No | |
className | string | — | No |