title: Recommendation Cards
===
<style>
    ul.example {
        list-style: none;
        display: flex;
        justify-content: center;
        gap: 20px;
        flex: 0;
        margin: 0;
        padding: 0;
    }

    ul.example li {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        display: block;
        background-color: #0cdcf7;
        opacity: 0;
        flex: 0 0 50px;
    }
</style>
<link rel="stylesheet" href="/public/css/recommendation-card.css"/>
<div class="recommended-section">
<article class="recommended-card">
  <a href="#">
    <img src="https://placehold.co/326x163" alt="Thumbnail" class="thumbnail">
    <header>
        <h2 class="title">Designing for Focus</h2>
        <h3 class="subtitle">Why simplicity in UI is more than an aesthetic choice.</h3>
    </header>
    <main class="card-content">
    </main>
    <footer>
        <div class="meta">John Smith · 4 min read · Jul 2</div>
    </footer>
  </a>
</article><article class="recommended-card">
  <a href="#">
    <img src="https://placehold.co/326x163" alt="Thumbnail" class="thumbnail">
    <header>
        <h2 class="title">Designing for Focus</h2>
        <h3 class="subtitle">Why simplicity in UI is more than an aesthetic choice.</h3>
    </header>
    <main class="card-content">
    </main>
    <footer>
        <div class="meta">John Smith · 4 min read · Jul 2</div>
    </footer>
  </a>
</article>
<article class="recommended-card">
  <a href="#">
    <img src="https://placehold.co/326x163" alt="Thumbnail" class="thumbnail">
    <div class="card-content">
      <div class="title">Designing for Focus</div>
      <div class="subtitle">Why simplicity in UI is more than an aesthetic choice.</div>
      <div class="meta">Sara Lin · 5 min read · Jul 1</div>
    </div>
  </a>
</article>
</div>