Course cards, lesson lists, progress indicators, quiz summaries, instructor cards, and enrollment CTAs.
6 blocks · 18 variants
course-cardDisplays a single course with image, title, instructor, and enroll CTA. Fully static — no @wabbit/tome-lms peer required.
Standard course card with image, title, description, and enroll button.
defaultLearn how @wabbit/tome-blocks, bundles, and layer registries fit together. Ship a working demo site by the final module.
Morgan Lee, Senior Platform EngineerEnroll NowCompact card — title, instructor, and CTA only. No description or image.
minimalLarge hero-style card with prominent image and rating.
featuredA hands-on tour of the block authoring pipeline, bundle registries, and the defineBlock helper. Build your first production bundle by the end of week one.
Morgan Lee, Senior Platform EngineerStart the Fundamentals Tracklesson-listOrdered list of course lessons with status, duration, and module grouping. Fully static — no @wabbit/tome-lms peer required.
Numbered list of lessons with duration and status indicators.
defaultTighter row layout — title and duration only, no descriptions.
compactGrouped by module with collapsible lesson rows.
accordionprogress-barDisplays learner progress through a course or module. Fully static — no @wabbit/tome-lms peer required.
Horizontal progress bar with percentage label and status text.
defaultThin bar only — no labels or status text.
minimalDonut chart progress indicator with central percentage.
circularquiz-summaryDisplays quiz results with score, pass/fail status, and optional breakdown. Fully static — no @wabbit/tome-lms peer required.
Score, pass/fail badge, and a breakdown of answers by category.
defaultCongratulations! You passed.
Score percentage and pass/fail only — no category breakdown.
minimalFull question-by-question review with correct/incorrect indicators.
detailedYou earned the Fundamentals certificate. Well done.
instructor-cardDisplays an instructor profile with avatar, bio, credentials, and social links.
Avatar, name, title, bio, and social links in a horizontal layout.
defaultMorgan leads the Tome platform team at Wabbit and has been building block-authoring systems since long before they were cool. She teaches the Fundamentals track and hosts the monthly office-hours Q&A.
Avatar, name, and title only — no bio or social links.
minimalLarge avatar with full bio in a magazine-style column layout.
editorialMorgan leads the Tome platform team at Wabbit. She has spent the last decade shipping design systems, CMS integrations, and block-authoring pipelines for agencies and in-house product teams. Off-hours, she flies virtual wings in Star Citizen and refuses to admit how many HOTAS profiles she maintains.
enrollment-ctaHigh-conversion enrollment section with price, features, and enroll button. Fully static — no @wabbit/tome-lms peer required.
Heading, price, feature list, and enroll button in a centered layout.
defaultEverything you need to ship a production block bundle.
30-day money-back guarantee
Heading, price, and button only — compact banner style.
minimalDark background treatment for high-contrast enrollment emphasis.
darkJoin the next cohort of the Tome Platform Fundamentals track.
30-day money-back guarantee