---
title: "div · RUAL Documentation"
description: "Creates a dynamic and customizable div element on your web page."
canonical: https://docs.rual.nl/block-types/state%20ui/state_div
language: en
---

# div

This block is part of the [`state ui`](https://docs.rual.nl/block-types/state%20ui) group and was last modified in core [`v13.0.6`](https://docs.rual.nl/core-versions/130006).

Creates a dynamic and customizable div element on your web page.

- content required `state` Integrates content or data from other elements.

- class `uiclass` Assigns a CSS class to the element. • Hidden when unused

- style `uistyle` Applies inline CSS style to the element • Hidden when unused

- attributes `uiattributes` Adds custom attributes to the element. • Hidden when unused

- events `v14.0.1` `stateevents` Adds event support to the element • Hidden when unused

- state `state` Returns the element to the frontend state.

| `div` |
| --- |

[div](https://docs.rual.nl/block-types/state%20ui/state_div) is the basic layout element: its content pin takes other elements, here a [paragraph](https://docs.rual.nl/block-types/state%20ui/state_p) holding a [custom text](https://docs.rual.nl/block-types/state%20ui/state_text), and the class pin takes a [custom class](https://docs.rual.nl/block-types/ui%20class/uiclass_custom). Elements nest by wiring state pins, which is how the page tree is built.

![Studio canvas example for the div block: a div with content and a class.](https://docs.rual.nl/canvas-examples/state_div.png)

### Commonly used with

In production blueprints, this block is most often wired together with:

- [div](https://docs.rual.nl/block-types/state%20ui/state_div): wired in both directions with this block. Creates a dynamic and customizable div element on your web page.

- [custom](https://docs.rual.nl/block-types/ui%20class/uiclass_custom): feeds into this block. Custom class input.

- [paragraph](https://docs.rual.nl/block-types/state%20ui/state_p): feeds into this block. A paragraph element.

- [hyperlink](https://docs.rual.nl/block-types/state%20ui/state_a): feeds into this block. A anchor element, that can be used to create an link to an intern/extern page.

- [h3](https://docs.rual.nl/block-types/state%20ui/state_h3): feeds into this block. A H3 element.

- [new modal](https://docs.rual.nl/block-types/state%20ui/state_flow_modal): feeds into this block. Builds a custom modal.

### Version history

Introduced in [`v13.0.1`](https://docs.rual.nl/core-versions/130001).

Last modified in [`v13.0.6`](https://docs.rual.nl/core-versions/130006).

- [v14.0.1](https://docs.rual.nl/core-versions/140001): This block or one of its pins was updated in `v14.0.1`, click here to see the release notes.

- [Back to `state ui`](https://docs.rual.nl/block-types/state%20ui): Return to the main group to view all sub-groups

- [Back to `state elements`](https://docs.rual.nl/block-types/state%20ui?group=state%20elements): Return to the group to view all blocks within this group