106Pace planner

“At 30 minutes a day you finish on 12 September.” A track page states hours, modules and lessons — and none of those is the question the learner actually has. Forty-two hours is not a number anybody can convert into a decision. A date is.

Use it for

The top of a track or course page, before the curriculum
A track sidebar, where --inline keeps it to one row
Anywhere the commitment is large enough that a learner hesitates

Not for

A short course. “At 30 minutes a day you finish tomorrow” is noise
A progress bar — this is a projection about the future, not a report on the past
A slider. Three named options is a choice; a continuous control invites a precision this estimate does not have, which is why it composes .ns-segmented

On a track page

The date is the loud thing and the hours are the small print — deliberately the reverse of how every course page does it. Change the pace and watch the date move.

Finish by — —42 hours · 8 modules

15 min 30 min 1 hr

markup

<div class="ns-pace" data-pace="42" style="max-inline-size:22rem;inline-size:100%">
  <span class="ns-pace__label">Finish by</span>
  <time class="ns-pace__date" data-pace-date>&mdash;</time>
  <span class="ns-pace__meta"><b data-pace-rate>&mdash;</b><span>42 hours &middot; 8 modules</span></span>
  <fieldset class="ns-pace__control" style="border:0;padding:0;margin:0">
    <legend class="ns-visually-hidden">How much time per day</legend>
    <div class="ns-segmented">
      <label class="ns-segmented__option"><input type="radio" name="pace-a" value="15"><span>15 min</span></label>
      <label class="ns-segmented__option"><input type="radio" name="pace-a" value="30" checked><span>30 min</span></label>
      <label class="ns-segmented__option"><input type="radio" name="pace-a" value="60"><span>1 hr</span></label>
    </div>
  </fieldset>
</div>

Inline

For a sidebar or a band where the page has already spent its vertical budget. Same parts, one row, smaller date.

Finish by — —18 hours

15 min 30 min 1 hr

markup

<div class="ns-pace ns-pace--inline" data-pace-inline="18" style="inline-size:100%">
  <div>
    <span class="ns-pace__label">Finish by</span>
    <time class="ns-pace__date" data-pace-date>&mdash;</time>
    <span class="ns-pace__meta"><b data-pace-rate>&mdash;</b><span>18 hours</span></span>
  </div>
  <fieldset class="ns-pace__control" style="border:0;padding:0;margin:0;max-inline-size:16rem">
    <legend class="ns-visually-hidden">How much time per day</legend>
    <div class="ns-segmented">
      <label class="ns-segmented__option"><input type="radio" name="pace-b" value="15"><span>15 min</span></label>
      <label class="ns-segmented__option"><input type="radio" name="pace-b" value="30" checked><span>30 min</span></label>
      <label class="ns-segmented__option"><input type="radio" name="pace-b" value="60"><span>1 hr</span></label>
    </div>
  </fieldset>
</div>

Accessibility contract

The control is a real radio group with a legend, so it is announced as one choice with three options rather than three unrelated buttons
The date is text in a <time datetime>, not a rendered image or a bare string — it gets localised and it is readable out of context
The meta line always states the assumption. A finish date with no stated pace is a promise rather than a projection, and the design does not let you ship one without it
Tabular numerals, so the date does not reflow the block as it changes under the radio