Skip to content
CastCast Help Center

Custom

Custom Slide

Section titled “ Custom Slide”

Create stunning, data-driven graphics that automatically personalize with user or account-specific data. The Infographic slide is compatible with both static SVGs and animated SVGs with embedded CSS.

Dynamic elements and widgets at a glance

Section titled “Dynamic elements and widgets at a glance”

Click a Prefix to jump to its full configuration. Click an image for a larger preview.

Prefix When to use Example image Sample Data Sample SVG
lc_action / lc_target Click-to-reveal overlay with frosted-glass modal and TTS narration. lc_action exampleSVG
lc_bar / lc_bar_bg Horizontal bars for side-by-side comparison (e.g. revenue, KPIs). lc_bar exampleSVG
lc / lc_center / lc_right Left (default), center, or right-align dynamic text in SVG <text> elements using lc_left|center|right_text style IDs. lc_center_right exampleSVG
lc_circle / lc_circle_bg Single percentage or completion status (circular progress). lc_circle exampleSVG
lc_color Change element colors from data (status, conditions). lc_color exampleSVG
lc_column / lc_column_bg Vertical columns for time series or rankings. lc_column exampleSVG
lc_date Formatted dates (events, milestones, deadlines). lc_date exampleSVG
lc_days_of_month Calendar-style charts of daily activity across a month. lc_days_of_month exampleSVG
lc_doughnut Segmented proportional data (e.g. market share, NPS). lc_doughnut exampleSVG
lc_fadetext Text with fade at the end to indicate overflow. lc_fadetext exampleSVG
lc_funnel_bars Concentric bars (largest to smallest) for hierarchy. lc_funnel_bars exampleSVG
lc_funnel_or_hannoi Funnel or Hannoi charts (conversion funnels, hierarchy). lc_funnel exampleSVG
lc_glass Standalone frosted-glass overlay region with configurable blur. lc_glass exampleSVG
lc_heatmap Data intensity via color opacity (0–100). lc_heatmap exampleSVG
lc_html_table Responsive HTML table with card layouts, progress bars, and row spanning. lc_html_table exampleSVG
lc_image Dynamic images with alignment grid: left|center|right × top|middle|bottom (logos, product images, photos). lc_image exampleSVG
lc_kenburns Cinematic zoom and pan on any SVG element. CSV SVG
lc_label Labeled lists with optional colored bullets (legends). lc_label exampleSVG
lc_lottie Lottie animations from JSON (logos, loaders, illustrations). CSV SVG
lc_multiple_bars Side-by-side bars within each category (comparison). lc_multiple_bars exampleSVG
lc_pie_bar Horizontal stacked bar with legend (single-row proportions). lc_pie_bar exampleSVG
lc_radial Polar area (rose) chart for category magnitudes. lc_radial exampleSVG
lc_range / lc_range_bg Min-max values or data ranges (position and width). lc_range exampleSVG
lc_rings Hierarchical or comparative data in concentric rings. lc_rings exampleSVG
lc_scrolltext Long text that scrolls when it exceeds the container. CSV SVG
lc_slope Slope/trend between two values (before-after, comparisons). lc_slope exampleSVG
lc_sparkline / lc_sparkbar / lc_sparkarea Compact spark charts (line, bar, or area) for trends. lc_spark exampleSVG
lc_stacked_bars Stacked bars for cumulative totals, part-to-whole. lc_stacked_bars exampleSVG
lc_timerange Human-readable time duration (e.g. 7d 0h, 2h 30m). lc_timerange exampleSVG
lc_video Embedded video with autoplay (demos, tutorials). CSV SVG

Each element in the table above has a dedicated page with full configuration, examples, and troubleshooting. Click any name to go to its page.

Getting Started

Section titled “Getting Started”

⚙️ New to Infographic Slides?

Section titled “⚙️ New to Infographic Slides?”

Learn how to create and export SVGs from Figma or SVGator:

→ Setup & Export Guide{: .btn .btn-outline }

📋 Already Know What You Need?

Section titled “📋 Already Know What You Need?”

Use the table above to jump to any element’s full configuration, or the quick syntax reference:

→ Quick Reference Cheat Sheet{: .btn .btn-outline }

How It Works

Section titled “How It Works”

Infographic slides use special ID naming conventions in your SVG files to create dynamic, personalized content:

  1. Text Personalization - Add lc_variableName to element IDs to replace with dynamic data
  2. Show/Hide Elements - Use lc_ or hid_ prefixes to control visibility
  3. Dynamic Attributes - Special prefixes like lc_bar_, lc_circle_, etc. adjust visual properties

Basic Example

Section titled “Basic Example”

{% raw %}

<!-- In your SVG -->
<text id="lc_customer-name">John Doe</text>
<rect id="lc_bar_revenue" />


<!-- In your dataset -->
{{ customer-name }} = "Acme Corp"
{{ revenue }} = "75"

{% endraw %}

The slide will automatically replace “John Doe” with “Acme Corp” and set the bar width to 75%.

SVG Standards

Section titled “SVG Standards”
  • Desktop SVGs: 1080 x 810 pixels (4:3 aspect ratio)
  • Mobile SVGs: 440 x 836 pixels (1:1.9 aspect ratio)
  • Format: Static or animated SVGs with embedded CSS
  • Animation: CSS-only animations supported (no JavaScript)

Need Help?

Section titled “Need Help?”