Inline Notice Block

The Inline Notice block provides a structured way to highlight important information within a page. It combines a styled heading with supporting content, making it ideal for announcements, alerts, or key callouts.

Why use the Inline Notice block

Use the Inline Notice block when you want to:

  • Draw attention to important information within a page
  • Highlight announcements, updates, or key messages
  • Separate supporting content from the main flow
  • Add visual emphasis without disrupting layout

This block helps important content stand out while remaining consistent with the overall design.

How to use the block

Start by adding the Inline Notice block to your page. Learn how to add blocks.

The block includes two required sections:

  • A heading section with an icon and heading text
  • A content section for supporting information

Add your heading first, then use the content area to add supporting text or actions. This block is designed to be used with both a heading and content — both sections should always be included.

Block structure

Heading section

The top section includes:

  • An icon
  • A heading
  • A solid background color

This section introduces the notice and should be short and clear.

Content section

The content section appears below the heading and includes:

  • A border that matches the heading color
  • Inner blocks for flexible content

You can add any blocks, however it is recommended to use simple text blocks such as Paragraph, Heading, List, and Button. This section is required and should always be used to support the heading.

Block toolbar

The block toolbar appears above the block when it’s selected.

Available options

  • Block width: Control how wide the block appears within the layout
  • Text formatting: Apply bold, italic, or links to the heading text

Block settings

Block settings appear in the right sidebar while the block is selected.

Icon

Click Open Icon Picker to launch the icon selection modal, which includes three tabs:

Icon

Choose the icon you want to display.

  • Browse icons in the grid
  • Use the search field to find icons quickly
  • Select an icon to apply it to the card

Colors

Controls the icon appearance.

  • Icon Color — sets the color of the icon
  • Icon Background Color — sets the background color behind the icon. Applying a background color can help the icon stand out visually.

Dimensions

Controls the size and spacing of the icon container.

  • Container Padding — adds spacing inside the icon container (pixel value). Padding is often used when a background color is applied to create balanced spacing around the icon.
  • Container Size — controls the overall size of the icon container
  • Rounded Icon — toggles a circular container shape

Theme color

Choose from available brand colors. This updates both the heading background color and content border color.

Header text color

Choose light (white) or dark (black) text. Select a color that provides strong contrast with the background.

Block styles

In the Styles tab of the block settings sidebar:

  • Margin: Controls space around the block. Use margin to separate the notice from surrounding content.

Tips for editors

Use both sections together

The heading and content are designed to work together. Always include both to ensure clarity and consistency.

Keep headings short and clear

Use the heading to summarize the message. Avoid long or complex text in this area.

Use color intentionally

Choose a theme color that reflects the importance or tone of the message, and use it consistently across similar notices.

Keep content focused

Use the content area for supporting details. Avoid adding too many elements that could dilute the message.

Use sparingly

Inline notices are meant to stand out. Using too many on a page can reduce their effectiveness.