VPB Module | Heading [DRAFT]

NOTE:

This is in document is still being worked on. You can post your comments on this card: https://app.hubspot.com/contacts/487227/deal/1149340271/

Last Updated: 2019-11-27

Below is a preview of the heading text implementation. You can use this as a reference when you're creating a heading section on your VPB module:

UI Fields

Hubl Implementation

For this section, we'll be using the nf_contentTags macro. 

Please take note that for the sample codes, we only used single curly braces for displaying Hubl variables and calling Hubl macro functions as the blog post is interpreting these codes instead of displaying them as simple text when typed with double curly braces. For the comment and logic we added a space between the curly braces and the percent sign as well as between the curly braces and pound sign.

{ % macro nf_contentTags(option) % }
  { % if option.is_active % }
    <div class="{ option.class }">
      <{ option.tag } { % if option.is_color_active == true % } style="color: { convertColor(option.color) }" { % endif % } >
        { option.text }
      </{ option.tag }>
    </div>
  { % endif % } 
{ % endmacro % }

This macro displays text in a tag that users have specified. This also applies font color styling based on the passed color field value. The options to be passed on to this macro are in dictionary or dict format. Below is an example dict of the options to be sent to nf_contentTags macro.

{ % set headerOption = { tag: 'h1',
                         class: 'content-heading',
                         color: module.content_settings.text.title_color,
                         text: module.content_settings.text.title,
                         is_active: module.content_settings.text.show_title_,
                         is_color_active: theme_not_active
                       }
% }