HubL Reference

Table of contents
Close

Drag and Drop Area HubL Tags [BETA]

⚠️ This is a beta pre-release not intended for mission-critical usage. During the beta period expect lots of changes to syntax and capabilities. ⚠️

Drag and drop areas allow developers to create sections of pages that support layout, stylistic and content changes directly within the content editors. See the Creating a drag and drop area tutorial for an introduction to setting up drag and drop areas. 

Drag and drop areas are based off of a 12 column responsive grid. 

Drag-and-drop Area dnd_area

A drag-and-drop area is the container that makes a portion of the web page editable in terms of its structure, design, and content. The body of a {% dnd_area %} tag supplies the default content for the drag-and-drop area.

Possible children:

- dnd_section
Parameter name Type Required Description
label string yes Used in the editor to label the area in the sidebar
class string no A class added to the wrapping div of a dnd_area

{% dnd_area "unique_name", class="main" %}

{% end_dnd_area %}

<div class="container-fluid main">
  <div class="row-wrapper">
    <div class="row-fluid">
      <div class="span12 widget-span widget-type-cell " style="" data-widget-type="cell" data-x="0" data-w="12">

      </div>
    </div>
  </div>
</div>

Section dnd_section

A section is a top-level row, and can only be a direct child of a drag-and-drop area. This HubL tag must be nested within a {% dnd_area %} tag.

Possible children:

- dnd_column
- dnd_module

Parameter name Type Required Description
background_color
dict no A dict which supports specifying a background color
background_image dict no A dict which supports specifying a background image
max_width integer no A pixel value which sets a content max-width on a wrapping dic
margin dict no A dict which supports specifying margin values
padding dict no A dict which supports specifying padding values
vertical_alignment
string no Vertical alignment of child content. Options: TOP, MIDDLE, BOTTOM

Note: background_color and background_image are mutually exclusive.


{% dnd_section
  background_image={
    'backgroundPosition': 'MIDDLE_CENTER',
    'backgroundSize': 'cover',
    'imageUrl': 'https://example.com/path/to/image.jpg'
  },
  margin={
    'top': 20,
    'bottom': 200
  },
  padding={
    'top': 20,
    'bottom': 200,
    'left': 20,
    'right': 20
  },
  max_width=1200,
  vertical_alignment='MIDDLE'
%}

{% end_dnd_section %}

<div class="row-fluid-wrapper row-depth-1 row-number-1 main-row-0-padding main-row-0-background-image main-row-0-margin">
  <div class="row-fluid ">
  </div>
</div>

Row dnd_row

A row is a horizontal structural building block that creates a nested 12-column layout grid in which columns and modules can be placed. This HubL tag must be nested within a {% dnd_area %} tag.

Possible children:

- dnd_column
- dnd_module

Parameter name Type Required Description
background_color
dict no A dict which supports specifying a background color
background_image dict no A dict which supports specifying a background image
vertical_alignment string no Vertical alignment of child content. Options: TOP, MIDDLE, BOTTOM
margin dict no A dict which supports specifying margin values
padding dict no A dict which supports specifying padding values

Note: background_color and background_image are mutually exclusive.


{% dnd_row
  background_color={
    r: 123,
    g: 123,
    b: 123,
    a: 1.0
  },
  margin={
    'top': 20,
    'bottom': 200
  },
  padding={
    'top': 20,
    'bottom': 200,
    'left': 20,
    'right': 20
  }
%}

{% end_dnd_row %}

<div class="row-fluid-wrapper row-depth-1 row-number-1 main-row-0-padding main-row-0-background-color main-row-0-margin">
  <div class="row-fluid ">
  </div>
</div>

Column dnd_column

A column is a vertical structural building block that occupies one or more layout columns defined by its parent row. This HubL tag must be nested within a {% dnd_area %} tag.

Possible children:

- dnd_row

Parameter name Type Required Description
width integer no The number of columns occupying the 12 column grid
offset integer no The offset from 0 in the 12 column grid
background_color color no A dict which supports specifying a background color
background_image dict no A dict which supports specifying a background image
margin dict no A dict which supports specifying margin values

Note: background_color and background_image are mutually exclusive.


{% dnd_column
  offset=0,
  width=12,
  background_color={
    r: 255,
    b: 0,
    g: 0,
    a: 1
  },
  margin={
    'top': 20,
    'bottom': 200
  },
%}

{% end_dnd_column %}

<div
  class="span12 widget-span widget-type-cell cell_1553090755441-margin cell_1553090755441-background-color"
  style=""
  data-widget-type="cell"
  data-x="0"
  data-w="12">

</div>

Module dnd_module

A drag-and-drop module is a module wrapped within a div that where layout, styles and content can be added. The module is specified by referencing its path, which can either be a HubSpot default module (using the @hubspot/ namespace), or modules you have built, specifying their path within your Design Tools file tree. This HubL tag must be nested within a {% dnd_area %} tag.

Parameter name Type Required Description
width integer no The number of columns occupying the 12 column grid
offset integer no The offset from 0 in the 12 column grid
path string yes The path to a module
flexbox_positioning string no Flexbox position value for the module. Options: TOP_LEFT, TOP_CENTER, TOP_RIGHT, MIDDLE_LEFT, MIDDLE_CENTER, MIDDLE_RIGHT, BOTTOM_LEFT, BOTTOM_CENTER, BOTTOM_RIGHT

{% dnd_module
  path="@hubspot/rich_text",
  offset=0,
  width=8,
  flexbox_positioning="TOP_CENTER"
%}
  {% module_attribute "html" %}
    <h1>Hello, world!</h1>
  {% end_module_attribute %}
{% end_dnd_module %}

<div class="span8 widget-span widget-type-custom_widget main-module-4-flexbox-positioning" style="" data-widget-type="custom_widget" data-x="0" data-w="12">
  <div id="hs_cos_wrapper_main-module-1" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module" >
    <span id="hs_cos_wrapper_module-1_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text">
      <h1>Hello, world!</h1>
    </span>
  </div>
</div>