Related content Uikit only
Component for displaying related content.
The code to generate the component is this:
<div class="carousel-default d-print-none">
<div class="jcarousel-wrapper" itemscope itemtype="http://schema.org/Article">
<div class="jcarousel related-posts" data-control-prev="related-posts-control-prev" data-control-next="related-posts-control-next">
<ul>
<li>
<a href="#" title="Click here to access this website" itemprop="url" class="ui-box topBottom-leftRightCorner">
<span class="ui-border-element">
<img src="http://placehold.it/640x440" alt="Image Description" itemprop="image" class="img-fluid">
</span>
</a>
<a href="#" class="category" title="Title 1" itemprop="about">Category 1</a>
<h2 itemprop="headline"><a href="#" title="Title " itemprop="url">Title </a></h2>
</li>
<li>
<a href="#" title="Click here to access this website" itemprop="url" class="ui-box topBottom-leftRightCorner">
<span class="ui-border-element">
<img src="http://placehold.it/640x440" alt="Image Description" itemprop="image" class="img-fluid">
</span>
</a>
<a href="#" class="category" title="Other title" itemprop="about">Good</a>
<h2 itemprop="headline"><a href="#" title="Title " itemprop="url">Title 02</a></h2>
</li>
<li>
<a href="#" title="Click here to access this website" itemprop="url" class="ui-box topBottom-leftRightCorner">
<span class="ui-border-element">
<img src="http://placehold.it/640x440" alt="Image Description" itemprop="image" class="img-fluid">
</span>
</a>
<a href="#" class="category" title="Title" itemprop="about">Happy</a>
<h2 itemprop="headline"><a href="#" title="Title " itemprop="url">Title 03</a></h2>
</li>
<li>
<a href="#" title="Click here to access this website" itemprop="url" class="ui-box topBottom-leftRightCorner">
<span class="ui-border-element">
<img src="http://placehold.it/640x440" alt="Image Description" itemprop="image" class="img-fluid">
</span>
</a>
<a href="#" class="category" title="News" itemprop="about">News</a>
<h2 itemprop="headline"><a href="#" title="Title " itemprop="url">Title 04</a></h2>
</li>
<li>
<a href="#" title="Click here to access this website" itemprop="url" class="ui-box topBottom-leftRightCorner">
<span class="ui-border-element">
<img src="http://placehold.it/640x440" alt="Image Description" itemprop="image" class="img-fluid">
</span>
</a>
<a href="#" class="category" title="Travel" itemprop="about">Travel</a>
<h2 itemprop="headline"><a href="#" title="Title " itemprop="url">Title 05</a></h2>
</li>
</ul>
</div>
<a href="#" title="Prev" class="jcarousel-control-prev related-posts-control-prev"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
<a href="#" title="Next" class="jcarousel-control-next related-posts-control-next"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
</div>
</div>