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

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

Prefix When to use Example image
lc_table Interactive tables in SVG (scrolling, highlighting, formatting). lc_table example
lc_multiple_bars Side-by-side bars within each category (comparison). lc_multiple_bars example
lc_funnel_bars Concentric bars (largest to smallest) for hierarchy. lc_funnel_bars example
lc_stacked_bars Stacked bars for cumulative totals, part-to-whole. lc_stacked_bars example
lc_rings Hierarchical or comparative data in concentric rings. lc_rings example
lc_bar / lc_bar_bg Horizontal bars for side-by-side comparison (e.g. revenue, KPIs). lc_bar example
lc_column / lc_column_bg Vertical columns for time series or rankings. lc_column example
lc_circle / lc_circle_bg Single percentage or completion status (circular progress). lc_circle example
lc_range / lc_range_bg Min-max values or data ranges (position and width). lc_range example
lc_doughnut Segmented proportional data (e.g. market share, NPS). lc_doughnut example
lc_color Change element colors from data (status, conditions). lc_color example
lc_heatmap Data intensity via color opacity (0–100). lc_heatmap example
lc_fadetext Text with fade at the end to indicate overflow. lc_fadetext example
lc_image Dynamic images (logos, product images, photos). lc_image example
lc_date Formatted dates (events, milestones, deadlines). lc_date example
lc_slope Slope/trend between two values (before-after, comparisons). lc_slope example
lc_funnel_or_hannoi Funnel or Hannoi charts (conversion funnels, hierarchy). lc_funnel example
lc_timerange Human-readable time duration (e.g. 7d 0h, 2h 30m). lc_timerange example
lc_sparkline / lc_sparkbar / lc_sparkarea Compact spark charts (line, bar, or area) for trends. lc_spark example
lc_days_of_week / lc_days_of_month Time-based charts (week or month) for activity patterns. lc_hour_week_month example
lc_label Labeled lists with optional colored bullets (legends).  
lc_kenburns Cinematic zoom and pan on any SVG element.  
lc_scrolltext Long text that scrolls when it exceeds the container.  
lc_video Embedded video with autoplay (demos, tutorials).  
lc_lottie Lottie animations from JSON (logos, loaders, illustrations).  

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

⚙️ New to Infographic Slides?

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

→ Setup & Export Guide

đź“‹ 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

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 

<!-- 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"

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

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?

Table of contents

This site uses Just the Docs, a documentation theme for Jekyll.