Doc Card

Clickable navigation cards for browsing content in the course document hub. .docCard holds a title, summary, and read time; .actionCard holds an external action link. Unlike .card (§ Card), which groups content, these are fully-linked navigation cards.

Doc Card

Vertical stack — title 17/700, summary 14 grey, meta (read time) 13 primary. On hover: translateY(-2px) + --sh-soft + primary (dark sky) border.

OverviewA quick look at the purpose and structure of OT V4.0.4 min Schedule & StructureSession timetable and flow.6 min

Action Card

Horizontal space-between — label 16/600 + ↗ icon. On hover: card lifts and icon shifts. Links are sourced from site-nav.ts as the SSOT.

Apply for Training AI Skills Self-Assessment

Rules

vs Card

.card groups content; Doc Card is a fully-linked navigation card. Grid: minmax(280px, 1fr).

Hover elevation

Use --sh-soft. Do not use the undefined --shadow-md.

Dark mode

Hover border is sky; meta text is sky. Surface separation via border + shadow only — no fill.