Rich text

Easily create eye-catching content blocks with options for headings, icons, captions, and styled call-to-action buttons — ustomize alignment, text size, and button style to boost engagement and enhance your site’s visual appeal.

Last updated 2 months ago

Overview

The Rich text block brings visually engaging content to your layouts by combining headings, captions, icons, and call-to-action buttons. Use this block to highlight announcements, showcase promotions, or present editorial text. Each message is designed to stand out and encourage meaningful interaction, no matter the section where it's placed.

⚠️ Important: The Rich text block allows you to create professional, cohesive messaging and calls to action with just a few settings. It is ideal for drawing attention to important information and boosting engagement.

Available in sections

You can add the Rich text block to the following sections:

  1. Collage

  2. Video with text

  3. Slideshow

  4. Multicolumn

  5. Image with text

  6. Sidebar

Key components and functionality

Content settings

Content settings form the core of your Rich text block, allowing you to control how your message is structured and displayed. Adjust alignment, icon use, headings, and rich formatting so the block supports your intended content and visual style.

Text alignment

Set how your text (including headings and captions) aligns horizontally within the block. Choose left, center, or right alignment, depending on your design needs.

Icon position

Decide where an icon appears in relation to your text. Options include top, bottom, center, left, or right placement. Icons can help draw attention or visually reinforce your message.

Icon

Choose an icon to visually enhance your message. Icons support faster scanning and provide extra context or emphasis.

Caption

Use a caption to introduce or add context to your heading. Captions highlight important supporting information.

Heading

Enter the main headline for the block. A descriptive heading gives focus and helps users understand the key topic instantly.

Heading size

  1. Extra small

  2. Small

  3. Medium

  4. Large

  5. Extra large

  6. Jumbo

Heading type

Select the heading level (HTML tag) that fits your visual hierarchy and accessibility needs.

  1. Paragraph (p)

  2. Heading 1 (h1)

  3. Heading 2 (h2) default

  4. Heading 3 (h3)

  5. Heading 4 (h4)

  6. Heading 5 (h5)

  7. Heading 6 (h6)

Content

Add your main text in the rich text area. You can style the text with links, bold, and italic formatting to emphasize key information.

Default content:

<p>Add relevant text content with the richtext editor. Note that you can also include <a href=”#”>links</a> and basic formatting in this content, e.g. <b>bold</b> and <em>italic</em>.</p>

Button settings

Button settings let you create a compelling call-to-action inside your Rich text block. Personalize the button’s icon, label, style, layout, and destination link.

Button icon

Pick an icon to display in the button for added emphasis or clarity of action.

Button text

Enter the button’s label describing the intended action. This can be left empty if you do not want a button to display.

Button link

Set the button’s destination URL. Give users a clear next step or redirect them to featured pages.

Open link in a new tab

Choose whether the button opens its link in a new tab for better user flow.
Default: disabled

Button style

Select a button style that matches the tone of your message and overall page design.

  1. Primary

  2. Secondary

  3. Extra large

  4. Plain

  5. Small

  6. Small secondary

  7. Circle

Button layout

Decide how the button’s text and icon are arranged.

  1. Icon left

  2. Icon right

  3. Icon only

Pick the layout that best supports your message and action.

Usage notes

  1. Use logical heading order for visual hierarchy and accessibility.

  2. Enable the open link in a new tab option if your button sends users away from your current page.

  3. Test text alignment and size across devices for best readability and appearance—especially on mobile screens.

  4. Ensure strong color contrast between text, icons, and background for maximum accessibility.

  5. Only use the Rich text block within supported sections for consistent styling and predictable display.

💡 Tip: Include a caption or icon in your Rich text block for greater recognition and user engagement. Consistent formatting and alignment make key information easier to find and act on.