Component catalogue

The shared bordered, rounded content container that nearly every other component is built from.

Primary, secondary and light calls to action.

Default, blue, success, warning and error messages that need to stand apart from body text.

Compact duration, category or format labels.

Two- or three-column card collection.

Progressive disclosure of secondary detail that benefits from being collapsed by default.

Local navigation across a small number of parallel categories.

Responsive 16:9 embedded media treatment.

Introduces a major course section with strong orientation.

Closes or resets a section with concise reinforcement.

Pairs a concise explanation with meaningful imagery.

Isolates one point a learner should retain.

Separates the legal source from its plain-English meaning.

Explains a resource and provides a clear action to open it.

Shows a genuinely ordered procedure.

Presents context, evidence or an update within a running scenario, from the decision-maker's perspective.

Requires a realistic professional judgement and reveals the reasoning behind the correct response.

Clarifies two related audiences, responsibilities or positions by holding them side by side.

A structured confidence or knowledge self-rating table — the learner rates each statement against a shared scale (e.g. Not at all confident → Very confident).

Specialised content navigation for categories of harm — lets the learner move between related but distinct categories (physical abuse, psychological/emotional abuse, neglect, sexual abuse or exploitation, grooming) without a full page per category.

Structured feedback form treatment for end-of-course response collection.

Transitions between adjoining structural surfaces with an angled decorative edge.

Large legacy reflection treatment.