Media: images, animation and video
✍️ For technical writers🖼️ Images🎞️ Animation🎬 Video
All illustrations, animations and videos are stored as snippets. Topics only contain one snippet line per media item, so editing text never breaks a picture.
Media snippets
| Snippet | Type | Used in |
|---|
snippet-illus-hero | Animated SVG illustration (floating cards, progress bar, pulsing badge) | Welcome |
snippet-anim-move-card | Animated demo with synced step captions and Pause/Play | Welcome, Quick start |
snippet-anim-rule | Animated automation: card moves, rule fires, Slack toast | Automate workflows |
snippet-img-card-details | Annotated screenshot with numbered callouts, click to enlarge | Create your first board |
snippet-diagram-api | Animated diagram (moving data packets), click to enlarge | API quick start |
snippet-video-kanban | Embedded YouTube video with clickable chapters | Create your first board |
Replace an illustration with a real screenshot
- Upload the screenshot to Storage.
- Open the snippet (for example
snippet-img-card-details) in Source mode.
- Replace the
<svg>…</svg> block inside <label> with your image and keep the caption:
<img src="/resources/Storage/flowdesk/card-details.png" alt="Card details window"/>
- Save. Every topic that uses the snippet shows the new image.Click-to-enlarge, caption and styling keep working.
Image best practices: always write alt text; crop to the relevant area; add numbered callouts and explain them in the caption; keep the UI language and theme the same across all screenshots. |
<div class="fd-figure">
<input type="checkbox" class="fd-zoom" id="fd-zoom-UNIQUE"/>
<label for="fd-zoom-UNIQUE"><img src="..." alt="..."/></label>
<p class="fd-figcap"><b>Figure. Title.</b> ① … · ② …</p>
</div>
Use your own video
In snippet-video-kanban, replace the video ID jf0tlbt9lx0 in all links with your own (YouTube, or use a Vimeo/Loom embed URL). Each chapter is a link with target equal to the iframe name and a start time in seconds:
<a target="fd-yt-kanban" href="https://www.youtube-nocookie.com/embed/VIDEO_ID?start=75&autoplay=1"><span>1:15</span>Chapter name</a>
| The current video is a third-party Kanban explainer used as a placeholder. Its chapter names and times are examples: check them against the video or replace it with your product video. |
Animation guidelines
- Animations loop for 8–9 seconds and pause on hover or with the Pause button.
- Readers with Reduce motion enabled in their OS see static versions automatically.
- In PDF and print output, animated demos and video players are hidden; captions and steps remain.
- Use animation to show movement (drag and drop, automation). Use a still image for everything else.