Styled Sections in DealHub Playbook

You can add simple HTML directly in the DealHub playbook question Name to create clearer, visually separated sections for your users.

Here are 2 common use cases and their breakdown:
 

Use case 1 – Colored title

Insert this into the playbook question Name to create a blue, bold section title:

xml

<font size="4" face="Arial" color="#2596be"><b>Opportunity Summary</b></font>

Result: The question title is rendered in Arial, slightly larger, bold, and in the DealHub-like blue color, making the section stand out in the playbook UI (shown in the first screenshot).​

Use case 2 – Visual divider

Right below the title, add this line divider in a separate question Name (or as the next line where supported):

xml

<font face="Arial" color="#2596be">━━━━━━━━━━━━━━━━━━</font>

Result: A clean blue divider bar appears, visually separating sections in the playbook and helping users scan the flow more easily (shown in the second screenshot).​

Quick breakdown of the HTML sections

• <font ...>: The font element controls the font face, size, and color of the enclosed text, though it is considered deprecated in modern HTML but still works in many rendering engines.​

• size="4": Sets the relative font size (HTML font sizes typically range from 1 to 7, with 3 as the default, so 4 is slightly larger than normal text).​

• face="Arial": Requests the Arial font family for the text inside the font tag.​

• color="#2596be": Defines the text color in hexadecimal format (here, a blue shade aligned with DealHub’s visual style).​

• <b>...</b>: Wraps the title text in bold, making it more prominent in the playbook UI.​

You can reuse the same pattern for other sections (for example: “Pricing Details”, “Discount Summary”, “Approval Notes”) by changing only the inner text.