ENGLISH·COURSE API
    Preparing search index...
    • The learner card: who is learning on this device, drawn like a membership card — wordmark, Learner tag, avatar, name, level, and progress.

      Parameters

      • name: {
            name: string;
            avatar:
                | { kind: "initials" }
                | {
                    kind: "illustration";
                    id:
                        | "sun"
                        | "wave"
                        | "leaf"
                        | "plum"
                        | "ember"
                        | "echo"
                        | "night"
                        | "schwa";
                };
            level: LearnerCardLevel;
            progress: LearnerCardProgress;
            size?: "default"
            | "large";
            distinction?: Distinction;
            nameField?: ReactNode;
            showProgressBar?: boolean;
        }

        The learner's name, as typed so far

      Returns Element

      The onboarding and the Profile page both edit the card live, so it renders whatever it is given, including a name still being typed: a blank name shows a placeholder rather than an empty line.

      The onboarding goes one step further and hands the card the name field, so the learner types where the name will live. The card only makes room for it — the field, its value and its label belong to the step that owns them.

      The wordmark here is decoration, not the header's home link, so it is a plain text mark hidden from assistive technology.

      The progress line names completed videos out of the total; hovering or focusing it opens a tooltip below it — so it never covers the learner's name — with a progress ring at the completed percentage, the count, and how many videos are left in the course, or that the course is complete. A phone has no hover, so a tap on the label toggles the tooltip too, and its hit area reaches 44px tall without moving the footer.