> For the complete documentation index, see [llms.txt](https://docs.in8sync.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.in8sync.com/client-admin-guide/getting-started/content-components.md).

# Content Components

Headings, text, cards, heroes, stats, charts, and logos. The presentation layer for any page.

Content components are the presentation layer of every page — headings, body text, cards, heroes, stats, charts, and logos. They pair naturally with layout components to give a page its visible shape.

Most content blocks live across module types (Page, Order Form, Catalog, Dashboard) — check each component's details below for specifics.

## Components in this category

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Heading</strong></td><td>Page or section titles with sizes XS–XXXL and HTML levels H1–H6.</td><td><a href="#heading">#heading</a></td></tr><tr><td><strong>Text</strong></td><td>Body text and descriptions, two sizes, optional max-width.</td><td><a href="#text">#text</a></td></tr><tr><td><strong>Button</strong></td><td>Simple navigation button — link, open modal, close modal.</td><td><a href="#button">#button</a></td></tr><tr><td><strong>Hero</strong></td><td>Large landing-style section with title, description, image, and call-to-action buttons.</td><td><a href="#hero">#hero</a></td></tr><tr><td><strong>Card</strong></td><td>A simple labelled content block with title, description, and icon.</td><td><a href="#card">#card</a></td></tr><tr><td><strong>Card Link</strong></td><td>A clickable card — for quick-access tiles on dashboards.</td><td><a href="#card-link">#card-link</a></td></tr><tr><td><strong>Logos</strong></td><td>A horizontal row of logo images for brand bars or partner showcases.</td><td><a href="#logos">#logos</a></td></tr><tr><td><strong>Stats</strong></td><td>A row of label-value stat blocks for KPI strips.</td><td><a href="#stats">#stats</a></td></tr><tr><td><strong>Chart</strong></td><td>Bar, line, area, or pie chart driven by inline JSON.</td><td><a href="#chart">#chart</a></td></tr><tr><td><strong>Carousel</strong></td><td>Rotating image carousel with optional captions, navigation, and auto-play.</td><td><a href="#carousel">#carousel</a></td></tr><tr><td><strong>Image</strong></td><td>A single image block with sizing, aspect ratio, and optional caption.</td><td><a href="#image">#image</a></td></tr><tr><td><strong>Section Card</strong></td><td>A card container for grouping related content with a title, optional description, and background styling.</td><td><a href="#section-card">#section-card</a></td></tr></tbody></table>

## When you'd reach for this category

* **Page or section title** → Heading.
* **Paragraph or supporting copy** → Text.
* **Simple navigation or modal trigger** → Button.
* **Big landing-page banner** → Hero.
* **Grouped, labelled content** → Card or Card Link (clickable).
* **Content grouping or sectioning** → Section Card.
* **Logo bars and partner showcases** → Logos.
* **KPI strip on a dashboard** → Stats.
* **Visual data in a chart** → Chart.
* **Image carousel or slideshow** → Carousel.
* **Standalone image or product photo** → Image.

For tabular data, see **Report Widget** in [Report Components](/client-admin-guide/getting-started/report-components.md). For interactive forms and entity lookup, see [Entity Components](/client-admin-guide/getting-started/entity-components.md).

## Heading <a href="#heading" id="heading"></a>

Renders text as a heading. Choose a visual size (XS through XXXL), an HTML level (H1–H6) for semantics, and an alignment.

The visual size is independent of the HTML level — you can use a small visual heading at H2 for semantic depth without making it look huge.

### Available in

* Page modules
* Order Form modules
* Catalog modules
* Dashboard modules
* Public Page modules

Heading isn't available in Modal, Reports, or Navigation modules.

### When to use

* Every page should have a single H1 — typically a Heading at the top.
* Section dividers (H2 / H3) inside a page.
* Card titles where the Card block's built-in title isn't flexible enough.

### Settings

| Setting   | Description                                                                                                                    |
| --------- | ------------------------------------------------------------------------------------------------------------------------------ |
| **Text**  | The heading content. Multi-line.                                                                                               |
| **Size**  | Visual size: XXXL, XXL, XL, L, M, S, XS. Default: M.                                                                           |
| **Level** | HTML semantic level: H1–H6, or none (renders as a div). Pick H1 for the page's main heading, H2 for major sections, and so on. |
| **Align** | Left, Center, Right. Default: Left.                                                                                            |

### How it works

The HTML output uses the configured Level (e.g. `<h1>` for level 1). The Size setting controls the font size via CSS, independent of the level — so a level 2 heading can be as small or large as you want visually.

The Align setting controls text alignment within the block.

{% hint style="info" %}
Use level **H1 once per page** for the page title, then H2 for major sections, H3 below those. Consistent levels improve accessibility (screen readers use them) and SEO.
{% endhint %}

### Examples

**Page title.** Heading with text *Sales Reports*, size XXL, level H1, alignment Left.

**Section divider.** Heading with text *Today's Activity*, size L, level H2.

**Card title alternative.** Inside a Column, a Heading with size M, level H3, alignment Center, used as a section header above a Stats grid.

## Text <a href="#text" id="text"></a>

Plain body text. Use it for descriptions, instructions, supporting copy, or anywhere you need a paragraph rather than a heading.

### Available in

* Page modules
* Order Form modules
* Dashboard modules
* Public Page modules

Text isn't available in Catalog, Modal, Reports, or Navigation modules.

### When to use

* Description below a heading.
* Instructions inside a form ("Add items to the order using the catalog or barcode scanner").
* Welcome messages, status notes, or anything that's prose rather than data.
* Footer text or fine-print on a page.

For headings, use **Heading**. For inline buttons that look like text, use **Button** with variant=link.

### Settings

| Setting       | Description                                                |
| ------------- | ---------------------------------------------------------- |
| **Text**      | The text content. Supports multi-line.                     |
| **Size**      | M (default body size, 20px) or S (smaller, 16px).          |
| **Align**     | Left, Center, Right. Default: Left.                        |
| **Color**     | Default (regular text) or Muted (lower-emphasis grey).     |
| **Max Width** | Optional CSS width constraint to keep long lines readable. |

### How it works

Text renders as a paragraph block with the configured size, alignment, and colour.

The **Muted** colour uses a grey from the theme palette (designed to be readable but lower-emphasis than headings or default text). Useful for captions, footnotes, and contextual notes.

{% hint style="info" %}
For long-form text, set a **Max Width** (e.g. `680px`). Lines that span the full page width are harder to read — narrower paragraphs improve scannability.
{% endhint %}

### Examples

**Welcome description.** Heading "Welcome back" + Text "Here's what's happened in your store today." Size M, Colour default.

**Form instructions.** A Text block above an Order Lines block, colour Muted: "Scan items or search by SKU below to add them to the order."

**Footer note.** Text at the bottom of a page, size S, colour Muted, alignment Center: "Need help? Contact your administrator."

## Button <a href="#button" id="button"></a>

A simple button that navigates to a URL or opens/closes a modal. Use it for straightforward actions that don't need confirmation, PIN gating, or custom JavaScript — for those, use **Action Button** instead.

The Open Modal and Close Modal dropdowns are auto-populated from the modals on the current page (and the workflow's other pages), so you don't need to type modal IDs by hand.

### Available in

* Page modules
* Order Form modules
* Catalog modules
* Dashboard modules
* Public Page modules

Button isn't available in Modal, Reports, or Navigation modules.

### When to use

* A "Read more" or "Learn more" button that navigates to another page.
* A "Browse Categories" button that opens a Modal with a Category Sidebar inside.
* A "Cancel" or "Done" button inside a modal that closes it.
* Simple visual elements where appearance matters more than complex behaviour.

For form submission, use **Submit Button**. For PIN-gated, conditional, or scripted actions, use **Action Button**.

### Settings

| Setting         | Description                                                                                                                |
| --------------- | -------------------------------------------------------------------------------------------------------------------------- |
| **Label**       | Button text. Default: *Button*.                                                                                            |
| **Href**        | URL to navigate to when clicked. Used as fallback if no modal is set.                                                      |
| **Variant**     | Visual style: Primary or Secondary. Default: Primary.                                                                      |
| **Modal**       | Dropdown of modals on the current page (and workflow). Picking one makes the button open that modal.                       |
| **Close Modal** | Dropdown of modals. Picking one makes the button close that modal — typically used inside a modal as a Cancel/Done button. |

### How it works

The button's click handler resolves in this priority:

1. If **Close Modal** is set → close that modal.
2. Otherwise, if **Modal** is set → open that modal.
3. Otherwise, navigate to **Href**.

In edit mode, clicks are disabled so you can configure freely without triggering navigation.

{% hint style="info" %}
The **Modal** and **Close Modal** dropdowns are populated dynamically — they list every Modal block on the current page plus modals from the workflow's other pages. You don't need to remember modal IDs.
{% endhint %}

### Examples

**Open a category picker.** Button labelled *Browse Categories*, Modal=`category-picker`. Clicking opens the modal where the user picks a category.

**Cancel button inside a modal.** Button labelled *Cancel*, Close Modal=`category-picker`. Clicking dismisses the modal.

**External link.** Button labelled *View documentation*, Href=`https://docs.example.com`, Variant=Secondary.

### Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Action Button</strong></td><td>For actions with PIN gating, custom JavaScript, or conditional visibility.</td><td><a href="/client-admin-guide/getting-started/action-components.md#action-button">Action Components</a></td></tr><tr><td><strong>Submit Button</strong></td><td>For Order Form submission.</td><td><a href="/client-admin-guide/getting-started/action-components.md#submit-button">Action Components</a></td></tr><tr><td><strong>Modal</strong></td><td>The block this button most commonly opens.</td><td><a href="/client-admin-guide/getting-started/layout-components.md#modal">Layout Components</a></td></tr></tbody></table>

## Hero <a href="#hero" id="hero"></a>

A big, prominent section for the top of a page. Includes a title, description, up to four call-to-action buttons, an optional image (inline or background), and configurable padding.

Use Hero to create visual impact on landing pages, welcome screens, and public-facing portals.

![Hero block with a large title, supporting description, two call-to-action buttons, and an inline image](https://229581143-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAG04Mxmhw6PLRAZBvhtK%2Fuploads%2Fgit-blob-b6303ca1c74ebbc41aec39f98b1453a8e8d0a87c%2Fpb-hero.png?alt=media)

### Available in

* Page modules
* Order Form modules
* Dashboard modules
* Public Page modules

Hero isn't available in Catalog, Modal, Reports, or Navigation modules.

### When to use

* A welcome banner at the top of a Dashboard.
* A landing-page hero on a public-facing portal (B2C, partner portal).
* A campaign or promotional banner with a clear call-to-action button.
* The first thing on a page when you want visual emphasis over information density.

For sectional headings within a page, use **Heading** (smaller, less visual weight).

### Settings

| Setting                | Description                                                                                                                                       |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Title**              | The hero's main heading text. Default: *Hero*.                                                                                                    |
| **Description**        | The supporting text below the title.                                                                                                              |
| **Align**              | Left or Center. Default: Left.                                                                                                                    |
| **Padding**            | Top and bottom padding. Default: 64px.                                                                                                            |
| **Image**              | Optional image with two settings: **URL** and **Mode** (Inline — image sits next to the text; Background — image fills the hero behind the text). |
| **Buttons**            | An array of 1–4 call-to-action buttons. Each has a **Label**, **Href**, and **Variant** (primary or secondary).                                   |
| **Quote** *(advanced)* | Optional pre-built quote that fills Title and Description automatically.                                                                          |

### How it works

Hero renders as a large, padded section with the configured title, description, and buttons.

When **Align=Center** the image field is hidden — centered heroes don't pair well with side images.

The **Quote** option is a built-in shortcut: pick a quote from the dropdown and it fills the Title and Description for you (read-only while a quote is selected).

{% hint style="info" %}
Hero can't be placed inside a Grid or Flex container — it's designed for full-width prominence and ignores cell-based layouts.
{% endhint %}

### Examples

**Dashboard welcome.** Hero with Title *Welcome back, {{user.firstName}}*, Description summary of today's stats, one button *Go to Reports*, padding 48px.

**Promotional banner.** Hero with a sale message, two buttons (*Shop now* primary, *Learn more* secondary), Image with mode=Background.

**Landing page.** Hero at the top of a public B2C catalog with brand title, marketing description, and a *Browse Catalog* button.

### Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Best Practices</strong></td><td>Heading hierarchy and accessibility tips.</td><td><a href="/client-admin-guide/getting-started/best-practices.md">Best Practices</a></td></tr></tbody></table>

## Card <a href="#card" id="card"></a>

A basic card with a title, description, and optional icon. Use it for grouped, labelled content — feature highlights, info blocks, or section descriptors.

For clickable cards that navigate, use **Card Link**. For data-driven summaries, use **Stats**.

### Available in

* Page modules
* Order Form modules
* Catalog modules
* Dashboard modules
* Public Page modules

Card isn't available in Modal, Reports, or Navigation modules.

### When to use

* Three-up feature row on a landing page (Card / Card / Card in a Row).
* Info blocks describing a workflow or feature.
* Section headers with supporting copy and a visual icon.
* Anywhere you want a contained, titled chunk of content.

For deeper, action-oriented cards, see Card Link or Stats.

### Settings

| Setting         | Description                                                                                          |
| --------------- | ---------------------------------------------------------------------------------------------------- |
| **Title**       | The card heading.                                                                                    |
| **Description** | The supporting text below the title.                                                                 |
| **Icon**        | An icon name (Lucide). Defaults to *Feather*. Pick from the dropdown.                                |
| **Mode**        | Visual style: *Flat* (no border or shadow) or *Card* (bordered/shadowed container). Default: *Flat*. |

### How it works

The card renders as a vertical block with the icon at the top, title below it, then description.

**Flat** mode is for embedded contexts where the card is part of a larger composition. **Card** mode adds a visible boundary — useful when cards are sitting on a plain background and need definition.

{% hint style="info" %}
Three Cards in a Row produces a clean three-up feature layout. For interactive variants (where each card navigates), reach for **Card Link** instead.
{% endhint %}

### Examples

**Feature row.** Row with three Columns, each containing a Card. Title + Description + Icon describing one feature each.

**Info block.** A single Card in mode *Card* describing a workflow's purpose at the top of a Dashboard.

**Section descriptor.** A Card with no icon, mode *Flat*, used as a section intro before a Report Widget.

## Card Link <a href="#card-link" id="card-link"></a>

A clickable card that navigates when clicked. Title, optional description, and a button label — the whole card is a link.

Use Card Link for dashboard quick-access tiles and any place where a tappable, titled tile is the right unit of UI.

![Card Link tile with title, description, and a hover-state button — used as a dashboard quick-access tile](https://229581143-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAG04Mxmhw6PLRAZBvhtK%2Fuploads%2Fgit-blob-957f1c56c0de4eda8786f0bfa5e186f9626458f9%2Fpb-card-link.png?alt=media)

### Available in

* Page modules
* Order Form modules
* Dashboard modules
* Public Page modules

Card Link isn't available in Catalog, Modal, Reports, or Navigation modules.

### When to use

* Dashboard quick-access tiles ("Place Order", "EOD Reports", "Customer Lookup").
* Workflow landing pages where the user picks one of several next actions.
* Any place where the entire card surface should be a navigation target.

For non-interactive descriptive cards, use **Card**. For action buttons (no card surrounding), use **Action Button**.

### Settings

| Setting          | Description                                                                   |
| ---------------- | ----------------------------------------------------------------------------- |
| **Link**         | The destination URL when the card is clicked. Default: `https://example.com`. |
| **Title**        | The card title.                                                               |
| **Description**  | Optional supporting text below the title.                                     |
| **Button Label** | Text shown on the in-card button. Default: *Open*.                            |

### How it works

The whole card is wrapped in an anchor tag pointing at **Link**. Clicking anywhere on the card navigates.

The card has a fixed width of 350px and shows a subtle hover shadow to indicate interactivity.

{% hint style="info" %}
Use Card Links inside a **Grid** with 3 or 4 columns for clean dashboard tile layouts. The 350px width lines up nicely with most grid configurations.
{% endhint %}

### Examples

**Dashboard launcher.** Grid with 4 columns, eight Card Links — *Place Order*, *Pay Invoice*, *Customers*, *Reports*, *EOD*, *Settings*, *Help*, *Profile*. Each links to its workflow page.

**Cashier landing.** Three Card Links across the top — *New Sale*, *Pay Invoice*, *EOD Close-out* — with descriptive subtitles.

### Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Action Button</strong></td><td>For action triggers without a card surface.</td><td><a href="/client-admin-guide/getting-started/action-components.md#action-button">Action Components</a></td></tr><tr><td><strong>Grid</strong></td><td>The most common parent for Card Link tile layouts.</td><td><a href="/client-admin-guide/getting-started/layout-components.md#grid">Layout Components</a></td></tr></tbody></table>

## Logos <a href="#logos" id="logos"></a>

A horizontal row of logo images. Configure a list of `{alt, imageUrl}` pairs and Logos renders them all in a uniform grid.

Use it for brand bars, "as seen in" sections, partner showcases, or any context that needs multiple logos displayed together.

### Available in

* Page modules
* Order Form modules
* Dashboard modules
* Public Page modules

Logos isn't available in Catalog, Modal, Reports, or Navigation modules.

### When to use

* A brand bar or "trusted by" row of partner logos on a public-facing portal.
* A payment-method indicator at checkout (Visa / Mastercard / AmEx).
* Showing accepted certifications, integrations, or supported platforms.

For a single logo with a link, use a Card Link with an icon. For complex branded sections, use Hero.

### Settings

| Setting   | Description                                                         |
| --------- | ------------------------------------------------------------------- |
| **Logos** | Array of logo entries. Each entry has an alt text and an image URL. |

Each logo entry has:

* **Alt** — alternative text for accessibility (read by screen readers).
* **Image URL** — the image source URL.

### How it works

Logos renders as a horizontal grid with each logo at a fixed height (64px). The images stretch to fit and maintain consistent visual height across different logo aspect ratios.

There's no maximum array size, but more than \~6 logos start to feel cluttered.

{% hint style="info" %}
Always provide meaningful **Alt** text — screen readers announce it, and it's the fallback if the image fails to load. *"Visa"* beats *"logo1"*.
{% endhint %}

### Examples

**Trust bar.** Logos with five entries — Visa, Mastercard, AmEx, PayPal, Apple Pay — placed at the bottom of a checkout page.

**Partner showcase.** Logos with the company's top integration partners on a marketing landing page.

## Stats <a href="#stats" id="stats"></a>

A horizontal arrangement of stat entries. Each entry is a simple `{title, description}` pair — title shown above as a label, description below as the value.

Use Stats for the classic KPI strip at the top of a dashboard or report — *Today's Sales: $12,400 / Transactions: 87 / Avg Order: $142*.

![Stats block as a four-tile KPI strip with label-value pairs across the top of a dashboard](https://229581143-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAG04Mxmhw6PLRAZBvhtK%2Fuploads%2Fgit-blob-aef4a55abea1afc0a8fb1948e1754219a10a1459%2Fpb-stats.png?alt=media)

### Available in

* Page modules
* Order Form modules
* Dashboard modules
* Public Page modules

Stats isn't available in Catalog, Modal, Reports, or Navigation modules.

### When to use

* KPI strips at the top of dashboards.
* Summary counters above a Report Widget.
* Quick at-a-glance numbers paired with labels.

For richer single-metric displays with trend indicators, prefix/suffix, or icons, you'd need a custom build — Stats is intentionally minimal.

### Settings

| Setting   | Description                                                      |
| --------- | ---------------------------------------------------------------- |
| **Items** | Array of stat entries. Each entry has a title and a description. |

Each item has:

* **Title** — the stat's label (shown above).
* **Description** — the stat's value (shown below).

### How it works

Stats renders the configured items as a row of label-value pairs. The container is constrained to a max width of 916px (so very wide layouts don't stretch the stats too thin).

The Description field accepts any text — numbers, currency strings, percentages, dates. It's not formatted automatically; format it the way you want it displayed.

{% hint style="info" %}
For stats that should update dynamically based on session data, use a **Report Widget** with a saved search instead. Stats is for static or pre-computed values.
{% endhint %}

### Examples

**Dashboard KPI strip.** Stats with four items: *Today's Sales / $12,400*, *Transactions / 87*, *Avg Order / $142*, *Items Sold / 312*.

**Report summary.** Stats above a Report Widget summarising the period: *Open Orders / 24*, *Awaiting Fulfilment / 11*, *On Hold / 3*.

### Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Report Widget</strong></td><td>For dynamic, query-driven data.</td><td><a href="/client-admin-guide/getting-started/report-components.md#report-widget">Report Components</a></td></tr></tbody></table>

## Chart <a href="#chart" id="chart"></a>

Renders a chart from inline JSON data. Pick a chart type (bar, line, area, pie), provide a JSON array of data, and a config that maps each data key to a label and colour. Chart handles the rendering with grid lines, legend, and tooltip out of the box.

Use it for any in-page visualisation — dashboards, reports, summaries.

![Chart block rendered as a bar chart with title, two data series, grid lines, and legend](https://229581143-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAG04Mxmhw6PLRAZBvhtK%2Fuploads%2Fgit-blob-10b30b9f2e630d751af89ad5c665e5eec5a922f8%2Fpb-chart.png?alt=media)

### Available in

* All module types

In practice Chart lives mostly in **Dashboard**, **Page**, and **Reports** modules.

### When to use

* Dashboard tiles showing trends over time (line, area).
* Bar charts comparing categories (sales by department, products by category).
* Pie charts for proportional breakdowns (payment method mix, status distribution).
* Anywhere you have a small structured dataset and want a quick visualisation.

For tabular data, use **Report Widget**. For single-value KPIs, use **Stats**.

### Settings

| Setting         | Description                                                                                      |
| --------------- | ------------------------------------------------------------------------------------------------ |
| **Title**       | Chart heading shown above the chart.                                                             |
| **Description** | Optional supporting text below the title.                                                        |
| **Chart Type**  | Bar, Line, Area, or Pie. Default: Bar.                                                           |
| **Data**        | A JSON array of objects — each object is a data point.                                           |
| **Config**      | A JSON object mapping each data key to `{ label, color }`. Drives the legend and series colours. |
| **X Axis Key**  | The field name in the data objects that's used for the X-axis category labels.                   |
| **Data Keys**   | Comma-separated list of fields in the data to plot as series (e.g. `desktop,mobile`).            |
| **Show Grid**   | Display grid lines. Default: Yes.                                                                |
| **Show Legend** | Display the legend. Default: Yes.                                                                |
| **Min Height**  | CSS height value for the chart container. Default: `300px`.                                      |

### How it works

Chart parses the JSON data and config at render time. If the JSON is invalid or the data isn't an array, it shows an error card with the parse error — easier to spot than a silent failure.

For pie charts, if the config doesn't define colours, the chart cycles through default colours automatically.

{% hint style="warning" %}
Chart data is **inline JSON**, not a saved-search query. For dynamic or query-driven data, use **Report Widget** instead. Chart is best for fixed datasets you've prepared upfront.
{% endhint %}

### Examples

**Sales by month bar chart.**

* Chart Type: Bar
* Data: `[{"month":"Jan","sales":12400},{"month":"Feb","sales":13800},...]`
* X Axis Key: `month`
* Data Keys: `sales`
* Config: `{"sales":{"label":"Sales","color":"#3b82f6"}}`

**Payment mix pie chart.**

* Chart Type: Pie
* Data: `[{"method":"Cash","count":42},{"method":"Card","count":67},{"method":"Other","count":8}]`
* X Axis Key: `method`
* Data Keys: `count`

### Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Report Widget</strong></td><td>For dynamic tabular data driven by saved searches.</td><td><a href="/client-admin-guide/getting-started/report-components.md#report-widget">Report Components</a></td></tr><tr><td><strong>Common Patterns</strong></td><td>Recipes that combine charts with other dashboard blocks.</td><td><a href="/client-admin-guide/getting-started/common-patterns.md">Common Page Patterns</a></td></tr></tbody></table>

## Carousel <a href="#carousel" id="carousel"></a>

A rotating image carousel for landing pages, product showcases, and campaign banners. Renders a set of images with optional captions, auto-play timing, and navigation arrows or dot indicators.

The block supports slide transitions, full-screen mode, and programmatic navigation — useful for prominent visual storytelling.

### Available in

* Page modules
* Catalog modules
* Dashboard modules
* Public Page modules

Carousel isn't available in Modal, Reports, or Navigation modules.

### When to use

* A homepage hero carousel cycling through seasonal campaigns or featured products.
* A landing-page banner carousel showing brand stories or testimonials.
* Product gallery carousels on B2C catalog pages.
* Any page where a rotating set of images drives engagement or tells a story.

### Settings

| Setting                | Description                                                              |
| ---------------------- | ------------------------------------------------------------------------ |
| **Configure Carousel** | Opens the configuration modal — slides, captions, navigation, auto-play. |

The configuration modal supports:

* **Slides** — add, remove, and reorder image slides. Each slide has an image URL, optional caption text, and optional link/action target.
* **Aspect Ratio** — square (1:1), landscape (4:3), portrait (3:4), or wide (16:9). Default: landscape.
* **Auto-Play** — enable auto-rotation and set interval (2–10 seconds between slides). Default: on, 5 seconds.
* **Show Navigation Arrows** — show left/right navigation arrows. Default: Yes.
* **Show Dot Indicators** — show dot indicators (one per slide) at the bottom. Default: Yes.
* **Full-Screen Mode** — allow clicking to open a full-screen view. Default: No.

### How it works

1. Renders the first slide on load.
2. If **Auto-Play** is on, rotates to the next slide on the configured interval.
3. The user can click navigation arrows to move forward/backward, or click a dot indicator to jump to a specific slide.
4. Optional captions render below or overlay the image, depending on the configuration.
5. If a slide has a link target, clicking the image navigates to that destination.

{% hint style="info" %}
Keep the number of slides manageable — 3–5 is typical. Too many slides create a confusing navigation experience. For a long gallery of images, use a Gallery view in **Catalog Display** instead.
{% endhint %}

### Examples

**Homepage hero carousel.** Four slides rotating every 5 seconds — each a full-width campaign banner with a caption and call-to-action button. Navigation arrows visible; dots visible at the bottom.

**Product showcase.** Carousel at the top of a product detail page, cycling through product photography (front, back, detail views).

**Customer testimonials.** Three-slide carousel on a landing page, each with a customer quote and optional testimonial image.

### Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Image</strong></td><td>A single static image for non-carousel photo display.</td><td><a href="#image">#image</a></td></tr><tr><td><strong>Hero</strong></td><td>For a single prominent hero section (not rotating).</td><td><a href="#hero">#hero</a></td></tr><tr><td><strong>Catalog Display</strong></td><td>For product galleries in grid/gallery view.</td><td><a href="/client-admin-guide/getting-started/catalog-components.md#catalog-display">Catalog Components</a></td></tr></tbody></table>

***

## Image <a href="#image" id="image"></a>

A single responsive image block with sizing, aspect ratio, optional caption, and loading optimisation. Use it for standalone images, product photos, or any content that needs an optimised image display.

### Available in

* Page modules
* Catalog modules
* Order Form modules
* Dashboard modules
* Public Page modules

### When to use

* Product detail pages where a single hero-size product photo is prominent.
* Content pages with embedded photos or illustrations.
* Card-style layouts where each card has a header image.
* Any place a static, optimised image improves the visual presentation.

For carousels of rotating images, use **Carousel** instead. For product images in catalog context, see **Product Image** in [Product Components](/client-admin-guide/getting-started/product-components.md).

### Settings

| Setting                | Description                                                                                        |
| ---------------------- | -------------------------------------------------------------------------------------------------- |
| **Image URL**          | URL of the image file. Accepts relative or absolute URLs.                                          |
| **Image Size**         | thumbnail (64px), small (128px), medium (256px), large (512px), or hero (1024px). Default: medium. |
| **Aspect Ratio**       | square (1:1), landscape (4:3), portrait (3:4), or wide (16:9). Default: landscape.                 |
| **Caption**            | Optional text displayed below the image. Supports variable substitution (`{{variableName}}`).      |
| **Alt Text**           | Accessibility text for screen readers. Important for all images. Default: empty — set this.        |
| **Link URL**           | Optional URL the image navigates to when clicked. Leave empty for non-clickable display.           |
| **Open in New Window** | If **Link URL** is set, whether to open in a new browser tab. Default: No.                         |
| **CSS Classes**        | Extra CSS classes for styling.                                                                     |

### How it works

1. Loads the image from the configured URL.
2. Renders inside a responsive container with the configured aspect ratio.
3. Shows a pulse animation while loading; a warning icon on error; the **Alt Text** as fallback.
4. If **Caption** is set, renders the caption text below the image.
5. If **Link URL** is set, wraps the image in an anchor; clicking navigates to that URL.

The block is fully responsive — the container shrinks on smaller screens while maintaining the configured aspect ratio.

{% hint style="info" %}
Always set **Alt Text** — it's essential for accessibility and improves SEO. For images that are purely decorative, use alt text like "Decorative divider" rather than leaving it empty.
{% endhint %}

### Examples

**Product detail hero.** Image Size = hero, Aspect Ratio = landscape, Caption = product name or tagline, Link URL = empty.

**Customer testimonial card.** Inside a Card block, an Image with Size = small, Aspect Ratio = square (for a circular portrait) using CSS classes to round the corners.

**Clickable thumbnail.** Image with Size = medium, Link URL = product detail page. Clicking the image navigates to the product.

### Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Carousel</strong></td><td>For rotating multiple images.</td><td><a href="#carousel">#carousel</a></td></tr><tr><td><strong>Product Image</strong></td><td>Product-specific image with zoom and field selection.</td><td><a href="/client-admin-guide/getting-started/product-components.md#product-image">Product Components</a></td></tr><tr><td><strong>Hero</strong></td><td>For a hero section combining image, text, and buttons.</td><td><a href="#hero">#hero</a></td></tr></tbody></table>

***

## Section Card <a href="#section-card" id="section-card"></a>

A card container for grouping related content with a title, optional description, and background styling.

Use Section Card to organize page content into visually distinct groupings — similar to Card but designed for larger content blocks. Useful for sectioning a page into logical chunks without tab or modal wrapping.

### Available in

* Page modules
* Order Form modules
* Catalog modules
* Dashboard modules
* Public Page modules

Section Card isn't available in Modal, Reports, or Navigation modules.

### When to use

* Grouping form fields or page sections into labelled containers.
* Creating distinct visual regions on a dashboard or report page.
* Anywhere you want a bordered, titled container that holds other blocks.

For simple icon + title + description info blocks, use **Card** instead. For multi-step flows, use **Tabs** or **Modal**.

### Settings

| Setting         | Description                                       |
| --------------- | ------------------------------------------------- |
| **Title**       | The section heading.                              |
| **Description** | Optional supporting text below the title.         |
| **Background**  | Optional background colour or image for the card. |
| **Padding**     | Internal spacing. Default: 24px.                  |

### How it works

Section Card renders as a bordered container with the configured title, optional description, and any child blocks inside. The background styling (if set) applies to the card's background.

{% hint style="info" %}
Section Cards nest — you can place a Section Card inside another Section Card for sub-groupings. Be mindful of visual hierarchy to avoid confusion.
{% endhint %}

### Examples

**Form section.** A Section Card with title *Shipping Address*, containing Customer Address fields stacked vertically.

**Dashboard region.** A Section Card with title *Today's Metrics*, holding a Stats block and a Chart inside.

**Content grouping.** Multiple Section Cards on a page, each with a distinct background colour, grouping related information — *Overview* / *Details* / *Actions*.

### Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Card</strong></td><td>For simple icon + title + description info blocks.</td><td><a href="#card">#card</a></td></tr><tr><td><strong>Tabs</strong></td><td>For multi-step or tabbed content grouping.</td><td><a href="/client-admin-guide/getting-started/layout-components.md#tabs">Layout Components</a></td></tr><tr><td><strong>Modal</strong></td><td>For separate popup groupings.</td><td><a href="/client-admin-guide/getting-started/layout-components.md#modal">Layout Components</a></td></tr></tbody></table>

***

## Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Layout Components</strong></td><td>Wrap content blocks in Rows, Columns, and Grids.</td><td><a href="/client-admin-guide/getting-started/layout-components.md">Layout Components</a></td></tr><tr><td><strong>Action Components</strong></td><td>For interactive actions beyond a simple Button.</td><td><a href="/client-admin-guide/getting-started/action-components.md">Action Components</a></td></tr><tr><td><strong>Styling</strong></td><td>Theme colours, custom CSS, component-level styling.</td><td><a href="/client-admin-guide/getting-started/styling.md">Styling</a></td></tr></tbody></table>