27 – Tabbed Effect

Description

An interactive block where the recipient is able to click tabs within the email, displaying selected text relevant to each tab. Up to 4 tabs can be selected. Each body of text and styling is independent of one another.

Default block view

Desktop

Mobile

Formatting options

Padding

This refers to the space between the block's content and its border. This can be edited in the Details Tab.

Tab Selection

Select the number of tabs required from the drop-down menu.

Block Background Color

Used to change the block background color. Only use HEX color values. HTML email only recognizes 6-digit long-hand versions and has patchy support for shorthand versions.

Tap Tab Background Color

Each tab can be Colored individually.

Font Weight

Edit the font weight in the tab's section.

Line Height

Used to change the text line height.

As with all text, please be sure the minimum line height value is not less than 4px higher than the font size. For example, if the font size is 18px, the line height should not exceed 22px.

Tab Title and Text Alignment

Change the position of the Tab title text using the drop-down. The title text also moves accordingly.

CTA

All CTA's have multiple styling options. As with all colors, please use HEX values.

Links

Add all the relevant Tab CTA's.