Tiles Instructions:
Quick Reference
| <a> | link |
| <img> | image |
| <span>TITLE</span> | put the title where TITLE is |
| href="" | put a link in-between the quotes |
| src="" | put an image link in-between the quotes |
Use this sample article to play around with them: clinic config test - Article Editor
Instructions
1.Insert a HTML snippet where you want the tiles to go.
2.Copy the code below and paste it in the HTML snippet
<a class="custom-quicklinks-tiles"
href="ARTICLE-LINK-GOES-HERE">
<img src="IMAGE-LINK-GOES-HERE" width="200px">
<span>TITLE-GOES-HERE</span</a>3.Add images and links
-
src=""Is where you put the link to the image
When copying an image link from the article or files manager: right click the image and select copy image link.
-
href=""is where you put the link to the article
To copy the link from another article, right click an existing link and select copy link
- Between the
<span>tags is where you put the title of the tile - You can change the size of the image by adjusting
width="200px"
The height will adjust itself accordingly. This will depend on the size and quality of the image – it is generally better to use SVGs rather than PNGs or JPGs.
4.Repeat steps 1-3 to add more tiles
Notes:
- You can create multiple groups of tiles
- The tiles in a group cannot have any space between them, or they will appear as their own group
- Tiles can be placed anywhere, including inside accordions and tabs
Column Instructions
1.Insert two HTML snippets.
2.Copy the code below for the first snippet
<div class="custom-column"> </div>3.Copy the code below for the second snippet
<div class="end-custom-column"> </div>4.Insert the content between the snippets.
Use this sample article to play around with them: testing somestuff - Article Editor
Notes:
- Each row in the published version will consist of adjacent components in the editor.
- Empty paragraphs will be deleted in the preview and published versions.