Chapter 2 — Components · Section 09

Content Cards

Cards elevate from surface-container-low to surface-container-highest on hover (+3 tiers). A 1px accent bar identifies the brand family. Keyboard-accessible via tabIndex=0 and role="article".

Vertical Cards — Brand Family Variants

Module 1 · Foundations

Introduction to Systematic Theology

Dr. Elena Martinez

New

Module 3 · Languages

Biblical Greek: An Introduction

Prof. James Chen

Deadline

Module 2 · History

Church History: Early Fathers

Dr. Sarah Okonkwo

Completed

Horizontal Cards — List View

Introduction to Systematic Theology

Dr. Elena Martinez

New

Hermeneutics and Biblical Interpretation

Prof. James Chen

In Progress

Apologetics for the Modern Age

Dr. Sarah Okonkwo

Deadline

Gradient CTA Card

Featured Course

The Letter to the Romans

An in-depth journey through Paul's masterwork — the most systematic presentation of the gospel in the New Testament. 24 lessons with Dr. Marcus Aurelius.

Skeleton Loading State

Use aria-busy="true" on the skeleton container and aria-label="Loading…" so screen readers announce the loading state.