Skip to main content

​
Why it Matters

Content cards are the building blocks of your guides and interactive content. By combining different card types, you can create rich, engaging experiences that effectively communicate with your users and guide them through your application.

​
Card Types

​
Video Cards

Embed video content directly into your guides to provide visual demonstrations and tutorials. Features:
  • Support for YouTube, Vimeo, and direct video URLs
  • Autoplay and loop options
  • Custom thumbnail selection
  • Responsive sizing
Best for:
  • Feature demonstrations
  • Tutorial walkthroughs
  • Product announcements
  • Complex workflow explanations

​
Text Cards

Add formatted text content to provide context, instructions, and information. Features:
  • Rich text formatting (bold, italic, lists, links)
  • Multiple heading levels
  • Custom font sizes and colors
  • Markdown support
Best for:
  • Step-by-step instructions
  • Feature descriptions
  • Tips and best practices
  • Contextual explanations

​
Image Cards

Display screenshots, diagrams, and visual elements to enhance understanding. Features:
  • Support for PNG, JPG, GIF, and SVG formats
  • Click-to-zoom functionality
  • Custom alt text for accessibility
  • Caption support
Best for:
  • UI screenshots
  • Visual examples
  • Diagrams and flowcharts
  • Before/after comparisons

​
Button Cards

Add interactive call-to-action buttons to drive user engagement and actions. Features:
  • Custom button text and styling
  • Multiple action types (URL navigation, dismiss, next step)
  • Primary and secondary button styles
  • Icon support
Best for:
  • Call-to-action prompts
  • Navigation between steps
  • External resource links
  • Task completion triggers

​
Building with Cards

​
Combining Cards

Create comprehensive guides by stacking multiple card types:
  1. Introduction - Text card explaining the feature
  2. Visual demonstration - Video or image card showing the feature in action
  3. Instructions - Text card with step-by-step guidance
  4. Action - Button card to try the feature or continue

​
Card Settings

Each card type includes:
  • Spacing controls - Adjust padding and margins
  • Alignment options - Left, center, or right alignment
  • Visibility rules - Show/hide cards based on conditions
  • Animation settings - Entrance and exit animations

​
Best Practices

  • Keep cards focused - Each card should communicate one main idea
  • Use visual hierarchy - Combine card types to guide attention
  • Optimize for mobile - Test how cards display on smaller screens
  • Add alt text to images - Ensure accessibility for all users
  • Use buttons strategically - Include clear calls-to-action at decision points