Quick Explanation
| <div> | container |
| <h1-5> | headings |
| <a> | link |
| <img> | image - doesn't have a closing tag |
| <span> | allows you to group some code |
| </div> | closing tag - each tag with some exceptions will have a closing tag |
When you put class="" inside the opening tag you can adjust the appearance with CSS.
All of the classes will be styled in the main CSS file, so hopefully all you have to do is copy and paste.
Links to Articles (with Images) e.g. remote physiological monitoring:
<div class="custom-quicklinks-container">
<h4 id="information-and-instructions-specific-to-types-of-monitoring-devices-0" data-toc="true"> Insert header here </h4>
<p> Insert description here</p>
<div class="custom-quicklinks-card">
<a class="custom-quicklinks-tile"><img src="https://static.helpjuice.com/helpjuice_production/uploads/upload/image/18659/direct/1740957951574/image.jpeg"><span>Pulse Oximeters</span></a>
</div>
</div>This is what it will look like in the editor
To add more links, just copy and paste the block of code starting with <a
src="" Is where you put the link to the image from file manager
To change the label, change the text in-between the <span> tag
Tables
- First, add a normal table
- Add
class="custom-table"in the opening table tag
<figure class="table">
<table class="ck-table-resized custom-table">
<tbody>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</figure>
It will look normal in the editor.
Download
<div class="custom-download-card">
<span>Download the PDF version</span> <button>Click Here</button>
</div>This is what it will look like in the editor