Components

The SG-Builder component model — block model, trait system, composition.

Components in SG-Builder are the first-party building blocks operators compose into pages. The component set is platform-managed (no plugin marketplace) and groups into four categories — Basic, Posts, Ecommerce, Extra. This page is the Reference definition of the component model.

What is this for?

Read this page when you want the structural definition of the SG-Builder component model — what counts as a component, the trait system that configures them, and how components compose into a page.

Good use cases

• You are scoping page composition for a site and need the component inventory.
• You are explaining to a stakeholder how SG-Builder handles building blocks.
• You hit a "what blocks can I use?" question and want the model laid out.

What NOT to use this for

• Step-by-step procedures — open the relevant Guide.
• Per-component capability detail — open the corresponding category Reference.
• Per-release shipped component additions — open What's New or Changelog.

How this connects to other features

• SG-Builder Overview — parent surface.
• Basic Blocks — sub-Reference for the Basic category.
• Posts Blocks — sub-Reference for the Posts category.
• Ecommerce Blocks — sub-Reference for the Ecommerce category.
• Extra Blocks — sub-Reference for the Extra category.

Definition

A component in SG-Builder is a reusable visual unit operators drag onto the canvas and configure via traits. Components are first-party — the platform team ships them as part of the platform, not as plugins. The component set groups into four categories that map to common authoring scenarios.

The defining property is first-party. There is no plugin marketplace; the component set is governed by the platform's release cadence.

Where to find it

Open SG-Builder on any page or post. The component library panel on the left side of the workspace lists all four categories. Drag any block onto the canvas to begin composing.

The four categories

Basic

Foundational layout and content blocks — sections, grids, columns, headings, paragraphs, images, buttons. The Basic Blocks sub-Reference covers this.

Posts

Blocks that surface or interact with post-shaped content — recent posts, featured post, post grid, post detail templates. The Posts Blocks sub-Reference covers this.

Ecommerce

Blocks for store-related composition — product grid, product card, add-to-cart, checkout-related blocks. The Ecommerce Blocks sub-Reference covers this.

Extra

Specialty blocks beyond the foundational set — embeds, advanced layout patterns, interactive widgets. The Extra Blocks sub-Reference covers this.

The trait system

Every component carries traits that configure its behavior.

Layout traits

Position, size, alignment, padding, margin.

Decoration traits

Background color, border, shadow, opacity, decorative styling.

Content traits

Text, image source, link target, label, structural fields per component type.

Behavior traits

Click handlers, animation, conditional visibility, interactive state.

Responsive overrides

Per-breakpoint trait values that override the cascade default (per Responsive Preview Reference).

Composition model

Components compose into pages by nesting. Sections contain rows; rows contain columns; columns contain content blocks. The Layer Manager Reference covers the tree-view navigation of the resulting hierarchy.

Examples

Example 1 — Operator scopes blocks for a landing page

The operator opens this Reference, identifies that a landing page needs Basic blocks (hero, sections, columns, CTA buttons) and possibly Extra blocks (FAQ accordion, embeds). They open the relevant category sub-Reference for per-block detail.

Example 2 — Stakeholder asks "can we add a custom component?"

The platform lead opens this page (Definition section), explains that the component set is first-party — there is no plugin marketplace. Custom needs land as feature requests against the platform's release cadence.

Example 3 — Operator configures a hero with traits

The operator drags Hero from the block library, configures layout (full-width), decoration (background color), content (heading + subhead + button), behavior (button click target). The trait system handles all four configuration dimensions.

Related reading

• SG-Builder Overview — parent surface.
• Basic Blocks — Basic category.
• Posts Blocks — Posts category.
• Ecommerce Blocks — Ecommerce category.
• Extra Blocks — Extra category.

Vocabulary cross-reference

• Component is a reusable visual unit operators drag onto the canvas.
• Block is interchangeable with component in operator vocabulary.
• Trait is a configurable property on a component (layout / decoration / content / behavior / responsive override).
• Category is one of Basic / Posts / Ecommerce / Extra.
• Composition is the act of nesting components into a page hierarchy.

Related reading