# DND {% dnd %}
Refer to: [https://developers.hubspot.com/docs/cms/hubl/tags/dnd-areas](https://developers.hubspot.com/docs/cms/hubl/tags/dnd-areas)
---
-{% dnd\_area %} tag supplies the default content for the drag and drop area.
```
{% dnd_area "unique_name", class="main" %}
{% end_dnd_area %}
```
`dnd_area` tags can also contain the following tags:
- dnd\_section
- dnd\_column
- dnd\_module
- dnd\_row
---
-{% dnd\_section %} is a top-level row, and must be nested within a {% dnd\_area %}
```bash
{% dnd_area %}
{% dnd_section %}
{% end_dnd_section %}
{% end_dnd_area %}
```
`dnd_section` tags can also contain the following tags:
- dnd\_column
- dnd\_module
---
\- {% dnd\_column %} is a vertical structural building block that occupies one or more layout columns defined by its parent row. It must be nested within a {% dnd\_area %} tag
```bash
{% dnd_area %}
{% dnd_column %}
{% end_dnd_column %}
{% end_dnd_area %}
```
dnd\_column Can also contain dnd\_row.
---
\- {% dnd\_row %} is a horizontal structural building block that creates a nested 12-column layout grid in which columns and modules can be placed.
Must be nested within a {% dnd\_area %}
```bash
{% dnd_area %}
{% dnd_row %}
{% end_dnd_row %}
{% end_dnd_area %}
```
dnd\_row can also contain the following tags:
- dnd\_column
- dnd\_module
---
- {% dnd\_module %} is a module wrapped within a div where layout, styles and content can be added.
Must be nested within a {% dnd\_area %} tag.
```
{% dnd_area %}
{% dnd_module
path="@hubspot/rich_text",
offset=0,
width=8,
%}
{% module_attribute "html" %}
Hello, world!
{% end_module_attribute %}
{% end_dnd_module %}
{% end_dnd_area %}
```