Rich Text

Search SG - Rich Text in 53

Create engaging content with a splash of branding.

Background options:
  • White
  • Light
  • Gradients
  • Dark

Fancy new header goes here

Lorem ipsum dolor sit amet, consecte tur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Duis aute irure dolor in reprehenderit in voluptate velit.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

Feature Checklist
  • Multiple variations
  • Image capabilities
  • CTA(s) included
  • Video capabilities
  • Smart
  • Modal friendly
  • Uses HubDB
  • Requires additional help
Use Cases

The Rich Text [SG] module is a more stylized version of the default Rich Text module built into the HubSpot product, offering a variety of brand-approved background themes from which to choose.

This is perfect for adding a pop of color to your page, while still adhering to the theme guardrails described in our Brand Guidelines.

Guidelines
  • Advanced features

    Blockquotes

    • Select some text you would like to appear in a block quote. From the utility bar, select Style > Formats > Blocks > Blockquote.
    • Note: The orange accents only appear on desktop, but the larger font size remains on mobile.

    Gutter Content (<pre> tags)

    • Select text to appear in the gutter of the main content. From the utility bar, select Style > Formats > Blocks > Pre.
    • To change alignment (e.g. right vs. left gutter), select Source Code. Add a class attribute with a value of "gutter-right" to the appropriate <pre> tag. (E.g. <pre class="gutter-right">).
    • Note: On mobile, this text appears back in the normal flow of main content.
    • Note: This content can contain CTAs.

    Full-Width Images

    • After adding an image, select Source Code. Add a class attribute with a value of "full-width-img" to the appropriate <img> tag. (E.g. <img class="full-width-img" src="https://..." />).
    • Note: The image will be responsive and properly sized to the device width on mobile.
  • Variations
    • Limit your background theme selections to 1-2 complementary options per page
    • E.g. Avoid using all 6 gradient background options in a single page
  • Things to know
    • Smart content variations are not supported in this module. If smart content is necessary, please use the default Rich Text module provided by the product.
    • H1 headers are not allowed in this module (please use the Page Header [SG] module instead)
    • Avoid applying further custom styling to content placed in this module (bold, italics, lists, links, headers are all fine)