> ## Documentation Index
> Fetch the complete documentation index at: https://docs.screenframed.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Elements and Selectors

Capture one component, card, chart, hero, or section instead of an entire page.

Element capture is for assets where a full page is too noisy. You can target elements deterministically with `selector` or describe them with `element`.



## CSS selector capture

Use `selector` when you can add stable capture hooks to your app.

```json
{
  "url": "https://example.com/pricing",
  "selector": "[data-capture='pricing-table']",
  "background_style": "transparent",
  "inset": 24,
  "output": { "format": "png" }
}
```

Prefer capture-specific attributes like `data-capture="pricing-table"` over brittle class names generated by a CSS framework.

## Natural-language element capture

Use `element` when the page is external, you do not control selectors, or the target is easier to describe.

```json
{
  "url": "https://example.com",
  "element": "the pricing cards section",
  "background_preset": "arctic",
  "shadow": "soft",
  "aspect_ratio": "16:9"
}
```

The response can include `element_resolved`:

```json
{
  "element_resolved": {
    "description": "the pricing cards section",
    "method": "dom-analysis",
    "selector": "section[data-pricing]",
    "bounds": { "x": 120, "y": 480, "width": 1080, "height": 520 }
  }
}
```

## Inset and background balance

| Field | Description |
|---|---|
| `inset` | Adds internal padding around the captured element. |
| `inset_balance` | Uses detected element background where helpful. |
| `auto_balance` | Allows ScreenFramed to pick helpful default styling when you have not specified a visual direction. |

## Patterns that work well

**[Docs screenshots](/guides/docs-screenshots)**

Capture a form, settings panel, table, or code output block directly from the live product.
  **Changelog assets**

Capture the shipped feature instead of a full dashboard with unrelated navigation.
  **Directory cards**

Capture a hero, pricing table, or product screenshot consistently across many URLs.
  **Transparent exports**

Render isolated components as transparent PNGs for design systems, docs, and slide decks.

## Debugging selector captures

If a selector capture fails:

1. Confirm the selector exists after the page finishes loading.
2. Try `wait_for: "networkidle"` or a numeric delay.
3. Hide overlays that may cover the target element.
4. Use `show_resolved_params: true` while debugging request construction.