Content Boxes

Wrap text or other content in a colored background box to highlight important information.

Syntax

:::box #hexcolor

Your content goes here.

:::

Or with a visible border:

:::box #hexcolor border

Your content goes here.

:::

The #hexcolor is a 3- or 6-character hex color code (the # and the numbers/letters after it). The optional word border adds a subtle outline around the box.

Examples

Simple light yellow box

Type this in Contentful:

:::box #fed

**Note:** Applications close on December 31st.

:::

What you’ll see: A soft yellow box containing the text “Note: Applications close on December 31st.”

Light blue info box with border

Type this in Contentful:

:::box #def border

**Tip:** You can submit your application online or by mail.

:::

What you’ll see: A light blue box with a subtle border around it and the tip text inside.

Multi-paragraph box

Type this in Contentful:

:::box #efe

## Important Notice

All submissions must include:

- Completed application form
- Proof of identification
- Payment receipt

:::

What you’ll see: A light green box containing a heading, an intro line, and a bullet list.

Options / Variations

Choosing a color:

Hex colors are 3 or 6 characters after the #. Here are some easy ones to remember:

You can use any valid hex color. A 3-character code like #fed is shorthand for #ffeeDD (each character is doubled automatically).

Border option:

Adding border after the color gives the box a subtle 1px outline, making it stand out a bit more:

:::box #fed border

Tips

• Light colors work best — very dark backgrounds will make text hard to read.
• Content boxes can contain headings, lists, bold text, and even other formatting — just keep it within the ::: markers.

Common Mistakes

Forgetting the closing :::

Wrong:

:::box #fed

Some important text.

Right:

:::box #fed

Some important text.

:::

Without the closing ::: on its own line, the box won’t render — all the content below it may disappear or behave unexpectedly.

Forgetting the # before the color

Wrong: :::box fed Right: :::box #fed

The # is required — it’s how the system knows you’re specifying a color.

Using an invalid hex color

Wrong: :::box #yellow or :::box #12345 Right: :::box #fed or :::box #ffeecc

Hex colors must be exactly 3 or 6 characters (numbers 0–9 and letters a–f only). Color names like “yellow” don’t work here.