27 – Tabbed Effect
- 1 Minute to read
- Print
- DarkLight
27 – Tabbed Effect
- 1 Minute to read
- Print
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback
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.
Option | Details | Default |
Padding | Top | 10 |
Right | 10 | |
Bottom | 10 | |
Left | 10 |
Tab Selection
Select the number of tabs required from the drop-down menu.
Option | Details | Default |
Number Of Tab Selection |
| 3-Tabs |
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.
Option | Details | Default |
Background Color | Block Background Color | #ffffff |
Tap Tab Background Color
Each tab can be Colored individually.
Option | Details | Default |
Tap Tab Background Color | Left Tap Tab Background Color | #C75787 |
Middle Tap Tab Background Color | #01797A | |
Extra Tap Tab Background Color | #F9413A | |
Right Tap Tab Background Color | #014A97 |
Font Weight
Edit the font weight in the tab's section.
Option | Details | Dropdown | Default |
Font Weight | Tap Tab Main Title Font Weight | Bold/Normal | Bold |
Tab Title Font Weight | Bold |
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.
Option | Details | Default |
Line Height | Tap Tab Main Title Line Height | 26 |
Tap Tab Sub Title Line Height | 14 | |
Tab Title Line Height | 18 | |
Tab Text Line Height | 18 |
Tab Title and Text Alignment
Change the position of the Tab title text using the drop-down. The title text also moves accordingly.
Option | Dropdown | Default |
Title and Text Alignment |
| Left |
CTA
All CTA's have multiple styling options. As with all colors, please use HEX values.
Option | Details | Default |
CTA | Left Tab CTA Background Color | #C75787 |
Middle Tab CTA Background Color | #01797A | |
Extra Tab CTA Background Color | #F9413A | |
Right Tab CTA Background Color | #014A97 | |
CTA Alignment | Center | |
Text Color | #ffffff | |
Font weight | Bold | |
Border radius | 25 | |
Border width | 1 | |
Border Color | #e71825 | |
Height | 52 |
Links
Add all the relevant Tab CTA's.
Option | Details | Default |
Links | Left Tab CTA Link | |
Middle Tab CTA Link | ||
Extra Tab CTA Link | ||
Right Tab CTA Link |
Was this article helpful?