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

# Panel

> Open a side panel with details without leaving the HubSpot record.

# Panel

**Panel** shows a button on the card and opens an overlay with nested content. Use it for drill-downs, longer details, or a self-contained task that is too big for the card itself.

## Availability

Panel can be used in all placements and can contain other building blocks.

## Add and configure

1. Add **Panel** from **Structure**.
2. Enter the **Button label**.
3. Enter the panel's **Title**.
4. Choose a **Panel width**: narrow, medium, or wide.
5. Drag building blocks into the panel's content area.

The panel must have at least one and can have up to 20 direct children. It starts with a text block.

## Data, rules, and steps

The button label and title can be dynamic. The whole panel can be assigned to a step and have a visibility rule. The nested blocks can use the same data sources as the rest of the card.

## Limitations and tips

The schema supports primary and secondary button variants, but the appearance cannot be chosen in the current inspector.

A Panel is an overlay, not a new page. Use Link or an open-link action for actual navigation. Test focus, closing, and all inputs/actions in the preview and in HubSpot.