Basic Blocks

Field	Value
Audience	public
Page type	reference
Area	sg-builder
Updated	2026-05-14

Foundational SG-Builder blocks — sections, columns, headings, text, images, CTA buttons, and more.

Basic Blocks is the SG-Builder component category covering foundational layout and content primitives. Every page built in SG-Builder uses Basic blocks as the structural backbone — sections hold the high-level shape; columns lay out content within sections; headings, text, images, and CTA buttons are the leaf-level content. The category also includes utility blocks (Div, Spacer, Divider) and media blocks (Video, Embed Map, Code). This page is the Reference definition.

What is this for?

Read this page when you want the structural definition of the foundational block set — what each Basic block is for and where it fits in the composition model.

Good use cases

• You are scoping page composition and need the Basic block inventory.
• You are explaining to a stakeholder what the foundational blocks are.
• You hit a "which block holds the hero?" question and want the model laid out.

What NOT to use this for

• Step-by-step procedures — open the relevant Guide.
• Per-trait configuration detail — Components Reference.
• Per-release shipped change — open What's New or Changelog.

How this connects to other features

• Components — parent Reference.
• Posts Blocks — sibling category.
• Ecommerce Blocks — sibling category.
• Extra Blocks — sibling category.

---

Definition

Basic Blocks are the foundational components in SG-Builder — the layout containers (Section, Column, Div), the leaf-level content blocks (Heading, Text, Image, CTA Button), utility blocks (Spacer, Divider), and media/specialty blocks (Video, Embed Map, Code, Typing Rotator). Every page composes from these as the structural backbone. Note: the block library does not have a standalone Grid block — column count is set per Column variant.

The defining property is foundational. A page rarely consists only of specialty blocks; the Basic set provides the structural shape that other categories layer onto.

Purpose

The purpose of this page is to define Basic Blocks as a Reference layer. It enumerates the blocks in scope and explains where each fits in composition.

Scope

This page covers Basic Blocks at the Reference level.

The page covers:

• The block inventory in the Basic category.
• Per-block role and typical placement.
• The boundary against other categories.

The page does not cover:

• Per-trait configuration detail — Components Reference.
• Per-step procedures — Guides.
• Per-release shipped change — What's New or Changelog.

---

Block inventory

Section

The top-level layout container. A page is a sequence of sections; each section spans the full width of the page (or a constrained width per layout traits).

Column

A column container. Column variants in the block library are standalone — operators pick the column count they need and place content blocks inside. There is no separate Grid block.

Heading

Text content with semantic heading level (H1 through H6) and typography traits.

Text

Body text content with typography and spacing traits. The block is labeled "Text" in the live block library (not "Paragraph").

Image

Image content with source, alt text, sizing, and decoration traits.

CTA Button

Click target with label, link, decoration, and behavior traits. The block is labeled "CTA Button" in the live block library (not "Button").

Spacer

Empty vertical space for layout breathing room.

Divider

Horizontal divider for visual separation.

Div

Generic container block for custom layout structures. Useful when Section or Column do not provide the nesting shape needed.

Video

Embeds a video by URL. Supports common video hosting platforms.

Embed Map

Embeds a map (location embed) by URL or embed code.

Code

Renders a code or script snippet within the page layout. Use for custom code output in a contained block.

Typing Rotator

Animated text block that cycles through a list of phrases. Useful for hero headlines that rotate between taglines.

---

Composition pattern

A typical page composition pattern:

1. Page is a sequence of Sections.
2. Each Section may contain Column blocks (picked by column-count variant — no separate Grid block).
3. Each Column contains Headings, Text, Images, CTA Buttons.
4. Spacers and Dividers add breathing room.
5. Video, Embed Map, Code, and Typing Rotator drop in anywhere a media or specialty content block is needed.

---

Constraints and boundaries

Basic Blocks is a Reference area for the foundational block set.

Use this Reference for:

• Understanding the foundational block inventory.
• Confirming the composition pattern.

Do not use this Reference for:

• Per-component configuration detail — Components Reference.
• Per-step procedures — Guides.
• Per-release shipped change — What's New or Changelog.

Public boundary

This page is intentionally public-safe.

---

Examples

Example 1 — Operator builds a hero

Section → Column (1-column variant) → Heading + Text + CTA Button. Four Basic blocks compose a hero.

Example 2 — Operator builds a 3-feature row

Section → Column (3-column variant at desktop) → each column contains Heading + Text + Image. Five Basic blocks per column × 3 columns = 15-block composition for the section.

Example 3 — Operator separates two sections visually

Between two Sections, the operator drops a Divider or Spacer. The page reads with clear separation.

---

Documentation guidance

Use this page as the structural definition for the foundational block set. Per-component configuration detail lives in the Components Reference.

---

Reading order

Open this page when scoping foundational composition. Pair with sibling category References (Posts / Ecommerce / Extra) for specialty blocks.

---

Related reading

• Components — parent Reference.
• Posts Blocks — sibling category.
• Ecommerce Blocks — sibling category.
• Extra Blocks — sibling category.

---

Vocabulary cross-reference

• Section is the top-level layout container.
• Column is the column container — picked by variant from the block library. There is no separate Grid block; the column count is a property of the Column variant.
• Div is a generic container for custom nesting beyond what Section and Column provide.
• Text is the body-text block (labeled "Text" in the block library).
• CTA Button is the click-target block (labeled "CTA Button" in the block library).
• Leaf block is a non-container block (Heading, Text, Image, CTA Button, Spacer, Divider, Video, Embed Map, Code, Typing Rotator).
• Composition pattern is the typical Section → Column → leaf nesting.

---

Maintenance discipline

When Basic Blocks change across releases (new block, retired block, new container type), update this Reference and log the change in Changelog.

Related reading

Topic
Components
Posts Blocks
Ecommerce Blocks
Extra Blocks