Panel

The Panel component (ui:panel) wraps a single suppressed block variable in a styled container. Use it to add visual weight, grouping, or breathing room to any block — including layout blocks like ui:columns and ui:rows.

Examples

Card (default)

Subtle background, rounded corners, thin border, and a light shadow.

View Glyph Markdown source

```ui:kpi=_revenue
metrics:
  - label: Revenue
    value: $4.2M
    delta: "+18% YoY"
    trend: up
    sentiment: positive
  - label: ARR
    value: $50.4M
    trend: up
    sentiment: positive
columns: 2
```

```ui:panel
child: revenue
style: card
padding: 1.5rem
```

Bordered

Visible border with rounded corners, no fill. Clean and minimal.

View Glyph Markdown source

```ui:callout=_note
type: info
title: Deployment Notice
content: Release 2.4.0 is scheduled for March 12. No breaking changes.
```

```ui:panel
child: note
style: bordered
padding: 1.25rem
```

Elevated

Prominent drop shadow to visually lift the panel. Use sparingly to highlight the most important block.

View Glyph Markdown source

```ui:callout=_highlight
type: tip
title: Q1 Objective
content: Achieve $50M ARR by March 31. Current tracking at 98.7% of target.
```

```ui:panel
child: highlight
style: elevated
padding: 1.5rem
```

Ghost

No visual chrome — only padding is applied. Useful for spacing control without adding borders or background.

View Glyph Markdown source

```ui:callout=_quiet
type: warning
title: Internal Note
content: Do not distribute outside the executive team before board approval.
```

```ui:panel
child: quiet
style: ghost
padding: 2rem
```

Properties

Property	Type	Required	Default	Description
`child`	`string`	Yes	—	Name of the suppressed block variable to wrap.
`style`	`"card" \| "bordered" \| "elevated" \| "ghost"`	No	`"card"`	Visual style of the panel container.
`padding`	`string`	No	`"1rem"`	CSS padding inside the panel (e.g. `"1.5rem"`, `"1rem 2rem"`).

Wrapping layout blocks

ui:panel can wrap any block, including ui:columns and ui:rows. Define the layout block as a suppressed variable and reference it:

```ui:columns=_grid
ratio: [1, 1]
gap: 1rem
children: [left, right]

child: grid
style: card
padding: 1.5rem

The suppressed block must be defined before the panel that references it.