Data Display
Video Card
Media card for video content: a 16:9-ish thumbnail with a one-line description beneath. On hover a dark overlay and a "watch video" pill appear over the thumbnail.
Video Card presents one video in a list or carousel. The thumbnail leads and a short description sits beneath.
The entire card is a single control. Give it an href to link to the video, or an onClick to open it in a player. On hover or keyboard focus, a dark scrim covers the thumbnail and a "觀看影片" (watch video) pill with an eye icon appears in the middle.
The play badge shown in the default state is part of the thumbnail image in Figma, not something the card draws. Supply thumbnails that include it if you want it.
The card fills its container's width. In Figma it is drawn at 346px.
- Use a thumbnail that already looks like a video — the source file's default has a play badge baked into the image.
- Keep the description to a line or two.
- Use onClick to open a lightbox player and href to link out.
- Don't rely on the hover overlay to explain the card — touch users never see it.
- Don't nest another link or button inside the card; the whole card is already one control.