Card grids and pricing tables in SG-Builder

In short. SG-Builder's card-composite family gives you 8 purpose-built components for structured, repeatable content: card grids, pricing tables, testimonial grids, accordions, tabs, icon lists, and sliders. Drop a composite into a Cell, fill in the items via the Traits panel, and the layout renders automatically. The one rule that catches everyone: item headings use the key title, not name — blank headings with no error message result if you use name. That's the core of it — read on for component-by-component detail.

On this page: Component quick-reference · Before you start · Steps · Examples · What to do if it does not work

How to add structured content blocks to any page in SGEN

The card-composite family is a set of purpose-built SG-Builder components for structured, repeatable content. Each composite manages its own internal layout: drop one component into a Cell, fill in the items via the Traits panel, and the grid, carousel, or accordion renders automatically. This guide covers every component in the family, explains which fits which job, and flags the traps that silently break output.

Use these components when your content is repeating and parallel — each item has the same structure as the one beside it:

• Card grids — features, team members, or services in a responsive grid
• Pricing tables — tiered plans with prices, feature lists, and CTAs
• Testimonials — customer quotes in a grid or sliding carousel
• Accordions — collapsible Q&A sections that keep pages scannable
• Tabs — parallel content panels without a page reload
• Icon lists — benefit bullets with a Lucide icon on each line
• Sliders — full-width image or content carousels for hero sections

For one-off bespoke layouts where items have different fields or proportions, compose individual heading, image, text, and CTA leaves inside a Cell instead.

What is this for?

The card-composite family handles the repeating, parallel blocks that most pages need: a row of feature cards, a tiered pricing table, a grid of customer quotes, a collapsible FAQ, a set of tabbed panels, a list of icon bullets, or a sliding carousel. Each component owns its own internal layout, so you fill in the items through the Traits panel and the grid, list, or carousel renders for you — no manual column math, no per-item styling. Use this guide to pick the right component for the job and to avoid the trait-key traps that silently produce blank headings or missing images.

Good use cases

• Pricing pages — a tiered plan table with prices, feature lists, and a CTA per tier, using the Pricing Cards component.
• Feature and benefit sections — a responsive grid of cards, or an Icon Lists block where each line pairs a Lucide icon with a short benefit.
• Social proof — a grid or sliding carousel of customer quotes with author name, role, rating, and portrait, via Testimonials.
• Support and FAQ pages — collapsible question-and-answer rows with the Accordion component to keep long pages scannable.
• Comparisons and grouped content — parallel panels behind a tab bar using Tabs, with no page reload between panels.
• Hero sections — a full-width image or content carousel using the Slider component.

Reach for these whenever your content is repeating and parallel — each item shares the same structure as the one beside it.

What NOT to use this for

• Composing a single bespoke card with custom proportions — the card composites are opinionated.

If you need a card with a different image-to-text ratio, a full-bleed background, or columns of content inside the card, compose it yourself using individual Cell > Heading + Image + Text + CTA leaves. The composites do not support arbitrary inner layouts.

• Applying additional_css through the component trait panel — none of the card composite components expose an additional_css trait.

Typing extra CSS into the traits panel has no effect. All custom CSS must go through the Style Manager (for component-level spacing, background, and border), or through Appearance → Custom CSS (for descendant selectors targeting inner elements like .icon, .title, or .sgb-component-card).

• Pricing tier highlight via a featured flag — there is no featured: true property on individual pricing card items.

The only way to visually distinguish a tier is via a CssValue rule targeting :nth-child(N) on the component, or by placing a single Pricing Card component in a manually-composed 3-cell row where the center cell has its own border or background.

• Tabs with per-item icons through the trait panel — the Tabs component has no icon trait per item.

If your design shows an icon alongside each tab label, embed the icon HTML directly inside the tab title field.

• Using the accordion for navigation menus — the accordion is a content-disclosure pattern, not a nav pattern.

For navigation, use the Menu Builder under Appearance → Menu Builder.

How this connects to other features

• Structure and Layout — all composites are Level-5 leaf components.

Every composite must sit inside a Cell. The Cell's width determines the composite's width. If a pricing table is too narrow, widen the Row's Cell, not the component itself.

• Appearance → Custom CSS — the primary place for descendant-selector overrides that target inner elements (.iconlists-item .icon, .sgb-component-card:nth-child(2), .sg-accordion-item).

Scope entries to body.page_id-N /* replace N with actual page ID */ to keep overrides page-specific and prevent leak to other pages.

• Appearance → Themes / Style Manager — component-level background color, padding, margin, and border-radius live here.

Set these before reaching for Custom CSS — the Style Manager keeps overrides scoped to the component instance.

• Media Library — every card, pricing card, testimonial, and slider item that includes an image pulls from the Media Library.

Upload the image first, then paste the full URL into the component's image field. The image trait key (not src) is correct — using src renders the blue no-image placeholder on your live page.

Before you start

• Open or create the page where you want to add the content block and click Edit with SG-Builder to enter the visual editor.
• If you are adding images to cards, testimonials, or sliders: upload the images to the Media Library first and copy each URL before starting.

Stopping mid-build to upload images causes placeholder images that are easy to forget to replace.

• Decide whether you need a grid (static rows of equal-height cards) or a carousel (sliding, one or a few items visible at once).

The config.layout trait controls this — switching from grid to carousel after you have populated 6 items works, but the items_per_slide default of 1 will need adjusting.

• For accordion or tabs, write out your full item list (titles + body content) before building.

The repeater is faster to fill in one session than to re-open and edit piecemeal.

• For pricing tables, decide which tier to visually highlight before you publish.

The :nth-child(N) CssValue rule targets position (1st, 2nd, 3rd), not item name, so reordering tiers after styling requires updating the rule number.

Where to go

1. In the SG-Builder canvas, click the + icon or drag a block from the Block panel.
2. Search for the component name (e.g., "Pricing Cards", "Testimonials", "Accordion").
3. Drop the component into a Cell inside your Section → Container → Row hierarchy.
4. Open the Traits panel on the right to configure items and layout options.

The components available in the SG-Builder block panel, grouped under Extra > Composites:

Component quick-reference

Item key reference — shared across composites:

Steps

1. Add the component to the canvas

Open the Blocks panel and locate the component by name under Extra > Composites. Drag it into a Cell in your Section structure. The component renders immediately with default placeholder content — placeholder headings read "Title" and body copy reads "Lorem ipsum." Both disappear once you fill the Traits panel in the next step.

2. Open the Traits panel and set layout options

Click the component on the canvas to select it. The Traits panel appears on the right. For grid-based composites (Pricing Cards, Testimonials), set config.items_per_row to the number of columns you want. For carousel mode, change config.layout to carousel and set config.items_per_slide. Set config.equal_height: true for pricing tables — this forces all cards to the height of the tallest tier so the CTAs sit on the same horizontal line across all columns.

The Traits panel for a Pricing Cards component — Your Store subscription page, 3-column layout:

3. Edit each item's content

In the Traits panel, locate the cards or items repeater. Click any item to expand its fields. Fill in title, content, and image (full Media Library URL). For pricing components, also fill regular_price, feature_lists, and ctas.

Key naming rules — easy to get wrong:

• Card and pricing item headings use the key title, not name.

Using name produces blank headings with no error message in the canvas or on publish.

• Icon list items use the key icon with a Lucide icon name (e.g., check, x, star, phone).

Do not enter a FontAwesome CSS class string like fa fa-check — that format applies to a different icon library and will not render in Icon Lists.

• Testimonial item images use image with a full Media Library URL.

Relative paths and bare filenames do not resolve.

• For accordion items, set is_open: 1 on exactly one item.

Setting it on multiple items collapses all but the first in document order — no error is shown.

4. Style via the Style Manager

After filling content, select the component and open the Style Manager (Decorations tab). Set padding, background color, and border-radius at the component level here. For inner-element overrides (icon color, card border on hover, highlighted pricing tier), use the CssValue field in Style Manager — not the trait panel's additional_css field, which composites do not expose.

To highlight a specific pricing tier — place this in the CssValue field on the Pricing Cards component:

.sg-pricing-card-items .sgb-component-pricing-card:nth-child(2) { border: 2px solid #d51522; background: #fff8f8; border-radius: 8px;
}

To force 3-column grid layout when the default flex math wraps at non-standard gaps:

body .sg-card-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}

To style accordion items — use SGEN's prefixed class names, not Bootstrap equivalents:

body.page_id-N /* replace N with actual page ID */ .sg-accordion-button { font-weight: 600; color: #111827;
}
body.page_id-N /* replace N with actual page ID */ .sg-accordion-collapse { font-size: 14px; line-height: 1.7; color: #374151;
}

5. Publish and verify on the public page

Click Publish (top-right of SG-Builder). Open the public page in a new browser tab and confirm the cards, pricing tiers, testimonials, or accordion items appear with the correct content and layout. Hard-reload (Ctrl+Shift+R) to clear any cached version of the page. If the layout looks correct in the canvas but broken on the public page, check whether a Custom Code entry (Appearance → Custom Codes) is injecting conflicting global CSS — unscoped rules in Custom Codes can override composite styles site-wide.

The save confirmation after publishing Your Store's 3-tier pricing section:

Examples

Example 1: Build a 3-tier pricing section. Your Store is adding a subscription pricing page with Starter, Standard, and Premium plans. Drop a Pricing Cards component into a full-width Cell, set config.items_per_row to 3, and populate each tier's title, price, feature list, and CTA. To visually highlight the middle "Standard" tier, target it with the CssValue :nth-child(2) rule shown in Step 4. The middle tier gets a red border (#d51522) and a faint red tint (#fff8f8) on its background, plus a "Most Popular" label positioned absolutely above the card.

The three tiers as they appear on the Your Store public page after publish:

Example 2: Embed 6 testimonials in a grid. Your Store has 6 customer quotes to add to their landing page below the hero section. Drop a Testimonials component into a Cell, set config.items_per_row to 3 (2 rows × 3 columns), and enter each item's title (author name), subtitle (role), content (quote text), and star rating. All six portrait images are uploaded to the Media Library in advance and referenced by full URL in the image field. For a full-width sliding single-quote format, switch to config.layout: carousel and config.items_per_slide: 1 instead.

The 6-testimonial grid configuration for the Your Store landing page — first three items shown:

Example 3: Create an FAQ accordion section. Your Store has 8 frequently asked questions for their support page. Drop an Accordion component into a container set to ~800 px wide — a narrower container improves readability for long answers. Set columns to 2 for a side-by-side layout. SG-Builder splits the items evenly: questions 1–4 appear in the left column, questions 5–8 in the right. Set is_open: 1 on the first item so the top question starts expanded on load without any visitor interaction. Double-click any item's content field to open the HTML editor and format answers with bullet lists using <ul><li> markup.

The Accordion Traits panel with four FAQ items populated — first item set to open by default:

What success looks like

• Card grid: cards appear in the correct number of columns with images, headings, and body text fully populated.

No placeholder "Lorem ipsum" text remains visible on the public page. Equal-height cards keep all CTA buttons on the same horizontal baseline.

• Pricing table: all tier names, prices, feature lists with icons, and CTA buttons render correctly.

The highlighted middle tier shows its border and background tint. The "Most Popular" label positions correctly above the card without overlapping adjacent tiers.

• Testimonials: author names and roles display below each quote.

Star ratings show the correct number of filled stars — a rating of 4 shows four solid stars and one empty star. Portrait images appear circular when border-radius: 50% is set via the Style Manager.

• Accordion: clicking a question row expands the answer; the previously open row collapses (single-open behavior).

The first item, if set with is_open: 1, starts expanded on load without any click required. Two-column layout shows left-column questions 1–4 and right-column questions 5–8 side by side.

• Tabs: clicking a tab label shows that tab's content panel; other panels hide with no page reload.

The default_tab_open tab is active and its panel visible on initial load.

• Icon list: each bullet row shows the Lucide icon on the left and the copy text on the right.

Icons match the Lucide name specified in the icon field exactly — a misspelled name renders an empty space with no error.

• Slider: slides advance on click (arrows) or automatically at the configured interval (if autoplay is on).

Navigation arrows and pagination dots render using Swiper's .swiper-button-next, .swiper-button-prev, and .swiper-pagination selectors.

Here is what a published icon list looks like on the Your Store features section — four benefit bullets with check icons:

What to do if it does not work

• Card headings are blank — you used name instead of title in the item schema.

Open the Traits panel, locate the item, and confirm the field label reads "Title" (not "Name"). There is no error message — the heading renders empty on both the canvas and the public page.

• Images show a blue no-image placeholder — the image field is set to src instead of image.

In the Traits panel, the field is labeled "Image" and expects a full URL from the Media Library. Change the key and republish.

• Third card wraps to a new row — the built-in flex math breaks at non-standard gap values.

Add the display: grid; grid-template-columns: repeat(3, 1fr) override via Style Manager CssValue (see Step 4).

• Accordion items are all collapsed even after setting is_open: 1 — you have set is_open: 1 on more than one item.

The accordion is single-open; only the first flagged item in document order takes effect. Remove the flag from all but one item.

• Accordion CSS selectors are not working — the accordion uses SGEN-prefixed classes: sg-accordion, sg-accordion-item, sg-accordion-button, sg-accordion-collapse, with data-sg-toggle and data-sg-parent attributes.

Bootstrap class names (accordion, accordion-item, data-bs-toggle) do not match — update your selectors to the SGEN-prefixed versions.

• Tab CSS selectors are not working — tabs use sg-nav, sg-nav-pills, sg-nav-link, sg-tab-pane, data-sg-toggle, and data-sg-target.

Bootstrap tab names (nav-pills, data-bs-toggle, data-bs-target) do not match.

• Slider arrows or dots are not visible — the slider uses the Swiper library, not Owl Carousel.

CSS targeting .owl-carousel, .owl-nav, or .owl-dot has no effect. Use .swiper-button-next, .swiper-button-prev, and .swiper-pagination instead.

• Custom CSS applied through the traits panel has no effect — card composites do not expose an additional_css trait.

All custom CSS must go through the Style Manager CssValue field or Appearance → Custom CSS.

• Pricing tier highlight disappears after reordering tiers — the :nth-child(N) selector targets position, not item name.

After reordering, update the N value in your CssValue rule to match the new position of the highlighted tier.

Related reading

• Text, headings, and buttons in SG-Builder — the leaf components that pair with composites inside Cells.
• Site structure and layout in SG-Builder — set up the Section > Container > Row > Cell hierarchy before placing any composite component.
• Upload and manage media — upload card and testimonial images to the Media Library and note their full URLs before building.