Netfluence Corporation


Knowledge Base

VPB Module | Heading [DRAFT]

Published: Nov 25, 2019 10:08:03 PM


This is in document is still being worked on. You can post your comments on this card:


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

Label Field Type Description

Show Title

Boolean Field Allows users to add/display the title text


Text Field Allows users to input a custom text for the title display

Title Color

Color Field Allows users to select a font color for the title text


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 }>
{ % 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
% }


Variable Description


Allows users to specify which tag to use to wrap the content


Font color style. Users can use the color field value.


Content text.


Show/Hide. Will show element when set to 'true'.


When set to 'true', this will apply the set font color else will inherit global font color styling set on the site configuration page.