Video Tutorials Library
A tutorials header with topic chips, a continue watching card with progress and an up next list, and a browse grid of video cards.
A tutorials header with topic chips, a continue watching card with progress and an up next list, and a browse grid of video cards.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Video Tutorials Library is a browsable video hub for Acme workspace members. A header pairs the title with a row of topic filter chips (All, Getting started, Admin, Integrations, Reporting). Below it a continue watching card splits a wireframe thumbnail and a 45 percent progress bar against a resume panel for Building your first report, with a Resume button, a Start over action, and an up next list for the Reporting series. A browse grid of six tutorial cards closes the page, each with a duration badge and a watched or in progress state.
Videos are one typed array with a state field that drives the watched check and the in progress bar. Every thumbnail is an inline wireframe mockup with a play glyph, so the block carries no raster media and renders on the server.
Reach for this block as the video library route of an in-app help center or learning center, wired to your video host and per user watch history. Replace the static progress and states with real playback data.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the full workspace tutorial library. Other configurations:
Tip: the continue watching card only earns its space when watch history exists; hide it for first time viewers and let the grid lead.