Blocks Deprecated
Deprecated: use the web blocks for new pages This block belongs to state pages and UI components. Existing pages keep running, but new pages should use the web blocks. See Web Pages and the migration guide.

div

This block is part of the state ui group and was last modified in core v13.0.6.

div v13.0.1 Updated v13.0.6

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

In pins 5
  • content state required

    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 stateevents v14.0.1

    Adds event support to the element • Hidden when unused

Out pins 1
  • state state

    Returns the element to the frontend state.

div

div is the basic layout element: its content pin takes other elements, here a paragraph holding a custom text, and the class pin takes a custom class. 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.

Commonly used with

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

  • div: wired in both directions with this block. Creates a dynamic and customizable div element on your web page.
  • custom: feeds into this block. Custom class input.
  • paragraph: feeds into this block. A paragraph element.
  • hyperlink: feeds into this block. A anchor element, that can be used to create an link to an intern/extern page.
  • h3: feeds into this block. A H3 element.
  • new modal: feeds into this block. Builds a custom modal.

Used in these guides

These documentation pages use or explain this block:

Version history

Introduced in v13.0.1.

Last modified in v13.0.6.

v14.0.1 This block or one of its pins was updated in v14.0.1, click here to see the release notes.
Back to state ui Return to the main group to view all sub-groups Back to state elements Return to the group to view all blocks within this group