dx/bgbox – Background box

dx/bgbox is a simple wrapper for framing content — perfect behind photos, callouts, notes, or grouped content.

Usage

• tone (optional): neutral|info|warn|danger|success (default: neutral)
• title (optional): heading text shown at the top of the box
• class (optional): extra CSS classes on the wrapper

Examples

Each example below shows:

• Code (what you type in Markdown)
• Renders (what the shortcode outputs)

Basic

Code

1
2
3

{{< dx/bgbox >}}
This is a plain bgbox.
{{< /dx/bgbox >}}

Renders

With tone + title

Code

1
2
3

{{< dx/bgbox tone="info" title="Note" >}}
This is an **info** bgbox with a title.
{{< /dx/bgbox >}}

Renders

Tone gallery

These are the built-in tones. You can use them to match your site’s design language, and you can override the underlying colours via CSS variables.

Neutral

Code

1
2
3

{{< dx/bgbox tone="neutral" >}}
Neutral tone.
{{< /dx/bgbox >}}

Renders

Info

Code

1
2
3

{{< dx/bgbox tone="info" >}}
Info tone.
{{< /dx/bgbox >}}

Renders

Warn

Code

1
2
3

{{< dx/bgbox tone="warn" >}}
Warn tone.
{{< /dx/bgbox >}}

Renders

Danger

Code

1
2
3

{{< dx/bgbox tone="danger" >}}
Danger tone.
{{< /dx/bgbox >}}

Renders

Success

Code

1
2
3

{{< dx/bgbox tone="success" >}}
Success tone.
{{< /dx/bgbox >}}

Renders

Behind a photo

This is the common pattern: use dx/bgbox as a wrapper around dx/photo. Notice that markdown is allowed in the caption.

Code

1
2
3

{{< dx/bgbox tone="neutral" >}}
{{< dx/photo src="test.jpg" caption_pos="below" >}}**Montreal** - Place des Arts{{< /dx/photo >}}
{{< /dx/bgbox >}}

Renders

LEICA M11 — Super-Elmar-M 1:3.4/21 ASPH. — 1/350 • ƒ/9.5 • ISO 100

Montreal - Place des Arts