Design system · released package 0.6.2

Student portal components

Student-owned workflows composed with shared visuals

Static captures use mock portal data. Click a preview to inspect it at full size. Exact props come from the released package declarations or the owning portal source.

Student portal

Module detail patterns

#

Module routing, attendance and assessment decisions belong to the student portal.

Dark portal UI: Module detail patterns at desktop width
Desktop · 1440px · student 84c6bf541a4e
Dark portal UI: Module detail patterns · Materials at desktop width
Module detail patterns · Materials · 1440px · student 84c6bf541a4e
Dark portal UI: Module detail patterns · Attendance at desktop width
Module detail patterns · Attendance · 1440px · student 84c6bf541a4e
Dark portal UI: Module detail patterns · tablet at tablet width
Module detail patterns · tablet · 820px · student 84c6bf541a4e
Dark portal UI: Module detail patterns · phone at phone width
Module detail patterns · phone · 390px · student 84c6bf541a4e

Student guidance

Student portal

Community service identities

#

This composition and its workflow decisions remain in the student portal.

Dark portal UI: Community service identities at desktop width
Desktop · 1440px · student 84c6bf541a4e

Student guidance

Student portal

Student summary card

#

This composition and its workflow decisions remain in the student portal.

Dark portal UI: Student summary card at desktop width
Desktop · 1440px · student 84c6bf541a4e

Student guidance

Student portal

Programme enrolment context

#

This composition and its workflow decisions remain in the student portal.

Dark portal UI: Programme enrolment context at desktop width
Desktop · 1440px · student 84c6bf541a4e

Student guidance

Student portal

Timetable minute precision

#

This composition and its workflow decisions remain in the student portal.

Dark portal UI: Timetable minute precision at desktop width
Desktop · 1440px · student 84c6bf541a4e
Dark portal UI: Timetable minute precision · tablet at tablet width
Timetable minute precision · tablet · 820px · student 84c6bf541a4e
Dark portal UI: Timetable minute precision · phone at phone width
Timetable minute precision · phone · 390px · student 84c6bf541a4e

Student guidance

Student portal

Announcement articles

#

This composition and its workflow decisions remain in the student portal.

Dark portal UI: Announcement articles at desktop width
Desktop · 1440px · student 84c6bf541a4e

Student guidance

Student portal

Privacy and security guidance

#

This composition and its workflow decisions remain in the student portal.

Dark portal UI: Privacy and security guidance at desktop width
Desktop · 1440px · student 84c6bf541a4e

Student guidance

Student portal

Services section content

#

This composition and its workflow decisions remain in the student portal.

Dark portal UI: Services section content at desktop width
Desktop · 1440px · student 84c6bf541a4e

Student guidance

Student portal

Student next action

#

This composition and its workflow decisions remain in the student portal.

Dark portal UI: Student next action at desktop width
Desktop · 1440px · student 84c6bf541a4e

Student guidance

Student portal

Embedded documents and case messages

#

Student form and Community draft policies remain in the portal.

Dark portal UI: Embedded documents and case messages at desktop width
Desktop · 1440px · student 84c6bf541a4e

Student guidance

Student portal

Module card

#

This composition and its workflow decisions remain in the student portal.

Dark portal UI: Module card at desktop width
Desktop · 1440px · student 84c6bf541a4e

Student guidance

Student portal

Student profile control

#

Account issue handling and destination routes remain student-owned.

Dark portal UI: Student profile control at desktop width
Desktop · 1440px · student 84c6bf541a4e
Dark portal UI: Student profile control · tablet at tablet width
Student profile control · tablet · 820px · student 84c6bf541a4e
Dark portal UI: Student profile control · phone at phone width
Student profile control · phone · 390px · student 84c6bf541a4e

Student guidance

Student portal

Performance chart card

#

This composition and its workflow decisions remain in the student portal.

Dark portal UI: Performance chart card at desktop width
Desktop · 1440px · student 84c6bf541a4e

Student guidance

Student portal

Performance loading state

#

This composition and its workflow decisions remain in the student portal.

Dark portal UI: Performance loading state at desktop width
Desktop · 1440px · student 84c6bf541a4e

Student guidance

Student portal

Calendar month and agenda

#

This composition and its workflow decisions remain in the student portal.

Dark portal UI: Calendar month and agenda at desktop width
Desktop · 1440px · student 84c6bf541a4e
Dark portal UI: Calendar month and agenda · phone at phone width
Calendar month and agenda · phone · 390px · student 84c6bf541a4e

Student guidance

Student portal

Calendar loading state

#

This composition and its workflow decisions remain in the student portal.

Dark portal UI: Calendar loading state at desktop width
Desktop · 1440px · student 84c6bf541a4e

Student guidance

Student portal

Admissions profile details

#

Student owns guardians, emergency relationships and disability editing. Religion and official identity remain locked. Schema 4 records preserve immutable accepted admissions evidence; academic files stay Academic-owned and payment proof stays Finance-owned. This capture uses an uncommitted Student working tree with shared package 0.6.1; no shared release is introduced.

Dark portal UI: Admissions profile details at desktop width
Desktop · 1440px · student 84c6bf541a4e
Dark portal UI: Admissions profile details at tablet width
Tablet · 768px · student 84c6bf541a4e
Dark portal UI: Admissions profile details at phone width
Phone · 375px · student 84c6bf541a4e

Student guidance

Student portal

Accepted applicant registration

#

Student receives a one-time development handoff into an isolated first-semester Design account. The existing prescribed module draft is visible with no registered modules; credit, fee, clash and international eVAL rules remain unchanged. Existing responsive tabs/table overflow is unchanged from the original demo. Captures are from an uncommitted Student working tree; no provisioning or durable uploads are asserted.

Dark portal UI: Accepted applicant registration at desktop width
Desktop · 1440px · student 666a74095c41
Dark portal UI: Accepted applicant registration at tablet width
Tablet · 768px · student 666a74095c41
Dark portal UI: Accepted applicant registration at phone width
Phone · 375px · student 666a74095c41

Student guidance

Student portal

Student document order

#

New v2 0.6.2 captures show canonical issued Offer Letter first and Eligibility Letter second with session-owned PDF preview in a separate browser tab and download. The spaced, equal-width icon actions use shared 0.6.2 buttons. Legacy images retain their original 0.6.1 provenance. The existing enrolment-confirmation sample is displayed as Offer Letter and placed first. Stored classification, ownership, IDs and filenames remain unchanged; the display alias does not change Immigration evidence checks. Other rows keep their alphabetical order. Captures show uncommitted Student composition using released 0.6.1 components.

Dark portal UI: Student document order at desktop width
Desktop · 1440px · student 666a74095c41
Dark portal UI: Student document order at desktop width
Desktop · 1440px · student aad4f0be55f4
Dark portal UI: Student document order at desktop width
Desktop · 1440px · student aad4f0be55f4
Dark portal UI: Student document order at tablet width
Tablet · 768px · student 666a74095c41
Dark portal UI: Student document order at tablet width
Tablet · 768px · student aad4f0be55f4
Dark portal UI: Student document order at tablet width
Tablet · 768px · student aad4f0be55f4
Dark portal UI: Student document order at phone width
Phone · 375px · student 666a74095c41
Dark portal UI: Student document order at phone width
Phone · 375px · student aad4f0be55f4
Dark portal UI: Student document order at phone width
Phone · 375px · student aad4f0be55f4

Student guidance

Student portal

Expandable navigation labels

#

Student composes expandable CollapsibleTrigger buttons through shared PortalNavItem asChild, restoring its existing white title-label treatment. Expansion, active routing and compact tablet rail remain unchanged. Captures show uncommitted Student source using released 0.6.1.

Dark portal UI: Expandable navigation labels at desktop width
Desktop · 1440px · student 666a74095c41
Dark portal UI: Expandable navigation labels at tablet width
Tablet · 768px · student 666a74095c41
Dark portal UI: Expandable navigation labels at phone width
Phone · 375px · student 666a74095c41

Student guidance

Student portal

Source form course rows

#

Latest browser-review captures use shared editableUndivided fields, 16px label-to-card spacing and the shared dashed AddRowButton in Add, Drop and Credit Transfer. Earlier captures preserve their historical dividers. Source forms use structured rows with up to eight courses, exact owned module identities for Add/Drop, inline validation and an electronic acknowledgement. Incomplete drafts remain saveable; submitted answers/evidence are immutable. Student Feedback v2 replaces new complaint/support availability while historical titles remain intact.

Dark portal UI: Source form course rows at desktop width
Desktop · 1440px · student 7a6968cc016b
Dark portal UI: Source form course rows at desktop width
Desktop · 1440px · student 7a6968cc016b
Dark portal UI: Source form course rows at desktop width
Desktop · 1440px · student 7a6968cc016b
Dark portal UI: Source form course rows at desktop width
Desktop · 1440px · student 7a6968cc016b
Dark portal UI: Source form course rows at tablet width
Tablet · 768px · student 7a6968cc016b
Dark portal UI: Source form course rows at tablet width
Tablet · 768px · student 7a6968cc016b
Dark portal UI: Source form course rows at tablet width
Tablet · 768px · student 7a6968cc016b
Dark portal UI: Source form course rows at tablet width
Tablet · 768px · student 7a6968cc016b
Dark portal UI: Source form course rows at phone width
Phone · 375px · student 7a6968cc016b
Dark portal UI: Source form course rows at phone width
Phone · 375px · student 7a6968cc016b
Dark portal UI: Source form course rows at phone width
Phone · 375px · student 7a6968cc016b
Dark portal UI: Source form course rows at phone width
Phone · 375px · student 7a6968cc016b

Student guidance

Student portal

Automatic student documents

#

Locally tested HTTP Demo now reads original admissions files through the accepted applicant-owned relationship, while Offer and Eligibility letters remain first and second. Unsupported servers and missing real files show unavailable/retry feedback; this service preparation is not deployed. PDF rows open a new tab using native browser viewing; images use native viewing and other formats download the original file. Offer Letter precedes Eligibility Letter. Standard enrolment letters reflect the owned enrolment; partial transcripts exclude unpublished results. Final outputs require recorded completion, Registry clearance and settled fees; certificates also require an explicit award. Missing real files show unavailable feedback.

Dark portal UI: Automatic student documents at desktop width
Desktop · 1440px · student 7a6968cc016b
Dark portal UI: Automatic student documents at desktop width
Desktop · 1440px · student cb78ab1be0c1
Dark portal UI: Automatic student documents at tablet width
Tablet · 768px · student 7a6968cc016b
Dark portal UI: Automatic student documents at tablet width
Tablet · 768px · student cb78ab1be0c1
Dark portal UI: Automatic student documents at phone width
Phone · 375px · student 7a6968cc016b
Dark portal UI: Automatic student documents at phone width
Phone · 375px · student cb78ab1be0c1

Student guidance

Student portal

Registration review progress

#

Latest browser-review captures capitalize Under review and Pending display labels without changing canonical enums. The existing editor submits an immutable request and deduplicated Finance invoices. The summary remains orange while Bursary records verified payment or an approved arrangement and Faculty rechecks the selection. Only Faculty completion creates registrations and turns the summary green. Development review controls are excluded from production.

Dark portal UI: Registration review progress at desktop width
Desktop · 1440px · student 7a6968cc016b
Dark portal UI: Registration review progress at desktop width
Desktop · 1440px · student 7a6968cc016b
Dark portal UI: Registration review progress at tablet width
Tablet · 768px · student 7a6968cc016b
Dark portal UI: Registration review progress at tablet width
Tablet · 768px · student 7a6968cc016b
Dark portal UI: Registration review progress at phone width
Phone · 375px · student 7a6968cc016b
Dark portal UI: Registration review progress at phone width
Phone · 375px · student 7a6968cc016b

Student guidance

Student portal

Lesotho funding presentation

#

An isolated Lesotho demo uses LSL and NMDS borrower, covered-semester and benefit details. Pending sponsorship posts no credits. Figures are clearly synthetic configuration; Cyberjaya MYR and tax behavior are preserved. No real NMDS eligibility or campus tariffs are asserted.

Dark portal UI: Lesotho funding presentation at desktop width
Desktop · 1440px · student 7a6968cc016b
Dark portal UI: Lesotho funding presentation at tablet width
Tablet · 768px · student 7a6968cc016b
Dark portal UI: Lesotho funding presentation at phone width
Phone · 375px · student 7a6968cc016b

Student guidance

Student portal

Study Plan transcript actions

#

Partial and eligible Final Transcript actions occupy the existing Programme Overview SummaryCard footer. Open Graduation retains its header action. Native viewing and eligibility gates are unchanged; the captures show uncommitted Student composition using released 0.6.2.

Dark portal UI: Study Plan transcript actions at desktop width
Desktop · 1440px · student 7a6968cc016b
Dark portal UI: Study Plan transcript actions at tablet width
Tablet · 768px · student 7a6968cc016b
Dark portal UI: Study Plan transcript actions at phone width
Phone · 375px · student 7a6968cc016b

Student guidance

Student portal

Resume editor validation

#

The 12 October local audit retains shared 0.6.2 popups, fields and button order. Body/title label tokens, unique control IDs and accessible error descriptions align all four Resume editors without redesigning the existing layout.

Dark portal UI: Resume editor validation at desktop width
Desktop · 1440px · student cb78ab1be0c1
Dark portal UI: Resume editor validation at tablet width
Tablet · 768px · student cb78ab1be0c1
Dark portal UI: Resume editor validation at phone width
Phone · 375px · student cb78ab1be0c1

Student guidance

Student portal

Finance proof validation

#

The existing shared proof popup associates amount, date and bank-reference errors with their controls. Captures retain the upload error state and established payment limits. No financial policy or shared component behavior changed.

Dark portal UI: Finance proof validation at desktop width
Desktop · 1440px · student cb78ab1be0c1
Dark portal UI: Finance proof validation at tablet width
Tablet · 768px · student cb78ab1be0c1
Dark portal UI: Finance proof validation at phone width
Phone · 375px · student cb78ab1be0c1

Student guidance

Applicant portal

Applicant scenario field

#

The development scenario selector uses its existing shared form field, with the documented label-to-control gap. Three scenarios and verification/chat ownership remain unchanged; no new panel or navigation styling.

Dark portal UI: Applicant scenario field at desktop width
Desktop · 1440px · applicant 104b89a50db2
Dark portal UI: Applicant scenario field at tablet width
Tablet · 768px · applicant 104b89a50db2
Dark portal UI: Applicant scenario field at phone width
Phone · 375px · applicant 104b89a50db2

Applicant guidance · @raisd-campus/design-system/system/popup