This article explains how Dashboard Tiles look and behave in the Modern Learner UI compared with the classic Learner Experience. It covers Tile layout, sizing, Tile Icons, Tile Backgrounds, and what the wider layout means for Custom Tiles.

For the complete list of Learner Experience image assets and their specifications, including non-tile assets such as the Course Card, see the Modern Learner UI Image Sizes for Design article.

For an overview of the new interface, see the Modern Learner UI article.

Tile Layout in the Modern Learner UI

The Modern Learner UI changes how Tiles are arranged within a Container. The following behaviors apply to both Public and Private Dashboards:

• Tiles always fill the full width of their Container, whether the row holds a single Tile or several.
• There is no fixed maximum number of Tiles per row. How many fit comfortably depends on the Learner's screen resolution. Around four Tiles per row suits most desktop and laptop displays, while larger, higher-resolution screens can fit more.
• Containers have no maximum width by default. To constrain the layout, set a maximum width in the Template settings.
• Tiles are 200 px tall. There is no fixed maximum Tile width, since the display width scales with the screen resolution.

Tile Icons

The Tile Icon is the small image, effectively a button, that identifies a Tile on a Public or Private Dashboard. In the Modern Learner UI, Tile Icons display at 40 px instead of 60 px.

The recommended specifications for the Tile Icon are:

Existing 60 px icons still work but are scaled down to the new display size. SVG files are recommended for Tile Icons, because they scale cleanly at the smaller size and can be recolored to match your theme using Tile Icon Color. For file size limits and general icon guidance, see the LMS Customization Guidelines - Dashboard Tiles article.

Tile Backgrounds

The Tile Background is the background image for a Dashboard Tile. Its display size depends on how many Tiles are in the Container and the width of the browser window. Both the small and large Tile Background sizes changed in the Modern Learner UI.

The recommended specifications for the Tile Background are:

Because Tiles are 200 px tall in the Modern Learner UI, 200 px is the minimum recommended height for a Tile Background image. There is no fixed maximum Tile width, so use an image large enough to stay crisp on high-resolution displays while keeping the file within the 300 KB guideline. When a Tile Background is used, keep the Tile Icon visible and not transparent, since the icon is the primary identifier for a Tile on mobile.

Custom Tiles in the Modern Learner UI

The Custom Tile lets Admins build branded Dashboard content with HTML and CSS. The wider Tiles in the Modern Learner UI change how Custom Tile layouts should be designed.

In the classic Learner Experience, a row could hold seven or eight narrow Tiles. In the Modern Learner UI, Tiles fill the full width of their Container and fewer sit in a row, so each Tile is noticeably wider. As a result:

• Custom Tile HTML and CSS designed for the narrower classic Tiles may need layout adjustments to display correctly at the wider dimensions.
• The added width gives more room for multi-CTA layouts and richer content, which was one of the design goals for the Modern Learner UI.

When planning Custom Tile layouts, a single full-width Tile works well as a hero or banner, while a grid of roughly three to five Tiles works well for content, with three Tiles a good starting point. Build layouts with responsive, relative units so they adapt to the wider Tiles and to different screen sizes. 

For supported tags and attributes, code examples, and responsive design tips, see the Custom Tiles article.

Related Articles

The following articles provide more detail on the Modern Learner UI, Tiles, and related Dashboard configuration.

• Modern Learner UI
• Learner Experience: Design Assets and Image Specifications
• LMS Customization Guidelines - Dashboard Tiles
• Custom Tiles
• Custom Ribbons on Learner Dashboards