Skip to main content

Div

<div>Generic wrapper for grouping and layout.

This page covers the Div block — what it does, when to use it, and when to pick something else.

What it does

Div creates a <div> element — a generic wrapper for grouping content. It has no visual appearance or semantic meaning on its own. You use it to organize blocks together so you can arrange them (rows, columns, grids) or apply shared styles.

When to use

  • Layouts — arrange child blocks as rows, columns, or grids
  • Styling wrappers — group elements that share the same background, spacing, or border
  • Generic grouping — when no semantic element fits

No default attributes

Div starts clean with no preset attributes or classes. Add what you need through the block settings panel.

When to use something else

If you need…Use
A full-width page band with backgroundSection
Width-constrained centered contentContainer
A semantic landmark (<nav>, <aside>, <header>, <footer>)A Div block with the appropriate HTML tag
Common mistake

Don't wrap a single block in a Div just for styling. You can apply styles directly to any block — a Div wrapper only makes sense when you're grouping multiple blocks together.

HTML output

<div>
<!-- Your content -->
</div>

Next steps

  • Section — semantic full-width grouping
  • Container — width-constrained grouping
  • Anchor — clickable link wrapper