Custom HTML Blocks

A Custom HTML Block lets a super admin add their own HTML to a Space or to Mixed Content, giving you control over layout, branding, and interactive elements that go beyond the standard content blocks. This article explains what the block can do, how to keep it on brand, and what to check before you publish.

Custom HTML Blocks can only be added or edited by super admins. Standard admins and learners cannot create or change them.

Adding a Custom HTML Block

You can add a Custom HTML Block in two places: a Space, or a piece of Mixed Content. You can add it either when you first create the Space or Mixed Content item, or when you edit an existing one.

1. Create a new Space or Mixed Content item, or open an existing one to edit.

2. In Add a block, click HTML.

3. In the block editor, paste or write your HTML into the Enter HTML content here field.
   

4. Click Preview to check how it renders before you publish.

5. When you’re ready, click the Save draft button, or use the dropdown next to it to Publish.

The block renders your HTML directly within the Space or Mixed Content for learners.

Important:

Thrive does not validate or sanitise the code you enter. You are responsible for the quality, security, and accessibility of any HTML you add. Always preview and test a block before you publish it.

Note:

The simplest way to keep a block on brand is to use standard HTML tags with no styling of your own – an <h1>, <p>, or <a> on its own. Your content then inherits Thrive's core styling automatically, including fonts, colours, and spacing, and it supports light and dark mode without any extra work.

If you'd rather style the block yourself, you can – the section below shows how to match Thrive's look. Keep in mind that once you set your own styles, Thrive  can't guarantee behaviour like dark mode, and your block may not pick up future styling updates.

Writing HTML That Looks Like Thrive

The block accepts any HTML, so the quickest way to stay on brand is to match Thrive’s type, colour, and spacing. Every example below uses inline styles, so you can paste the markup straight into the block without a separate stylesheet.

Fonts

Thrive uses one typeface, Poppins, for everything – headings, body, and links. Paste this once at the top of your HTML so the text does not fall back to a system font:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

When in doubt, set font-family:'Poppins',sans-serif; on your elements.

Typography

Headings are tight and confident, with letter-spacing:-0.01em. Body text sits at 16px with a 24px line height.

<h1 style="font-family:'Poppins',sans-serif;font-weight:700;font-size:36px;line-height:40px;letter-spacing:-0.01em;color:#18181B;">Heading 1</h1>

Colour

Greyscale does the heavy lifting: neutral text, white surfaces, and 1px borders. Use these values for everything except your brand accent:

Your Brand Colour

Your primary brand colour – used for links, active states, and key accents – is set per organisation, with separate values for light mode and dark mode. There is no single fixed value.

Note:

To find your own values, go to Configure > Theme and copy your light-mode and dark-mode primary colours. Use those wherever an accent or link colour is needed.

Links

Use your brand primary colour, underlined, with a little space under the text:

<a href="#" style="color:[your brand colour];text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;">your link text</a>

Inline styles cannot express a hover state. If you control the CSS, darken the link on hover and keep the underline. Do not change the link's size or weight on hover.

Working With Light and Dark Mode

Learners can view Thrive in light or dark mode, and your block needs to work in both.

• We recommend you don’t set text colours in your HTML. With no colour specified, text inherits Thrive's colours automatically – darker text in light mode, lighter text in dark mode.

• If you do set a text colour, Thrive shows it as-is. A dark colour you choose for light mode may not be legible when a learner switches to dark mode.

• For dark surfaces, Thrive uses a near-black background with a zinc border, never a saturated colour. If you are styling your own dark-mode surface, match this approach.

Rules of Thumb

• Let greyscale carry the layout. Reach for your brand colour sparingly – aim for one accent moment per view, such as a link or a primary action.

• Use Poppins throughout. Do not introduce other typefaces.

• Use 1px solid borders to separate content, not shadows. Avoid dashed borders and coloured shadows.

• Keep surfaces flat. Do not use gradients or place your brand colour behind a large area as a background wash.

• Keep emoji to content only, not to interface elements such as buttons.

Before You Publish

An HTML block gives you a lot of freedom, so a few checks protect the learner experience:

• Preview first. Click Preview to see the block in context before publishing.

• Test on different devices. Thrive can’t guarantee how custom HTML renders across all devices or in the Thrive mobile app, so check your block on desktop and mobile. This is especially important for iframes and third-party embeds.

• Check both modes. View the block in light mode and dark mode.

• Mind future updates. Thrive can’t guarantee that custom HTML will be unaffected by future product updates. Keep blocks simple where you can, and review them periodically.