> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: 12ba4315-5240-42ae-ac92-d023d5cbc000
---

# Drag and Drop Areas HubL Tags

> The HubL tags used to build drag and drop areas that allow developers to create sections of pages that support layout, stylistic and content changes directly within the content editors.

[Drag and drop areas](/cms/start-building/building-blocks/drag-and-drop/custom-email-template) allow developers to create sections of pages and global partials that support layout, stylistic and content changes directly within the content editors. See the [creating a drag and drop area tutorial](/cms/start-building/building-blocks/drag-and-drop/tutorial) for an introduction to setting up drag and drop areas.

Drag and drop areas are based on a 12 column responsive grid. Drag and drop tags render markup with class names designating columns and rows. You'll need to add a stylesheet to target those class names. An example of layout styles you could implement can be found in the [HubSpot CMS Boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/objects/_layout.css). Your stylesheet can be added to the template using [`{{ require_css() }}`](/cms/reference/hubl/tags/standard-tags#require-css).

<HubspotVideoPlayer videoId="172854037902" />

<Warning>
  **Please note:**

  Drag and drop areas can't be used in [blog post](/cms/start-building/building-blocks/templates/blog) and [email templates](/cms/start-building/building-blocks/templates/overview#email) at this time.
</Warning>

## dnd\_area

A [drag and drop area](/cms/start-building/building-blocks/drag-and-drop/custom-email-template) is a 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.

Modules themselves cannot contain drag and drop areas. To provide content creators an interface for adding uniform content within a module, use [repeatable fields and groups](/cms/reference/fields/module-theme-fields#repeaters) instead.

`dnd_area` tags can also contain `dnd_section` tags.

<Warning>
  **Please note:**

  A content creator can swap a page's template for another template of the same type, depending on whether it has [dnd\_area](/cms/reference/hubl/tags/dnd-areas) tags.

  * Templates built with the visual drag and drop layout editor can be swapped for other drag and drop templates or coded templates with or without `dnd_area` tags.
  * Coded templates with *dnd\_area* tags can only be swapped for other coded templates with `dnd_area` tags.
  * Coded templates <u>without</u> `dnd_area` tags can only be swapped for other coded templates without `dnd_area` tags.
</Warning>

<Tabs sync={false}>
  <Tab title="HubL">
    ```jinja theme={null}
    {% dnd_area "unique_name", class="main" %}

    {% end_dnd_area %}
    ```
  </Tab>

  <Tab title="Output">
    ```html theme={null}
    <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>
    ```
  </Tab>
</Tabs>

A `dnd_area` tag can contain the following parameters:

| Parameter | Type   | Description                                          |
| --------- | ------ | ---------------------------------------------------- |
| `class`   | String | A class added to the wrapping div of a dnd\_area     |
| `label`   | String | Used in the editor to label the area in the sidebar. |

## dnd\_section

A [`{% dnd_section %}`](/cms/start-building/building-blocks/sections/sections) is a top-level row, and must be nested within a `{% dnd_area %}` tag. [Sections can also be defined as a template](/cms/start-building/building-blocks/sections/sections#section-templates), and then [included](/cms/start-building/building-blocks/sections/sections#section-context) into a `dnd_area`, making them ideal for quickly scaffolding out a template.

`dnd_section` tags can also contain the following tags:

* `dnd_column`
* `dnd_module`

<Warning>
  **Please note:**

  You can only use one background parameter per `dnd_section` tag.
</Warning>

<Tabs sync={false}>
  <Tab title="HubL">
    ```jinja theme={null}
    {% dnd_section
      background_image={
        "backgroundPosition": "MIDDLE_CENTER",
        "backgroundSize": "cover",
        "imageUrl": "https://example.com/path/to/image.jpg"
      },
        margin={
          "top": 32,
          "bottom": 32
        },
        padding={
          "top": "1em",
          "bottom": "1em",
          "left": "1em",
          "right": "1em"
        },
      max_width=1200,
      vertical_alignment="MIDDLE"
      %}
    {% end_dnd_section %}
    ```
  </Tab>

  <Tab title="Output">
    ```html theme={null}
    <div
    class="row-fluid-wrapper row-depth-1 row-number-1 unique_name-row-0-background-image dnd-section unique_name-row-0-max-width-section-centering unique_name-row-0-margin unique_name-row-0-padding"
    >
      <div class="row-fluid "></div>
      <!--end row-->
    </div>
    <!--end row-wrapper -->
    ```
  </Tab>
</Tabs>

A `dnd_section` tag can contain the following parameters:

| Parameter                    | Type    | Description                                                                                                                                                                                                                          |
| ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `background_color`           | Dict    | A dict which supports specifying a [background color](#background-color). Can also be provided as a string.                                                                                                                          |
| `background_image`           | Dict    | A dict which supports specifying a [background image](#background-image).                                                                                                                                                            |
| `background_linear_gradient` | Dict    | A dict which supports specifying a [linear gradient background](#background-linear-gradient).                                                                                                                                        |
| `full_width`                 | Boolean | A boolean which determines if the section is intended to be full width or constrained by an inner container.                                                                                                                         |
| `margin`                     | Dict    | A dict which supports specifying margin values in `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax`, and `%`. When no unit of measure is provided, the default of `px` is applied.  |
| `max_width`                  | Integer | A pixel value which sets a content max-width on a wrapping dict.                                                                                                                                                                     |
| `padding`                    | Dict    | A dict which supports specifying padding values in `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax`, and `%`. When no unit of measure is provided, the default of `px` is applied. |
| `vertical_alignment`         | String  | Vertical alignment of child content. Available options include:<br /><ul><li>`TOP`</li><li>`MIDDLE`</li><li>`BOTTOM`</li></ul>                                                                                                       |

## dnd\_column

A [`{% dnd_column %}`](/cms/reference/hubl/tags/dnd-areas#dnd-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, and can contain `dnd_row`.

<Warning>
  **Please note:**

  You can only use one background parameter per `dnd_column` tag.
</Warning>

<Tabs sync={false}>
  <Tab title="HubL">
    ```jinja theme={null}
    {% dnd_column
    offset=0,
    width=12,
    background_color={
    r: 255,
    g: 0,
    b: 0,
    a: 1
    },
    margin={
    "top": "1em",
    "bottom": "1em"
    },
    %}

    {% end_dnd_column %}
    ```
  </Tab>

  <Tab title="Output">
    ```html theme={null}
    <div
    class="span12 widget-span widget-type-cell unique_name-column-1-margin unique_name-column-1-background-color unique_name-column-1-vertical-alignment dnd-column"
    style=""
    data-widget-type="cell"
    data-x="0"
    data-w="12"
    ></div>
    <!--end widget-span -->
    ```
  </Tab>
</Tabs>

A `dnd_column` tag can contain the following parameters:

| Parameter                    | Type    | Description                                                                                                                                                                                                                          |
| ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `background_color`           | Dict    | A dict which supports specifying a [background color](#background-color).                                                                                                                                                            |
| `background_image`           | Dict    | A dict which supports specifying a [background image](#background-image).                                                                                                                                                            |
| `background_linear_gradient` | Dict    | A dict which supports specifying a [linear gradient background](#background-linear-gradient).                                                                                                                                        |
| `margin`                     | Dict    | A dict which supports specifying margin values in `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax`, and `%`. When no unit of measure is provided, the default of `px` is applied.  |
| `max_width`                  | Integer | A pixel value which sets a content max-width on a wrapping dict.                                                                                                                                                                     |
| `padding`                    | Dict    | A dict which supports specifying padding values in `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax`, and `%`. When no unit of measure is provided, the default of `px` is applied. |
| `vertical_alignment`         | String  | Vertical alignment of child content. Available options include:<br /><ul><li>`TOP`</li><li>`MIDDLE`</li><li>`BOTTOM`</li></ul>                                                                                                       |

## dnd\_row

A [`{% dnd_row %}`](/cms/start-building/building-blocks/drag-and-drop/overview) 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, and can contain `dnd_column` and `dnd_module`.

<Warning>
  **Please note:**

  You can only use one background parameter per `dnd_row` tag.
</Warning>

<Tabs sync={false}>
  <Tab title="HubL">
    ```jinja theme={null}
    {% 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 %}
    ```
  </Tab>

  <Tab title="Output">
    ```html theme={null}
    <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>
    ```
  </Tab>
</Tabs>

A `dnd_row` tag can include the following parameters:

| Parameter                    | Type    | Description                                                                                                                                                                                                                          |
| ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `background_color`           | Dict    | A dict which supports specifying a [background color](#background-color).                                                                                                                                                            |
| `background_image`           | Dict    | A dict which supports specifying a [background image](#background-image).                                                                                                                                                            |
| `background_linear_gradient` | Dict    | A dict which supports specifying a [linear gradient background](#background-linear-gradient).                                                                                                                                        |
| `margin`                     | Dict    | A dict which supports specifying margin values in `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax`, and `%`. When no unit of measure is provided, the default of `px` is applied.  |
| `max_width`                  | Integer | A pixel value which sets a content max-width on a wrapping dict.                                                                                                                                                                     |
| `padding`                    | Dict    | A dict which supports specifying padding values in `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax`, and `%`. When no unit of measure is provided, the default of `px` is applied. |
| `vertical_alignment`         | String  | Vertical alignment of child content. Available options include:<br /><ul><li>`TOP`</li><li>`MIDDLE`</li><li>`BOTTOM`</li></ul>                                                                                                       |

## dnd\_module

A [`{% dnd_module %}`](/cms/reference/hubl/tags/dnd-areas#dnd-module) is a [module](/cms/start-building/building-blocks/modules/hide-modules-and-sections) wrapped within a div 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 the design manager file tree.

This HubL tag must be nested within a `{% dnd_area %}` tag.

<Tabs sync={false}>
  <Tab title="HubL">
    ```jinja theme={null}
    {% dnd_module
      path="@hubspot/rich_text",
      offset=0,
      width=8,
    %}
      {% module_attribute "html" %}
        <h1>Hello, world!</h1>
      {% end_module_attribute %}
    {% end_dnd_module %}
    ```
  </Tab>

  <Tab title="Output">
    ```html theme={null}
    <div
    class="span8 widget-span widget-type-custom_widget"
    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>
    ```
  </Tab>
</Tabs>

A `dnd_module` tag can contain the following parameters:

| Parameter              | Type    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `path`                 | String  | The path to a module.                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `horizontal_alignment` | String  | Horizontal positioning, supports:`LEFT`, `CENTER`, `RIGHT`                                                                                                                                                                                                                                                                                                                                                                                                          |
| `offset`               | Integer | The offset from 0 in the 12 column grid.                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `width`                | Integer | The number of columns occupying the 12 column grid.                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `flexbox_positioning`  | String  | **Deprecated do not use.** Instead, use `horizontal_alignment` in tandem with the row or section's `vertical_alignment` instead.<br />Flexbox position value for the module. Supported a string indicating vertical position followed by horizontal:<ul><li>`TOP_LEFT`</li><li>`TOP_CENTER`</li><li>`TOP_RIGHT`</li><li>`MIDDLE_LEFT`</li><li>`MIDDLE_CENTER`</li><li>`MIDDLE_RIGHT`</li><li>`BOTTOM_LEFT`</li><li>`BOTTOM_CENTER`</li><li>`BOTTOM_RIGHT`</li></ul> |

<Tip>
  Have an old module which has a field name that matches one of the `dnd_module` parameters above? You can [pass default values through a fields parameter](/cms/reference/modules/using-modules-in-templates#passing-fields-that-have-dnd-associated-parameters), much like you would a field group.
</Tip>

## Background

There are a few ways to set backgrounds on column, section and row dnd elements, [`background_image`](#background-image), [`background_linear_gradient`](#background-linear-gradient), and [`background_color`](#background-color).

### background\_color

The column, section, and row dnd tags support background colors. You can set the default background color for a drag and drop element using `background_color`. This parameter is a string based parameter and can include the following formats outlined in the example below.

```jinja theme={null}
{% dnd_section %}
  // Hex Value (both 3 and 6 char length)
  {% dnd_column background_color="#F7F7F7" %}
  {% end_dnd_column %}
  {% dnd_column background_color="#FFF" %}
  {% end_dnd_column %}
// Both RGB and RGBA
  {% dnd_column background_color="rgb(255,255,255)" %}
  {% end_dnd_column %}
  {% dnd_column background_color="rgba(0,0,0,.25)" %}
  {% end_dnd_column %}
{% end_dnd_section %}
```

### background\_linear\_gradient

The column, section and row dnd elements support background linear gradients. You can set a default gradient using the `background_linear_gradient` parameter. The parameter expects a dict. Currently only supports two color stops.

```jinja theme={null}
{% dnd_section
  background_linear_gradient={
    "direction": "to bottom",
    "colors": [
      "#1EB6C3",
      "#2A2859"
    ]
  }
%}
  {% dnd_module path="@hubspot/rich_text" width="6" %}
  {% end_dnd_module %}
{% end_dnd_section %}
```

| Parameter   | Type   | Description                                                                                                                                                                                                                                           |
| ----------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `direction` | String | The direction of the gradient.<ul><li>`to bottom`</li><li>`to top`</li><li>`to left`</li><li>`to right`</li></ul>                                                                                                                                     |
| `colors`    | array  | Array of color strings. Currently supports 2 values, the start and end. Values are provided as strings, and the following formats are supported:<ul><li>`RGB`</li><li>`RGBA`</li><li>`3 char hex`</li><li>`6 char hex`</li><li>`8 char hex`</li></ul> |

### background\_image

The column, section and row dnd elements support background images. You can provide a default background image by using the `background_image` parameter which expects a dict.

```jinja theme={null}
{% dnd_section
  background_image = {
      "backgroundPosition": "MIDDLE_CENTER",
      "backgroundSize": "cover",
      "imageUrl": "https://www.example.com/bg-image.jpg"
    },
%}
  {% dnd_module path="@hubspot/rich_text" width="6" %}
  {% end_dnd_module %}

{% end_dnd_section %}
```

| Key                  | Type   | Description                                                                                                                                                                                                                                                                                                                 |
| -------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `backgroundPosition` | String | The background position of the image. Supports a string indicating vertical position followed by horizontal.<ul><li>`TOP_LEFT`</li><li>`TOP_CENTER`</li><li>`TOP_RIGHT`</li><li>`MIDDLE_LEFT`</li><li>`MIDDLE_CENTER`</li><li>`MIDDLE_RIGHT`</li><li>`BOTTOM_LEFT`</li><li>`BOTTOM_CENTER`</li><li>`BOTTOM_RIGHT`</li></ul> |
| `backgroundSize`     | String | The CSS background size property used for the image.<br />Supported values are:<ul><li>`cover`</li><li>`contain`</li><li>`auto`</li></ul>                                                                                                                                                                                   |
| `imageUrl`           | String | Absolute URL to the image.                                                                                                                                                                                                                                                                                                  |

## How dnd style parameters translate to the page

When you are using style based parameters such as [backgrounds](#background), margins, or padding, the class names are automatically computed for your sections, columns, rows, and modules. The property values you have assigned are then added to those automatically created class names and the resulting CSS code is then placed before the closing `</body>` tag on the page in a `<style>` tag.

[Drag and drop styles can also be different at different breakpoints](/cms/start-building/building-blocks/templates/responsive-breakpoints) to offer a responsive look.