This article outlines the image assets that changed in the Modern Learner UI compared with the classic Learner Experience. Four learner-facing assets changed: the Tile Icon, Tile Background, and Course Card were resized, and the My Courses and Catalog Banner was removed. The summary below lists every Learner Experience image slot and flags what changed, and the sections that follow cover only the updated assets. Compatible file types are JPG or PNG unless noted otherwise.
For an overview of the new interface, see the Modern Learner UI article.
For the complete list of design assets and their specifications, including assets that did not change, see Learner Experience: Design Assets and Image Specifications.
Summary of Image Size Changes
Every Learner Experience image slot is listed below. Only the Tile Icon, Tile Background, Course Card, and My Courses and Catalog Banner changed in the Modern Learner UI. All other slots are unchanged.
| Asset | Where It Appears | Classic Size | Modern UI Size | Changed? |
| Company Logo | Top-left of the Portal and Login Page | 200 × 54 px | 200 × 54 px | No change |
| Favicon | Browser tab or bookmark icon | 16 × 16 px | 16 × 16 px | No change |
| Login Background | Login Page (when no Public Dashboard is in use) | 1920 × 1200 px | 1920 × 1200 px | No change |
| Welcome Tile (Background) | Dashboard Welcome Tile | 768 × 360 px | 768 × 360 px | No change |
| Welcome Tile (Foreground) | Overlay on the Welcome Tile | 768 × 360 px | 768 × 360 px | No change |
| Dashboard Background | Behind all Dashboard tiles | 1920 × 860 px | 1920 × 860 px | No change |
| Tile Icon | Icon or button on Dashboard tiles | 60 × 60 px | 40 × 40 px | Changed |
| Tile Background (Small) | A small Dashboard tile | 320 × 160 px | 400 × 200 px | Changed |
| Tile Background (Big) | A large or full-width tile | 1280 × 320 px | 1280 × 400 px | Changed |
| Course Card (formerly Course Thumbnail) | Course Cards across the Portal | 229 × 173 px | 661 × 372 px | Changed |
| Course Banner | Course Details page | 1920 × 360 px | 1920 × 360 px | No change |
| Course Poster | Top of the Course Details page | 1000 × 300 px | 1000 × 300 px | No change |
| My Courses and Catalog Banner | My Courses and Catalog pages | 1920 × 360 px (max 300 KB) | Removed | Removed |
| Menu Icon | Public or private menu items | 24 × 24 px | 24 × 24 px | No change |
Asset Details for Updated Images
The sections below cover only the assets that changed in the Modern Learner UI. For guidance on assets that did not change, see Learner Experience: Design Assets and Image Specifications.
Tile Icon
The Tile Icon is the small image, effectively a button, that appears on a Public or Private Dashboard. A transparent format like PNG works best. The recommended size is smaller in the Modern Learner UI.
The recommended specifications for the Tile Icon are:
| Asset | Description |
| Classic UI Size | 60 × 60 px |
| Modern UI Size | 40 × 40 px |
| Aspect Ratio (Classic → Modern) | 1:1 → 1:1 |
| Compatible File Types | PNG or SVG |
| Changed in Modern UI? | Changed |
Tile Background
The Tile Background is the background image for a Dashboard tile. The actual display size depends on how many tiles are in the container and the width of the browser window. Both the small and big tile sizes were updated in the Modern Learner UI.
The recommended specifications for the Tile Background are:
| Asset | Description |
| Classic UI Size (Small Tile) | 320 × 160 px |
| Modern UI Size (Small Tile) | 400 × 200 px |
| Classic UI Size (Big Tile) | 1280 × 320 px |
| Modern UI Size (Big Tile) | 1280 × 400 px |
| Aspect Ratio, Small Tile (Classic → Modern) | 2:1 → 2:1 |
| Aspect Ratio, Big Tile (Classic → Modern) | 4:1 → 16:5 (3.2:1) |
| Compatible File Types | JPG or PNG |
| Changed in Modern UI? | Changed |
Course Card
The Course Card is the image representing a Course in list, grid, and search views. In the Modern Learner UI, the classic 4:3 Course Thumbnail is replaced by a wider 16:9 Course Card that aligns with the Course Player. Existing images that do not meet the new dimensions auto-fill with a background so nothing breaks, but thumbnails should be updated to take full advantage of the new format.
The recommended specifications for the Course Card are:
| Asset | Description |
| Classic UI Size | 229 × 173 px |
| Modern UI Size | 661 × 372 px |
| Aspect Ratio (Classic → Modern) | 4:3 → 16:9 |
| Compatible File Types | JPG or PNG |
| Changed in Modern UI? | Changed |
| Notes | Absorb also suggests testing an image at a 2.08:1 ratio. |
My Courses and Catalog Banner
In the classic Learner Experience, a banner image appeared at the top of the My Courses and Catalog pages. This image has been removed in the Modern Learner UI; there is no banner image slot on these pages in the new version. The classic specifications were:
| Asset | Description |
| Classic UI Size | 1920 × 360 px (max 300 KB) |
| Modern UI Size | Removed (no longer used) |
| Changed in Modern UI? | Removed |
Comments
Article is closed for comments.