I was looking on a website about a theme and noticed this sidebar, which wasn’t that annoyning, and potentially useful for real information.
Even better, the code is straightforward:
<h2>Popular Resources</h2>
<a class="tile" href="https://www.isitwp.com/how-to-start-a-blog-step-by-step/"><i class="fa-2x fas fa-pencil-alt"></i><span class="tit">Start a Blog</span><span class="desc">Step by step guide on how to start a blog.</span></a><a class="tile" href="https://www.isitwp.com/how-to-make-a-website-step-by-step/"><i class="fa-2x far fa-desktop"></i><span class="tit">Make a Website</span><span class="desc">Beginners guide on how to make a website.</span></a><a class="tile" href="https://www.isitwp.com/best-wordpress-lead-generation-plugins-compared/"><i class="fa-2x far fa-chart-line"></i><span class="tit">Lead generation</span><span class="desc">Compare the best lead generation plugins.</span></a><a class="tile" href="https://www.isitwp.com/best-email-marketing-services-compared/"><i class="fa-2x far fa-envelope"></i><span class="tit">Email Marketing</span><span class="desc">Compare the best email marketing services.</span></a><a class="tile" href="https://www.isitwp.com/best-wordpress-security-plugins-compared/"><i class="fa-2x far fa-shield-check"></i><span class="tit">Security</span><span class="desc">Compare the best security plugins.</span></a><a class="tile" href="https://www.isitwp.com/best-wordpress-caching-plugins-compared/"><i class="fa-2x far fa-tachometer"></i><span class="tit">Performance</span><span class="desc">Compare the best caching plugins.</span></a>
That will need to be marked up a lot better. Could be a cool UI for a web game.
No idea why they classify their heading spans as tits.