{% dnd_area "main" label="Main Content" %} {# Page Header #} {% dnd_section padding={ "top": 60, "bottom": 40, "left": 20, "right": 20 }, max_width=900 %} {% dnd_module "header_intro" path="@hubspot/rich_text", label="Header Introduction" %} {% module_attribute "html" %} {% end_module_attribute %} {% end_dnd_module %} {% end_dnd_section %} {# Headings #} {% dnd_section padding={ "top": 40, "bottom": 40, "left": 20, "right": 20 }, max_width=900 %} {% dnd_module "headings" path="@hubspot/rich_text", label="Headings" %} {% module_attribute "html" %}

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

{% end_module_attribute %} {% end_dnd_module %} {% end_dnd_section %} {# Paragraphs & Text #} {% dnd_section padding={ "top": 40, "bottom": 40, "left": 20, "right": 20 }, max_width=900 %} {% dnd_module "paragraphs" path="@hubspot/rich_text", label="Paragraphs & Text" %} {% module_attribute "html" %}

Paragraphs & Text

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a lead paragraph - larger for introductions.

This is small text for fine print and disclaimers.

Emphasis & Inline Styles

Bold text • Italic text • Underlined • Highlighted • Strikethrough • inline code

This is a standard link in text.

{% end_module_attribute %} {% end_dnd_module %} {% end_dnd_section %} {# Lists #} {% dnd_section padding={ "top": 40, "bottom": 40, "left": 20, "right": 20 }, max_width=900 %} {% dnd_column width=12 %} {% dnd_row %} {% dnd_module "list_unordered" path="@hubspot/rich_text", label="Unordered List", width=6 %} {% module_attribute "html" %}

Unordered List

• First item
• Second item
  • Nested item
  • Another nested
• Third item

{% end_module_attribute %} {% end_dnd_module %} {% dnd_module "list_ordered" path="@hubspot/rich_text", label="Ordered List", width=6, offset=6 %} {% module_attribute "html" %}

Ordered List

1. First step
2. Second step
   1. Sub-step A
   2. Sub-step B
3. Third step

{% end_module_attribute %} {% end_dnd_module %} {% end_dnd_row %} {% end_dnd_column %} {% end_dnd_section %} {# Blockquotes #} {% dnd_section padding={ "top": 40, "bottom": 40, "left": 20, "right": 20 }, max_width=900 %} {% dnd_module "blockquotes" path="@hubspot/rich_text", label="Blockquotes" %} {% module_attribute "html" %}

Blockquotes

"This is a standard blockquote. Use for testimonials or to highlight important information."

{% end_module_attribute %} {% end_dnd_module %} {% end_dnd_section %} {# Code #} {% dnd_section padding={ "top": 40, "bottom": 40, "left": 20, "right": 20 }, max_width=900 %} {% dnd_module "code" path="@hubspot/rich_text", label="Code Blocks" %} {% module_attribute "html" %}

Code

Inline: const value = "example";

// Code block
function example() {
  return "Hello, World!";
}

{% end_module_attribute %} {% end_dnd_module %} {% end_dnd_section %} {# Tables #} {% dnd_section padding={ "top": 40, "bottom": 40, "left": 20, "right": 20 }, max_width=900 %} {% dnd_module "tables" path="@hubspot/rich_text", label="Tables" %} {% module_attribute "html" %}

Tables

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

{% end_module_attribute %} {% end_dnd_module %} {% end_dnd_section %} {# Buttons (CSS Classes) #} {% dnd_section padding={ "top": 40, "bottom": 40, "left": 20, "right": 20 }, max_width=900 %} {% dnd_module "buttons" path="@hubspot/rich_text", label="Buttons" %} {% module_attribute "html" %}

Buttons

Apply these CSS classes to links or buttons:

Sizes

{% end_module_attribute %} {% end_dnd_module %} {% end_dnd_section %} {# Alerts #} {% dnd_section padding={ "top": 40, "bottom": 40, "left": 20, "right": 20 }, max_width=900 %} {% dnd_module "alerts" path="@hubspot/rich_text", label="Alerts" %} {% module_attribute "html" %}

Alerts & Notices

{% end_module_attribute %} {% end_dnd_module %} {% end_dnd_section %} {# Colors #} {% dnd_section padding={ "top": 40, "bottom": 60, "left": 20, "right": 20 }, max_width=900 %} {% dnd_module "colors" path="@hubspot/rich_text", label="Brand Colors" %} {% module_attribute "html" %}

Brand Colors

{% end_module_attribute %} {% end_dnd_module %} {% end_dnd_section %} {# Accordions (Native HTML) #} {% dnd_section padding={ "top": 40, "bottom": 40, "left": 20, "right": 20 }, max_width=900 %} {% dnd_module "accordions" path="@hubspot/rich_text", label="Accordions" %} {% module_attribute "html" %}

Accordions (Native HTML)

Use <details> and <summary> in any rich text:

Click to expand

This content is hidden by default and revealed when clicked. No JavaScript required!

Open by default

Add the open attribute to have it expanded initially.

{% end_module_attribute %} {% end_dnd_module %} {% end_dnd_section %} {% end_dnd_area %}