> This page is for Home.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Box element in the Designer API

> The new Box preset replaces seven legacy layout presets in the Designer API

The Designer API now includes a `Box` element preset. `Box` is a block element with a semantic HTML tag: `div`, `section`, `header`, `footer`, `nav`, `main`, `article`, `aside`, `address`, or `figure`.

## Creating Box elements

Use `webflow.elementPresets.Box` to create a Box element:

```typescript
const selectedElement = await webflow.getSelectedElement();

if (selectedElement?.children) {
  const box = await selectedElement.append(webflow.elementPresets.Box);

  if (box.type === 'Block') {
    await box.setTag('section');
  }
}
```

Creating an element by tag name also creates a Box element when you pass one of the 10 tags above, such as `element.append('div')` or `element.append('section')`.

## Deprecated presets

These presets still work but are deprecated. Use `Box` instead:

* `DivBlock`
* `Section`
* `BlockContainer`
* `Grid`
* `Row`
* `HFlex`
* `VFlex`

## Migrating from the Section preset

The `Section` preset no longer returns an element with the type `Section`. It now returns a `BlockElement` with the type `Block`, the same as `Box` and `DivBlock`.

If your app checks for `element.type === 'Section'` after creating an element with the `Section` preset, update the check to `Block`.

## Checking the HTML tag

A `Block` element can use any of the 10 tags, so the element type doesn't tell you the HTML element.
Narrow the element type, then use [`element.getTag()`](/designer/reference/get-tag) to read the tag. `getTag()` also works for custom elements.

```typescript
const element = await webflow.getSelectedElement();

if (element?.type === 'Block') {
  console.log(await element.getTag()); // for example, 'section'
}
```

For more information, see [Element presets](/designer/reference/element-presets) and [Get HTML tag](/designer/reference/get-tag).