Modules BETA

Table of contents
Close

Module options

The new module framework includes a few simple but powerful options for organizing and accessing modules in the Design Manager. The first three items we discuss here are found at the bottom of the Inspector.
Screen Shot 2017-10-17 at 9.50.36 AM.png

Linked files

This is the appropriate place to attach assets like CSS and JS libraries and frameworks. If you have previous experience with modules, you’ll want to check the reference page to make sure you aren’t relying on a method that is no longer supported.

Stylesheets and JavaScript files will be automatically loaded into the head and foot of the document respectively. Other files will be flagged for inclusion when a module is moved/copied. You will still need to link these assets wherever appropriate in the code editor. In most cases, you'll want to use the module_asset_url function for these links. 

The module_asset_url function is the only HubL accepted in the CSS and JS sections of the module editor. It returns the full URL of a linked file. This function accepts one parameter, the filename of the asset. Below is an example of using it to link to a png named arrow.


.arrow{
    background: url({{ module_asset_url('arrow.png') }});
}

Filter tags

Tags help users find the module they’re looking for. A module designer can attach tags for content type and purpose. This can be immensely helpful for your clients or your future self to keep modules from getting lost in crowded portals.

Template usage

In the spirit of exposing things that were previously hidden behind menus and modals, Template usage is simply a quick way to access the id of this module and the proper syntax for using the module in a coded template.

Module icons

Module builders can now add an icon to their module. Icons help users differentiate between modules and give builders an opportunity to inject a little brand identity into the module. To change a module icon, simply click on the current module icon. Icons must be in the svg format and no larger than 10kb.

Note: Icons are rendered monochromatically. Additional colors will be lost, so it's recommended that you design and upload monochromatic icons for best results.

HubSpot Help article screenshot