Velocity X Components

Cards & Expandables

Course Progress Card

A learning-dashboard tile showing course title, lesson completion as both a bar and a written count, time remaining, and a resume action — built for a "continue where you left off" rail.

Subscription Included with the Velocity Components subscription.
bash
$ velocityx add course-progress-card

Built for astro.

Full docs for Course Progress Card →

Needs a licence key — subscribe here, then velocityx loginonce.

astro v1.0.1
Course Progress Card
Code editor showing TypeScript generics

Advanced TypeScript Patterns

6 of 10 lessons complete 60%
1h 25m left Resume

Props

NameTypeRequiredDefaultDescription
titlestringYes
coverSrcstringNo
coverAltstringNo
lessonsCompletednumberYes
lessonsTotalnumberYes
minutesRemainingnumberNo
resumeHrefstringYes
resumeLabelstringNo'Resume'
classstringNo''

File this creates

The CLI writes this path into your project, relative to its root — nothing else moves.

text
components/velocity/course-progress-card/CourseProgressCard.astro

Using the Course Progress Card component

Install it with velocityx add course-progress-card. The CLI writes the source straight into your project — no runtime dependency, no registry lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.

More from Cards & Expandables.