# Case Studies Grid

> Render outcome-focused customer story cards.

Canonical HTML: https://press.varavel.com/docs/shortcodes/case-studies-grid/
Markdown: https://press.varavel.com/docs/shortcodes/case-studies-grid/index.md

`case_studies_grid` renders three story cards with customer context, summary copy, and a prominent outcome.

## When to Use

Use it when customers, segments, or use cases can prove value better than feature copy alone.

## Usage

```markdown
{{/* case_studies_grid(title="Customer outcomes", item_1_customer="SaaS", item_1_title="Faster launches") */}}
```

## Live Example

{{ case_studies_grid(
container="md",
eyebrow="Stories",
title="Built for real landing pages",
description="Show how different teams use the same theme primitives.",
item_1_customer="Startup",
item_1_title="Launch page in a day",
item_1_desc="A compact set of sections carried the first public release.",
item_1_result="1 day",
item_2_customer="Docs",
item_2_title="Cleaner onboarding",
item_2_desc="Guides and landing pages now share the same visual language.",
item_2_result="-32% support",
item_3_customer="Agency",
item_3_title="Reusable client kit",
item_3_desc="The same shortcode catalog adapts to multiple verticals.",
item_3_result="24 sections"
) }}

## Parameters

| Parameter         | Description                                  |
| ----------------- | -------------------------------------------- |
| `container`       | Inner content width.                         |
| `eyebrow`         | Small uppercase label above the heading.     |
| `title`           | Section heading.                             |
| `description`     | Supporting copy.                             |
| `item_N_customer` | Customer, segment, or category label.        |
| `item_N_title`    | Story title.                                 |
| `item_N_desc`     | Story summary.                               |
| `item_N_result`   | Prominent result or metric.                  |
| `item_N_href`     | Optional story URL.                          |
| `item_N_link`     | Optional link label.                         |
| `bg`              | Full-width section background token.         |
| `class`           | Additional CSS classes on the outer section. |