I've been able to make a few features using HTML, bootstrap and images, but ideally I'd like to make this more friendly for users who don't have the same level of web-development experience as me.
We want to add visual menus to enhance user experience. The tile plugin would be sufficient if it wasn't for the fact it causes 503 errors (possibly not compatible with a bootstrap 3.3 template).
I would provide examples of what I've already achieved, however it's a private wiki and I have nowhere to store screenshots. The best example I could give is BMC Digital Workplace. The mini banners and service tiles are basically what I'm looking for and have been able to replicate using bootstrap.
Example bootstrap script:
Version 1 - Panel with Header & Footer
<HTML>
<div class="row">
<div class="col-sm-3">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row row-no-gutters">
<div class="col-sm-4">
<div class="media">
<div class="media-left">
<img class="media-object" src="https://uxwing.com/wp-content/themes/uxwing/download/tools-equipment-construction/setting-icon.png" alt"..." style="width:64px;height:64px;">
</div>
</div>
</div>
<div class="col-sm-8">
<a href="#"><h4>Catalogue Management</h4></a>
</div>
</div>
</div>
<div class="panel-body">
Use this request to change various aspects of the catalogue.
</div>
<div class="panel-footer">
</div>
</div>
</div>
</div>
</HTML>
Version 2 - Panel Only
<HTML>
<div class="row">
<div class="col-sm-3">
<div class="panel panel-default">
<div class="panel-body">
<div class="row row-no-gutters">
<div class="col-sm-4">
<img src="https://uxwing.com/wp-content/themes/uxwing/download/tools-equipment-construction/setting-icon.png" alt"..." style="width:64px;height:64px;">
</div>
<div class="col-sm-8">
<a href="#">
<h4>Catalogue Management</h4>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</HTML>