The kit
Elements [30]
Fancy Case Study
Parent / child element
Fancy Case Study
Showcase projects with a featured image, client, category, challenge, solution and results, up to three headline metrics and three custom fields. Five designs, in a card grid or a horizontal layout.
Designs
5 designs
Layouts
Grid or horizontal
Per project
3 metrics, 3 fields
Classic
A faster product site for Fjord Labs
Fjord Labs
- Industry
- Software
- Duration
- 10 weeks
An online store that sells out
Okafor Coffee Co.
- Industry
- Food and drink
- Duration
- 8 weeks
Modern
Online booking for Bloom Yoga
Bloom Yoga Studio
- Industry
- Health and fitness
- Duration
- 6 weeks
A new brand for Carter Logistics
Carter Logistics
- Industry
- Logistics
- Duration
- 12 weeks
Minimal
An online store that sells out
Okafor Coffee Co.
- Industry
- Food and drink
- Duration
- 8 weeks
A faster product site for Fjord Labs
Fjord Labs
- Industry
- Software
- Duration
- 10 weeks
Shadow
A new brand for Carter Logistics
Carter Logistics
- Industry
- Logistics
- Duration
- 12 weeks
Online booking for Bloom Yoga
Bloom Yoga Studio
- Industry
- Health and fitness
- Duration
- 6 weeks
Glassmorphism
A faster product site for Fjord Labs
Fjord Labs
- Industry
- Software
- Duration
- 10 weeks
Online booking for Bloom Yoga
Bloom Yoga Studio
- Industry
- Health and fitness
- Duration
- 6 weeks
All five designs share the same project and colour settings. Switch between them with the Design option.
Example of fancy case study in the horizontal layout with challenge, solution and results…
An online store that sells out
Okafor Coffee Co.
- Industry
- Food and drink
- Duration
- 8 weeks
- Platform
- WooCommerce
Challenge
Solution
Results
Example of fancy case study in three columns with a shorter image and contained artwork…
A faster product site for Fjord Labs
Fjord Labs
An online store that sells out
Okafor Coffee Co.
Online booking for Bloom Yoga
Bloom Yoga Studio
Example of fancy case study in one column with custom typography…
A new brand for Carter Logistics
Carter Logistics
- Industry
- Logistics
- Duration
- 12 weeks
- Team
- 6 people
Challenge
Solution
Results
Use cases
Key features
What the element does, in plain terms. Every individual control is listed in the settings reference below.
Layout
Five designs
Classic, Modern, Minimal, Shadow and Glassmorphism, each built from the same project settings.
Grid or horizontal
Show projects as cards in one to three columns, or in a horizontal layout with the image beside the content.
Image controls
Set a fixed image height in pixels or percent, and choose whether the image covers, fits inside or fills its area.
Projects
Story sections
Each project has a description plus optional Challenge, Solution and Results sections, all in rich text.
Headline metrics
Up to three metrics per project, such as +41% sign-ups, shown as highlighted values with labels.
Custom fields
Up to three label and value pairs, such as industry, duration or team size.
Call-to-action button
An optional button with its own text, link and target.
Styling
Typography
Separate font settings for project titles and body text.
Colour controls
Accent, title, meta, text, card background and border colours.
Settings reference
Every setting the element exposes, grouped by builder tab. Options are listed where the setting offers a fixed set of choices.
Structure General tab
Design
Classic · Modern · Minimal · Shadow · Glassmorphism
The visual style of the case studies. Default Classic.
Case Study Items
Child elements
Add, reorder, clone or remove projects. Each project has its own settings, listed below.
Layout
Grid · Horizontal
Grid shows projects as cards, and Horizontal puts the image beside the content. Default Grid.
Columns
1 · 2 · 3
The number of columns in the grid layout. Default 2. Not used by Horizontal.
Image Height
Pixel or percentage value
A fixed height for the image area, for example 220px or 30%. Leave empty for the default of 220px.
Image Fit
Cover · Contain · Fill
How the image fills its area. Default Cover.
Element Visibility
Small · Medium · Large screen
Shows or hides the element on small, medium or large screens.
CSS Class
Adds a class to the wrapping HTML element.
CSS ID
Adds an ID to the wrapping HTML element.
Typography General tab
Title Typography
Font family, weight, size, line height, letter spacing
Font settings for the project titles.
Body Typography
Font family, weight, size, line height, letter spacing
Font settings for the description and section text.
Case Study Item Child element, one per project
Title
Text
The name of the project or case study.
Client
Text
The client or company name.
Category
Text
An optional category or tag, shown as a badge.
Featured Image
Image upload
The image for the project.
Description
Rich text
A short overview of the project.
Challenge
Rich text
The problem or challenge the client faced.
Solution
Rich text
The solution you put in place.
Results
Rich text
The outcomes and results achieved.
Metric 1–3 Label
Text
The label of each headline metric, for example Revenue Increase.
Metric 1–3 Value
Text
The value of each headline metric, for example 3× or 40%.
Custom Field 1–3 Label
Text
The label of each custom field, for example Industry, Duration or Team Size.
Custom Field 1–3 Value
Text
The value of each custom field, for example E-Commerce, 3 Months or 8 People.
Button Text
Text
The text on the button. Leave empty to hide the button.
Button URL
URL
Where the button points.
Open Link In
Same Tab · New Tab
Opens the link in the same or a new tab. Default Same Tab.
Colours Design tab
Accent Color
Colour. Default #65bc7b
The colour of buttons, metric pills and highlights.
Title Color
Colour. Default #1a1a1a
The colour of the project titles.
Meta Color
Colour. Default #777777
The colour of the client name, category badge and section labels.
Text Color
Colour. Default #555555
The colour of the description and section text.
Card Background
Colour. Default #ffffff
The background of each project card.
Border Color
Colour. Default #e0e0e0
The colour of card borders and dividers.
On this page