Cards

<div class="card">
  <div class="card__content p-10">
    <div class="text-center">Card default</div>
  </div>
</div>

<div class="cards">
  <div class="card | grid space-y-6 p-8">
    <header class="card__header">
      <h3 class="heading-3">First card</h3>
    </header>
    <div class="card__content">
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam mollitia quas corporis iure nostrum totam
        dolorem maxime! Iste, consequatur distinctio! Sit, molestiae unde! Dicta provident eos nisi quas ducimus saepe!
      </p>
    </div>
    <footer class="card__footer">
      <a href="javascript: console.log('clicked link');" class="button button--solid">Call to action</a>
    </footer>
  </div>
  <div class="card | grid space-y-6 p-8">
    <header class="card__header">
      <h3 class="heading-3">Second card</h3>
    </header>
    <div class="card__content">
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam mollitia quas corporis iure nostrum totam
        dolorem maxime! Iste, consequatur distinctio! Sit, molestiae unde! Dicta provident eos nisi quas ducimus saepe!
      </p>
    </div>
    <footer class="card__footer">
      <a href="javascript: console.log('clicked link');" class="button button--solid">Call to action</a>
    </footer>
  </div>
</div>

<div class="cards">
  <div class="card">
    <div class="card__image | relative">
      <img
        class="aspect-video object-cover w-full"
        src="https://i.lemone.space/image/lemone?width=800&height=400"
        alt="Random image from the Lemone server"
      />
    </div>
    <div class="grid space-y-6 p-8">
      <div class="card__content content">
        <h5>Kopje</h5>
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam mollitia quas corporis iure nostrum totam
          dolorem maxime! Iste, consequatur distinctio! Sit, molestiae unde! Dicta provident eos nisi quas ducimus
          saepe!
        </p>
      </div>
      <footer class="card__footer">
        <a href="javascript: console.log('clicked link');" class="button button--solid">Call to action</a>
      </footer>
    </div>
  </div>
</div>