A Custom Tile is a new Tile type that offers more freedom and flexibility for Admins when creating Dashboard content by leveraging HTML and CSS. This allows you to build more engaging and actionable Tiles, and align with customer branding.

In this article we will go over the benefits of Custom Tiles, how to add a Custom Tile to your Dashboard, code examples, and tips to ensure the Tile responds as expected.

Custom Tile Overview

With the Custom Tile, you can offer Learners new ways to discover content by:

Using engaging imagery to draw attention to Courses that you'd like highlighted.
Adding multiple Calls To Action to a single Tile, that can lead Learners to a pre-filtered Catalog views (e.g. Courses from certain Category, sorted by newest first) or other pages in the LMS.
Creating clear content sections separation within the Dashboard.

Important HTML and CSS Considerations

When using Custom Tiles please note:

The list of supported HTML tags and attributes is available in the reference section below.
Adding CSS styles can be done in the following ways:
- Using inline CSS directly on the HTML element, e.g. <div style="color: red;"></div>
- Adding <style>…</style> section at the top with global styles that can override default HTML tags styling or be used to define CSS classes to be re-used for multiple HTML tags.
- External linked CSS stylesheets will be ignored.
The <video> tag supports direct links to hosted .mp4, .webm and .ogg files. Providing a URL to YouTube videos or streams will not work.
For all <a href=""></a> tags that you add to Custom Tile, you must specify target attribute as opening links is restricted due to code security policies. Links without the "target" attribute will not be opened.
- <a href="" target="_blank">Link</a> will open links in new browser tab. This option is useful for external links so that Learners can more easily go back to LMS by choosing the original tab.
- <a href="" target="_parent">Link</a> will open links in the same browser tab. This option can be useful if you're linking to other pages within SkillSync LMS.

How to Add a Custom Tile

To add a Custom Tile to your Dashboard, follow these steps:

Log in to the Admin Experience.
Navigate to the Templates Report.
Select the Template you wish to edit and click Edit Template.
Once in the Template Editor, you can either create a new Container or select an existing one.
Click Add Tile.
From the modal window with list of available Tiles select Custom Tile.
Click Save.
Click Edit on the new tile. You will see the Custom Tile edit modal, split into the Tile Preview and the Editor.

The Preview section allows you to see the applied HTML and CSS code in real time as you type. To ensure your Tiles appear as expected on various devices, there are 2 groups of preview options:

Tile Preview based on Tile width and device: mobile, tablet and desktop.
Tile Preview for the Tall Container toggle set to ON or OFF.

The Code section is where the actual HTML and CSS is placed. The Validate code button ensures that entered code has the correct syntax and only uses allowed HTML tags and attributes. Tags that are not supported will be removed.

Once you have completed your changes, follow these steps to apply and save them:

Once the Tile looks as expected, click Apply. This will store the changes and return you to the Template Editor.
Click Save to update the Template. This will open the Learner Experience Dashboard in new tab so you can see the Tile.

Custom Tile Code Examples

The following are examples for what may be implemented as a Custom Tile.

Tile 1: Single CTA with Icon

Single CTA with an icon image and some text formatting, link opens in new tab.

<div style="font-family: Arial, sans-serif; color: #333;
text-align: center;"><img style="width: 10%; margin: 20px
auto; display: block;"
src="https://static.vecteezy.com/system/resources/previews/0
14/194/215/original/avatar-icon-human-a-person-s-badge-
social-media-profile-symbol-the-symbol-of-a-person-
vector.jpg">

<h1 style="font-size: 1em; color: #e28743;">Real World
Projects</h1>
<p style="font-size: 0.8em; padding: 0 40px;">
Engage with real-world challenges using <strong>data
notebooks and BI applications</strong>. </p>
<p style="font-size: 0.8em; padding: 0 40px; margin-bottom:
30px;">Apply your knowledge to real scenarios in a practical
environment</p>
<a target="_blank" style="padding: 10px; border: 1px solid
darkorange; background: orange; border-radius: 5px; text-
decoration: none; color: #fff;" href="/">Check it out!</a>
</div>

Tile 2: Multiple CTAs with Background Image

Two CTA buttons that open new page in the same tab, with large image in the background.

<div style="font-family: Arial, sans-serif; padding: 0;
margin: 0; background-image:
url('https://allthingsopen.org/wp-
content/uploads/2025/01/coding-laptop-computer-
e1736447079958.jpg'); background-position: center top;
height: 100vh">
<h1 style="color: #fff; font-size: 1.5em;padding: 20px 0
20px 20px; margin: 0; width: 90%;">Learn all you need to
start a new career in the data science field.</h1>
<h2 style="color: #fff; font-size: 1.1em; padding: 0 0 0
20px;">Pick your track and start learning now</h2>
<a target="_parent" href="open_same_tab_URL" style="margin-
left: 20px; margin-right: 10px; display: block; float: left;
background: green; width: 160px; padding: 15px; color: #fff;
text-decoration: none; text-align: center; border-radius:
3px; font-size: 0.9em;">Data Scientist in Python</a>
<a target="_blank" style="display: block; float: left;
background: purple; width: 160px; padding: 15px; color:
#fff; text-decoration: none; text-align: center; border-
radius: 3px; font-size: 0.9em;" href="open_new_tab_URL">Data
Scientist in R</a>
</div>

Tile 2 Alternative: Using the Style Tag

The same code tile using <style> tag for cleaner and easier to maintain code.

<style>
.wrapper {
font-family: Arial, sans-serif;
padding: 0;
margin: 0;
background-image: url('https://allthingsopen.org/wp-
content/uploads/2025/01/coding-laptop-computer-
e1736447079958.jpg');
background-position: center top;
height: 100vh
}
h1 {
color: #ffff;
font-size: 1.5em;
padding: 20px 0 20px 20px;
margin: 0;
width: 90%;
}
h2 {
color: #ffff;
font-size: 1.1em;
padding: 0 0 0 20px;
}
a {
margin-left: 20px;
display: block;
float: left;
background: green;
width: 160px;
padding: 15px;
color: #fff;
text-decoration: none;
text-align: center;
border-radius: 3px;
font-size: 0.9em;
}
</style>
<div class="wrapper">
<h1>Learn all you need to start a new career in the data
science field.</h1>
<h2>Pick your track and start learning now</h2>
<a target="_parent" href="https://open_same_tab_URL">Data
Scientist in Python</a>
<a target="_blank" style="background: purple;"
href="https://open_new_tab_URL">Data Scientist in R</a>
</div>

Tile 3: Large Tile with Imagery

A large tile that highlights content through imagery and engaging copy with CTA.

<div style="background: background: rgba(255, 255, 255, 1);
background: linear-gradient(90deg, rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0.23), rgba(214, 228, 255, 1)); height:
100vh">
<div style="float: left; width: 30%; overflow: hidden;
height: 100vh;">
<img style="max-width: 100%; float: left; margin: 20px 10px
0 20px; border: 1px solid #eee; border-radius: 5px;"
src="https://www.openaccessgovernment.org/wp-
content/uploads/2023/03/iStock-1358927461-scaled.jpg">
</div>
<div style="float: left; width: 60%; margin-left: 50px;
font-family: Calibri, sans-serif;">
<h1 style="color: #333; font-size: 1.3em; line-height:
1.2em;"> Google Data Analytics Professional
Certificates</h1>
<p style="font-size: 1em; color: #333;">In this certificate
program, you'll learn in-demand skills, and get AI training
from Google experts. Learn at your own pace, no degree or
experience required. We highly recommend taking the courses
of each certificate program in the order presented, as the
content builds on information from earlier courses.</p>
<a target="_blank" href="" style="padding: 15px; text-
decoration: none; background-color: rgb(0, 86, 210); color:
#fff; font-size: 1.5em; margin: 0 0 0 0; display: block;
float: left;">See All Courses »</a>
</div>
</div>

Video Tile Example

Embedding a video in the tile using native HTML <video> tag.

<div>
<video style="max-width: 100vw; display: block; margin: 0
auto;">
<source src="https://developer.mozilla.org/shared-
assets/videos/flower.webm" type="video/webm">
<source src="https://developer.mozilla.org/shared-
assets/videos/flower.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>

Using AI (ChatGPT) to Generate HTML and CSS Code

You can also try to leverage generative AI to create the code for you. While it can be a great way to fast track your Custom Tile creation, please keep in mind:

The output will most likely still need some tweaking to achieve desired result, particularly when it comes to responsiveness.
Make sure that your prompt includes as much context and instructions for the AI:
- Reference list of allowed tags and attributes (link to the reference section below in your prompt).
- Tell it to follow the guidelines for making the tile responsive, e.g. use relative size units for elements like images, typography.
- Ensure it knows to use either inline CSS only or group all CSS rules in the <style> </style> section.
- Ensure it always uses target attribute for <a href=""></a> tags.
- Tell it to look at the examples in the article.
- Provide visuals of the expected result as a reference, e.g. images.
- If you don't provide a reference image make the prompt more detailed (e.g. what copy you want it to include, how many and what CTAs).

Sample AI Prompt Template

Here's an example prompt that you can use as your starting point (assuming you link to this article). Feel free to modify it depending on assets available to you and desired level of control.

Create HTML code snippet that creates responsive tile
following the style as in attached image.

Link to this KB article - Use information from this URL as a guidance
what html tags, attributes and css code to use.

##INSTRUCTIONS
Make sure you follow best practices for creating
responsive code
All styles should be enclosed within single <style>
</style>
Background image has to fill full width and height of the
container but preserve aspect ratio.
Use the following fonts: - your font's list
Primary CTA background color
Primary CTA text color

Make sure the contrast between the background image and
text follows WCAG guidelines

##TILE CONTENT
Primary tile copy:
Secondary tile copy:
CTA button label:
Tile background image URL:

Tile Tips

Below are some tips to ensure your Tile is responsive:

Refer to W3C guidelines on HTML and CSS best practices to create Tiles that adjust to different screen sizes and viewports.
Instead of px use relative size units for HTML elements, images and typography, like em, rem, vh, vw or percentages.
Use flexbox model to lay elements inside the Custom Tile.
Leverage CSS features like gradients and shadows to implement visual effects without using images.
Use max-width:100%; CSS property to ensure images are never larger than its responsive container.

Allowed HTML Attributes and Tags Reference

The following indicate the HTML attributes and tags that can be used for a Custom Tile.

Allowed Tags

The following HTML tags are grouped by type:

Headings: h1, h2, h3, h4, h5, h6
Text & Formatting: p, blockquote, b, i, strong, em, strike, u, span, code, pre, div
Lists: ul, ol, li
Tables: table, tbody, thead, tr, td
Links & Media: a, img
Other: hr, br, video, style

Allowed Attributes

The following table shows which specific attributes are permitted for each HTML tag when creating Custom Tiles:

Tag(s)	Attributes
All (*)	style
a	href, name, target
img	alt, src
table	align, border, cellpadding, cellspacing, width
td	align, height, width
video	autoplay, controls, height, loop, muted, poster, preload, metadata, src, width

Allowed URI Schemes

When adding links or referencing external resources in your Custom Tiles, only the following URI schemes are supported:

http, https, ftp, mailto