SG-Builder component catalog
SG-Builder ships 48 first-party components organized into four groups: Basic, Extra, Posts, and Ecommerce. This page is your single reference point — every component in one place, grouped by what it does, with a one-line purpose and a link to the deep-dive doc for each group.
Use this catalog to pick the right component before you build. When you know the group you need, follow the link to that group's dedicated reference page for full trait tables and usage notes.
How to use the catalog
Every page in SG-Builder is built from components. Components are the draggable blocks in the palette on the left side of the editor. This catalog maps your intent to the right component so you reach for the correct one first — without trial and error.
Purpose
This catalog gives you a flat inventory of all 48 SG-Builder components with enough context to make a confident choice. It does not replace the individual group reference pages — those carry the full trait tables, edge-case notes, and scripting API. Use this catalog to find the component, then follow the link to learn how to configure it.
Good use cases
- You are starting a new page and want to know which component handles a particular piece of content.
- You are scripting a page programmatically and need to confirm a component exists before writing code.
- You are onboarding a new team member and want a single-page orientation to everything SG-Builder provides.
- You are checking whether a composite (hero, pricing table, testimonials) is available as a native component before building one manually.
What NOT to use this for
Do not use this catalog as the authoritative trait reference — it intentionally omits detailed trait tables to stay readable. Do not use it to verify attribute key names for programmatic builds. For those, go to the group reference page (linked per category below) or to the catalog.md skill source. Do not treat the component count (48) as inclusive of layout primitives — the container, row, and cell types are GrapesJS-native and do not appear in the component palette; they are covered in the Components overview.
How this connects to other features
Every component slots into the five-level canonical hierarchy: section → container → row → cell → component. Choosing the wrong component for a job (for example, reaching for sgb-component-code when sgb-component-accordion already handles collapsible FAQ sections) produces pages that are harder to maintain and do not inherit responsive behaviour. The decision table in the Components overview maps common user intentions to the right component pick. This catalog is the exhaustive inventory that backs that decision table.
Before you start
Before picking a component, confirm two things:
- You are inside an active SG-Builder session at
/sg-admin/pages/edit/:id?action=sgbuilder. - The editor handle is available:
window.grapesjs.editors[0]should return the editor object, notundefined. If it isundefined, you are not on a builder page.
Where to find it
Open any page in SG-Builder. The component palette appears in the left panel under the Blocks tab. Components are grouped in the palette the same way they are grouped here: Basic, Extra, Posts, Ecommerce. The Templates Library (hamburger icon, top-left) gives access to 52 pre-built template blocks that are composed of these same 48 primitives.
Steps
Use this workflow when you want to place a component on a page:
1. Identify your intent
Read your design brief or wireframe. Describe what you need in plain words — "a row of feature cards", "a collapsible FAQ", "a hero with a heading and two buttons". Then match that description to a category in this catalog.
2. Find the component
Scan the category that fits your intent (Layout, Content, Media, Composite, Posts, Ecommerce). Read the one-line purpose for each entry. If two components look similar, the "What NOT to use this for" note in the group reference page will resolve the tie.
3. Place and configure
Drag the component from the palette onto the canvas. Open the Traits panel on the right to configure it — every configurable attribute appears there. For programmatic builds, use component.setAttributes({... }) with the attribute keys listed in the group reference page.
4. Verify in the Layer Manager
After placing the component, open the Layers tab (left panel). The layer label should match the canonical palette name — "Section", "Heading", "Cards", and so on. If you see a label like "Sgb-component-cards", a name field is missing. Correct it before saving.
What success looks like
You know you chose the right component when:
- The canvas renders the expected element without placeholder text ("Add Your Heading Text Here", "CALL TO ACTION", or "Lorem ipsum").
- The Layer Manager shows a clean
Section / Container / Row / Column / [Component]hierarchy with canonical labels. - The Traits panel shows configuration options relevant to your content type.
- The published page is responsive — content stacks on mobile without custom CSS.
What to do if it does not work
If the component does not appear in the palette, verify that the relevant module is enabled (ECOMMERCE components require the Ecommerce module). If dragging onto the canvas does nothing, confirm you are dropping onto a cell — components are not droppable directly onto container or row nodes. If the layer label reads Sgb-component-* instead of the canonical name, the name field was not set on append; re-append with the correct name using labelForType(). See Layer Manager for the full troubleshooting guide.
Layout components — Basic group (partial)
Layout components define the structural skeleton of every page. They do not render visible content on their own — they control spacing, column count, and responsive collapse.
| Component | Palette label | Purpose |
|---|---|---|
sgb-component-section | Section | Full-bleed background band. Every page section starts here. Drop a Container inside it. |
sgb-component-div | Div | Generic inline wrapper div. Rarely needed — a cell already fills this role for most layouts. |
sgb-component-column | 1 Column | Palette preset that drops a full row > cell (100%) structure in one drag. |
sgb-component-column-2 | 2 Columns | Preset: row > cell (50%) + cell (50%). Stacks to 100% on tablet. |
sgb-component-column-3 | 3 Columns | Preset: row > 3× cell (33.33%). Stacks to 100% on tablet. |
sgb-component-column-2--3-7 | 2 Columns (3/7) | Preset: row > cell (30%) + cell (70%). Stacks on tablet. Good for image-plus-text splits. |
Content components — Basic group
Content components render the visible text, images, video, buttons, and embedded maps that fill the layout skeleton.
| Component | Palette label | Purpose |
|---|---|---|
sgb-component-heading | Heading | H1–H6 heading tag. Visible text goes in attributes.name; tag level set via heading_tag. |
sgb-component-text | Text | Paragraph or rich HTML block. Content goes in attributes.content. Double-click opens HTML modal. |
sgb-component-image | Image | Single image with optional link wrap. Stores a full URL from the media picker. |
sgb-component-video | Video | Embedded video (YouTube, Vimeo, direct URL) with autoplay, loop, and controls options. |
sgb-component-map | Embed Map | Google Maps embed. Configure location string and zoom level via traits. |
sgb-component-cta | CTA Button | Styled call-to-action button. Label goes in attributes.text; nine built-in button styles. |
sgb-component-code | Code | Raw HTML/JS escape hatch. Use only when no other component fits — 95% of cases have a dedicated component. |
sgb-component-typing-rotator | Typing Rotator | Animated heading that cycles through a list of words with configurable typing and delete speeds. |
Composite components — Extra group
Composite components bundle multiple content elements into one draggable block. They handle their own internal layout, responsive behaviour, and styling via the Traits panel — no manual composition needed.
| Component | Palette label | Purpose |
|---|---|---|
sgb-component-card | Card | Single opinionated card with two built-in styles. Image, title, subtitle, body, and up to two CTAs. |
sgb-component-cards | Cards | Repeating card grid. The primary block for feature lists and service overviews. Three card styles, grid and masonry layouts. |
sgb-component-pricing-card | Pricing Card | Single pricing tier. Title, price, feature list, and CTA buttons. |
sgb-component-pricing-cards | Pricing Cards | Repeating pricing-tier grid. Three tiers by default; full pricing-card fields per item. |
sgb-component-accordion | Accordion | Collapsible FAQ or content sections. Each item has a title and HTML body. The correct choice for any expandable Q&A. |
sgb-component-tabs | Tabs | Tabbed content panels. Horizontal or vertical orientation, tabs or pills nav style. |
sgb-component-testimonials | Testimonials | Customer quote carousel. Author, content, image, and star rating per item. Four display styles. |
sgb-component-slider | Slider | Image/content carousel with configurable autoplay, speed, arrows, and pagination. |
sgb-component-gallery | Gallery | Photo grid or lightbox gallery. Configure columns and layout via the gallery-config trait. |
sgb-component-tmp-contact-row | Contact Row | Pre-styled full-bleed contact section with CTA links and info items. Use standalone — drops as its own |
Icon and list components — Extra group
| Component | Palette label | Purpose |
|---|---|---|
sgb-component-icon | Icon | Single icon from the Lucide or FontAwesome library, with an optional link. |
sgb-component-icons | Icons | Row of icon links — social-media strip or icon list. Four shape styles: default, box, round, circle. |
sgb-component-iconlists | Icon Text Lists | Icon-plus-text bullet list. Block or inline layout. The right pick for feature-highlight bullet lists. |
Navigation and site chrome — Extra group
| Component | Palette label | Purpose |
|---|---|---|
sgb-component-navigation | Navigation | Site header menu. Pulls menus from SGEN Menu Builder. Header use only — do not use for footer columns. |
sgb-component-site-logo | Site Logo | Renders the site logo from site settings, with an optional HTML override. Wraps in a home-page link by default. |
sgb-component-form | Form | Embeds a Form record from /sg-admin/forms. Create the form first, then reference it by ID. Supports AJAX submit and popup mode. |
sgb-component-widget | Widget | Site-wide widget slot. Five types: header info, header CTAs, footer info, widgets, copyright. |
Posts components — Posts group
Posts components render dynamic content from SGEN's post system. They work on blog templates and custom post-type pages where a post context is active.
| Component | Palette label | Purpose |
|---|---|---|
sgb-component-post-title | Post Title | Renders the current post's title as a heading. Tag level and optional link configurable. |
sgb-component-post-content | Post Content | Outputs the current post's full HTML body. No traits — content comes entirely from the post record. |
sgb-component-post-featured-image | Featured Image | Renders the post's featured image with an optional link. |
sgb-component-post-navigation | Post Navigation | Previous / Next post links with configurable icon and label text. |
sgb-component-posts-archive | Posts Archive | Listing of posts with filter, sort, pagination, and category options. Use on archive or listing pages. |
sgb-component-posts-related-items | Related Items | Related-posts block. Same configuration as Posts Archive, plus grouping by category. |
Ecommerce components — Ecommerce group
Ecommerce components require the ECOMMERCE module to be enabled on the site. Most require a product_id — select the product from the Traits panel. Place these components on product detail page templates.
| Component | Palette label | Purpose |
|---|---|---|
ecommerce-product-title | Product Title | Renders the selected product's name as a heading, with configurable tag level and optional link. |
ecommerce-product-price | Product Price | Outputs the product's price, including sale price formatting. |
ecommerce-product-description | Product Description | Renders the product's full description body. |
ecommerce-product-gallery | Product Gallery | Image gallery for the product's media library. |
ecommerce-product-add-to-cart | Add to Cart | Add-to-cart button and quantity selector for the selected product. |
ecommerce-product-badges | Product Badges | Displays configurable sale, new, and category badge labels for the product. |
ecommerce-product-card | Product Card | Single product card with four style options. Use on listing pages alongside the Products Archive. |
ecommerce-products | Products Archive | Filterable, sortable product grid with configurable card style, items-per-row, and limit. |
ecommerce-related-products | Related Products | Related-products block. Same configuration as Products Archive. |
ecommerce-cart-button | Cart Button | Cart icon/button with configurable style, icon, item count, and four open modes (redirect, dropdown, popup, drawer). |
ecommerce-mini-cart | Mini Cart | Inline mini-cart with configurable thumbnail, remove, subtotal, and checkout button visibility. |
Component count summary
| Group | Count | Palette tab |
|---|---|---|
| Basic | 14 | Basic |
| Extra | 17 | Extra |
| Posts | 6 | Posts |
| Ecommerce | 11 | Ecommerce |
| Total | 48 |
container, row, cell) are GrapesJS-native types that do not appear in the palette. They are covered in the Components overview and the Basic Blocks reference.Deep-dive reference pages
Each group has a dedicated reference page with full trait tables, attribute key names, default values, and scripting examples:
- Basic Blocks — 14 components: layout presets, heading, text, image, video, map, CTA button, code block, typing rotator
- Extra Blocks — 17 components: site logo, navigation, form, widget, card, cards, pricing card, pricing cards, gallery, accordion, tabs, testimonials, icons, icon, icon text lists, slider, contact row
- Posts Blocks — 6 components: post title, post content, featured image, post navigation, posts archive, related items
- Ecommerce Blocks — 11 components: product title, price, description, gallery, add to cart, badges, product card, products archive, related products, cart button, mini cart
Troubleshooting
What to do if it does not work
Component does not appear in the palette. Check that the relevant module is active. Ecommerce components only show when the ECOMMERCE module is enabled in site settings. Refresh the builder page after enabling a module.
Drag and drop does nothing. Confirm the target drop zone is a cell node — components are not droppable directly onto section, container, or row nodes. The Layer Manager highlights valid drop targets in blue as you drag.
Layer Manager shows "Sgb-component-cards" or similar. The name field was not set on the appended component. For programmatic appends, always include name: labelForType('sgb-component-cards') on the component object. For drag-and-drop placements, the builder sets this automatically — if it did not, delete and re-drag.
Placeholder text remains on the canvas. The visible-text attribute was not set. For sgb-component-heading, set attributes.name. For sgb-component-cta, set attributes.text. For sgb-component-text, set attributes.content. Re-read the Components overview §visible-text fields for the full attribute-key map.
Ecommerce component shows no product data. Confirm a valid product_id is selected in the Traits panel. If the product picker is empty, the ECOMMERCE module may not have fully initialized — save and reload the builder page.
See also
- SG-Builder overview — how the builder fits into the SGEN CMS and when to use it
- Builder workspace — panel layout, toolbar, device switcher, and save workflow
- Layer Manager — reading and navigating the component tree
- Responsive preview — previewing pages across the six breakpoints
- Templates Library — 52 pre-built template blocks and full-page presets composed from these 48 primitives
- Components overview — the component model, trait system, and five-level layout hierarchy