# App Screenshot

> Render a bordered product screenshot or UI placeholder.

Canonical HTML: https://press.varavel.com/docs/shortcodes/app-screenshot/
Markdown: https://press.varavel.com/docs/shortcodes/app-screenshot/index.md

`app_screenshot` presents a product view inside a clean browser-style frame with optional badges and caption.

## When to Use

Use it after a hero or feature section when the product surface itself is the strongest proof.

## Usage

```markdown
{{/* app_screenshot(title="See the product", badge_1="Responsive", badge_2="Dark mode") */}}
```

## Live Example

{{ app_screenshot(
container="md",
eyebrow="Product",
title="A clean product frame",
description="Use a real screenshot when available, or let the shortcode render a neutral system mock.",
caption="The placeholder keeps unfinished pages presentable.",
badge_1="Responsive",
badge_2="Dark mode",
badge_3="Tokenized"
) }}

## Parameters

| Parameter     | Description                                  |
| ------------- | -------------------------------------------- |
| `container`   | Inner content width.                         |
| `eyebrow`     | Small uppercase label above the heading.     |
| `title`       | Section heading.                             |
| `description` | Supporting copy below the heading.           |
| `image_src`   | Optional screenshot URL.                     |
| `image_alt`   | Optional screenshot alt text.                |
| `caption`     | Caption shown below the frame.               |
| `badge_N`     | Supporting badge text, up to 3.              |
| `bg`          | Full-width section background token.         |
| `class`       | Additional CSS classes on the outer section. |