# Product Showcase

> Render product narrative beside a structured UI mock.

Canonical HTML: https://press.varavel.com/docs/shortcodes/product-showcase/
Markdown: https://press.varavel.com/docs/shortcodes/product-showcase/index.md

`product_showcase` presents capabilities beside a product-style card with a metric and system rows.

## When to Use

Use it when explaining what a product does and why the interface supports the promise.

## Usage

```markdown
{{/* product_showcase(title="Product", panel_title="Dashboard", panel_metric="99%") */}}
```

## Live Example

{{ product_showcase(
container="md",
eyebrow="Showcase",
title="Explain the product clearly",
description="Use the mock panel for abstract products, services, or internal platforms.",
panel_label="Dashboard",
panel_title="Launch readiness",
panel_metric="96%",
item_1_icon="workflow",
item_1_title="Clear workflow",
item_1_desc="Turn process into visible structure.",
item_2_icon="chart-line",
item_2_title="Outcome focused",
item_2_desc="Anchor the visual around measurable progress."
) }}

## Parameters

| Parameter      | Description                                  |
| -------------- | -------------------------------------------- |
| `container`    | Inner content width.                         |
| `eyebrow`      | Small uppercase label above the heading.     |
| `title`        | Section heading.                             |
| `description`  | Supporting copy.                             |
| `panel_label`  | Mock panel label.                            |
| `panel_title`  | Mock panel title.                            |
| `panel_metric` | Prominent metric text.                       |
| `item_N_icon`  | Capability icon, up to 3.                    |
| `item_N_title` | Capability title.                            |
| `item_N_desc`  | Capability description.                      |
| `reverse`      | Use `true` to place mock first.              |
| `bg`           | Full-width section background token.         |
| `class`        | Additional CSS classes on the outer section. |