Data Display
Course Card
Summary card for a course in a browsable grid: thumbnail on top, then a centered title, short description and category pills.
Course Card summarizes one course in a grid of courses. It carries just enough to choose from: an image, the course name, a sentence about it, and the categories it covers as Pills.
Two audiences are drawn in Figma. Kid cards sit on the warm #F3F0EB surface with a red border and red pills; Adult cards are white with a purple border and purple pills. The card itself is not interactive — it is a layout for content. If the whole card should open the course, wrap it in a link in your page.
The card fills its container's width. In Figma it is drawn at 346px.
Do
- Use the audience that matches the course — the border and pill colors are how visitors tell kid and adult courses apart at a glance.
- Keep descriptions to about two lines so cards in a row stay the same height.
- Choose the heading level to match where the grid sits on the page.
Don't
- Don't mix kid and adult cards in the same row without a reason — the color change reads as a category change.
- Don't put more pills than fit on a line at the narrowest card width.