SG-Builder component catalog
⏱ ~2 min read · catalog reference — scan a group, follow the link for full trait tables.
In short. SG-Builder ships 48 first-party components in four groups: Basic (14), Extra (17), Posts (6), and Ecommerce (11). Find your component in the tables below, then follow the group link for full trait tables, attribute keys, and scripting API. Layout primitives (container,row,cell) are GrapesJS-native and do not appear in the palette — see Components overview.
On this page: Layout · Content · Composite · Icons & lists · Nav & chrome · Posts · Ecommerce · Troubleshooting
SG-Builder components are the draggable blocks in the Blocks tab of the editor's left panel. Scan this catalog to find the right component for your intent, then follow the group's deep-dive link for full configuration details.
How to place a component: Open a page in SG-Builder → find the component below → drag it from the Blocks tab onto a cell on the canvas → configure via the Traits panel. After placing, verify the Layer Manager shows a clean Section / Container / Row / Column / [Component] hierarchy before saving. Full workflow: Builder workspace.
Ecommerce components require the ECOMMERCE module to be enabled on the site before they appear in the palette.
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. |
Deep-dive reference: Basic Blocks
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. |
Deep-dive reference: Basic Blocks
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 <section>. |
Deep-dive reference: Extra Blocks
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. |
Deep-dive reference: Extra Blocks
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. |
Deep-dive reference: Extra Blocks
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. |
Deep-dive reference: Posts Blocks
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. |
Deep-dive reference: Ecommerce Blocks
Component count summary
| Group | Count | Palette tab |
|---|---|---|
| Basic | 14 | Basic |
| Extra | 17 | Extra |
| Posts | 6 | Posts |
| Ecommerce | 11 | Ecommerce |
| Total | 48 |
Layout primitives (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