# Problem Solution

> Render a pain-versus-solution narrative pair.

Canonical HTML: https://press.varavel.com/docs/shortcodes/problem-solution/
Markdown: https://press.varavel.com/docs/shortcodes/problem-solution/index.md

`problem_solution` frames the before state and the after state as two balanced cards.

## When to Use

Use it when visitors need to recognize the current pain before understanding the proposed solution.

## Usage

```markdown
{{/* problem_solution(title="From chaos to system", problem_title="Before", solution_title="After") */}}
```

## Live Example

{{ problem_solution(
container="md",
eyebrow="Positioning",
title="From inconsistent pages to a system",
description="Make the contrast explicit without introducing decorative color.",
problem_title="Before",
problem_desc="Every landing page invents its own spacing and component structure.",
problem_1="Repeated one-off sections",
problem_2="Unclear mobile behavior",
solution_title="After",
solution_desc="A consistent shortcode catalog gives teams clean defaults.",
solution_1="Shared section rhythm",
solution_2="Reusable proof patterns"
) }}

## Parameters

| Parameter        | Description                                  |
| ---------------- | -------------------------------------------- |
| `container`      | Inner content width.                         |
| `eyebrow`        | Small uppercase label above the heading.     |
| `title`          | Section heading.                             |
| `description`    | Supporting copy.                             |
| `problem_title`  | Problem card title.                          |
| `problem_desc`   | Problem card description.                    |
| `problem_N`      | Problem points, up to 4.                     |
| `solution_title` | Solution card title.                         |
| `solution_desc`  | Solution card description.                   |
| `solution_N`     | Solution points, up to 4.                    |
| `bg`             | Full-width section background token.         |
| `class`          | Additional CSS classes on the outer section. |