Learning Card
The Learning Card is a flexible, self-contained visual unit used to display a single learning item—such as a course, learning path, template, media object or news — in a list or grid. Each card is designed to offer a compact summary of the content, provide relevant actions, and support quick scanning through structured, hierarchical content blocks.
The card supports optional content blocks and interactions that respond to the device type and user input, ensuring a cohesive and responsive experience regardless of the amount of visible data.
Purpose
Presents learning items in a visually organised, scannable format.
Enables quick recognition of learning content, availability, and key actions.
Supports a consistent layout that works across desktop, tablet, and mobile devices.
Structure
…
Image – Serves as a visual anchor for the item.
Notification badge – Indicates newly added or updated content; appears in the top-left corner.
Provider Logo – Overlays the image to show the content provider logo. In some card layouts, it may appear next to the title.
Parent / Category / Date - A placeholder for supplemental details such as the parent element (in search results) or a date (for news).
User status – Displays the current user state (e.g., "In progress", "Completed") or other user-related states.
Progress – A linear progress bar that reflects the learner’s completion state.
Title – Clearly communicates the main topic or purpose of the card.
Subtitle - Offers supplementary information or context to support the card title.
Missing prerequisites - Appears if a user is registered to a learning item but cannot start it due to unmet prerequisites.
Relations - Shown if the item is linked to another item (e.g., triggers completion of another course).
Self-registration period - If defined, displays the period during which a user can self-register.
Local time - Indicates the applicable time zone for scheduled sessions.
Due date icon - A colored clock icon indicating due date urgency based on the user status.
Element status - Provides structured metadata such as session dates, available components in a template, or status labels.
Rating – Displays an average user rating using stars
Reviews - Indicates the number of user reviews available. (related to rating)
Properties list - Displays a list of relevant properties or attributes associated with the card context
Additional Info Blocks – Not often used, shown when the card is expanded: short description, skills and certifications.
Expand/Collapse Icon – Allows users to expand the card to view more information.
More Actions Menu – A vertical menu with additional actions for the element.
Not all elements are always shown. The layout dynamically adapts depending on configuration and content availability.
Responsive & accessible by design
All interactive elements are keyboard and screen reader accessible.
Focus states, aria-labels, and role attributes are applied to key actions.
All content adapts to screen size without truncating essential information.
Visual structure preserves clarity and consistency in both collapsed and expanded views.
Design notes
The layout maintains a strong visual rhythm through consistent padding, alignment, and spacing.
Each element has a defined maximum height to ensure consistent card sizes across different content types.
Typography and contrast are designed for readability at a glance.
Tips for a better experience
Use meaningful and unique titles. Ensure that from the beginning of the title, users can differentiate it from others (consider that full titles are not always visible).
If necessary, use short subtitles — but be aware that they add complexity to the card layout.
Add images that support recognition, not decoration.
Limit metadata to key information to avoid visual noise. (configuration: Metadata on tile)
The Learning Card offers a smart and scalable way to present learning items, combining quick access to actions with a clean and responsive interface that adapts to learners’ needs.