Data Display
Schedule Day Card
Card for a single day of a class schedule: weekday, a typed icon, a title and subtitle, and a footer that either links to a demo video or shows a duration.
Schedule Day Card is one cell of a weekly plan: what a learner does on a given day. Seven of them side by side read as a week.
Three types are drawn in Figma. Video days are white with a blue icon disc and a clapperboard. Live class days are yellow with a red border, a speech icon and an orange title. Feedback days are blue with a message icon and a blue title.
The footer has two forms. With an href, it is a "示範影片" (demo video) button with a play icon. Without one, it shows a muted duration such as "25 分鐘".
Set reviewed to add a red "老師檢收" (teacher-reviewed) pill that hangs off the top edge.
Figma models hover as a separate state on the footer button; in code that is a normal :hover on the link.
The card fills its container's width. In Figma it is drawn at about 147px wide.
- Use the three types consistently — they teach visitors to recognise video, live class and feedback days at a glance.
- Give the reviewed pill room above the card; it overlaps the top edge by 24px.
- Lay seven cards out as a week; the card is designed for roughly a seventh of the container.
- Don't add both an href and a duration — the footer shows one or the other.
- Don't invent new types without design; each type's color set is a fixed combination.