Cards

<div class="grid grid-cols-cards gap-8">
  <div class="card--article" vocab="https://schema.org/" typeof="NewsArticle">
    <a
      href="javascript: console.log('clicked article');"
      class="card__image | no-underline"
      tabindex="-1"
      aria-hidden="true"
    >
      <img src="https://i.lemone.space/image/lemone?width=800&height=400" alt="Random image from the Lemone server" />
    </a>
    <div class="card__body">
      <div class="card__content">
        <time property="datePublished" class="text-sm" datetime="2021-25-09T12:00:00+02:00">25 november 2021</time>
        <time property="dateModified" class="text-sm hidden" datetime="2021-26-09T12:00:00+02:00"
          >26 november 2021</time
        >
        <h3 property="name" class="">Article name</h3>
      </div>
      <div class="card__footer | mt-auto">
        <a property="url" href="javascript: console.log('clicked article');" class="stretched-link | text-red-500">
          <svg class="w-4 aspect-square" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
            <!-- SVG content -->
          </svg>
          <div class="sr-only">Meer over artikel name</div>
        </a>
      </div>
    </div>
  </div>
  <div class="card--article" vocab="https://schema.org/" typeof="NewsArticle">
    <a
      href="javascript: console.log('clicked article');"
      class="card__image | md:hidden no-underline"
      tabindex="-1"
      aria-hidden="true"
    >
      <img src="https://i.lemone.space/image/lemone?width=800&height=400" alt="Random image from the Lemone server" />
    </a>
    <div class="card__body">
      <div class="card__content">
        <time property="datePublished" class="text-sm" datetime="2021-25-09T12:00:00+02:00">25 november 2021</time>
        <time property="dateModified" class="text-sm hidden" datetime="2021-26-09T12:00:00+02:00"
          >26 november 2021</time
        >
        <h3 property="name" class="">Article name</h3>
      </div>
      <div class="card__footer | mt-auto">
        <a property="url" href="javascript: console.log('clicked article');" class="stretched-link | text-red-500">
          <svg class="w-4 aspect-square" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
            <!-- SVG content -->
          </svg>
          <div class="sr-only">Meer over artikel name</div>
        </a>
      </div>
    </div>
  </div>
  <div class="card--article" vocab="https://schema.org/" typeof="NewsArticle">
    <div class="card__body">
      <div class="card__content">
        <time property="datePublished" class="text-sm" datetime="2021-25-09T12:00:00+02:00">25 november 2021</time>
        <time property="dateModified" class="text-sm hidden" datetime="2021-26-09T12:00:00+02:00"
          >26 november 2021</time
        >
        <h3 property="name" class="">Article name</h3>
      </div>
      <div class="card__footer | mt-auto">
        <a property="url" href="javascript: console.log('clicked article');" class="stretched-link | text-red-500">
          <svg class="w-4 aspect-square" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
            <!-- SVG content -->
          </svg>
          <div class="sr-only">Meer over artikel name</div>
        </a>
      </div>
    </div>
  </div>
</div>

<div class="grid grid-cols-cards gap-8">
  <div class="card--highlight | bg-white">
    <div class="card__image | relative">
      <img
        class="aspect-card-highlight object-cover"
        src="https://i.lemone.space/image/lemone?width=800&height=400"
        alt="Random image from the Lemone server"
      />
      <div class="icon--theme | absolute top-100 left-5 mobile:left-5 lg:left-7 -translate-y-1/2 p-3 mobile:p-2">
        <svg class="icon--theme | mobile:h-5 h-7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
          <!-- SVG content -->
        </svg>
      </div>
    </div>
    <div class="card__content | leading-none mobile:p-5 space-y-1">
      <small class="mobile:text-xs">Brand- of inbraakbeveiliging</small>
      <h2 class="mobile:text-base">Highlight title</h2>
    </div>
    <div class="card__footer | justify-self-end mobile:pr-5 mobile:pb-4">
      <a
        href="javascript: console.log('clicked highlight');"
        class="button button--primary button--icon | stretched-link"
      >
        <svg class="h-4 mobile:h-3 lg:h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
          <!-- SVG content -->
        </svg>
        <div class="sr-only">Open highlight title</div>
      </a>
    </div>
  </div>
</div>

<div class="grid grid-cols-cards gap-8">
  <div class="card--expertise card--expertise__theme | relative">
    <div class="icon--theme | absolute top-0 left-7 -translate-y-1/2 p-5">
      <svg class="h-8 lg:h-11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
        <!-- SVG content -->
      </svg>
    </div>
    <div class="card__header">
      <h2>Criminaliteit tegen het bedrijfsleven</h2>
    </div>
    <div class="card__content | space-y-5">
      <p>Lorem ipsum dolor sit amet</p>
      <ul class="list-links list-links--buttons">
        <li>
          <a href="javascript: console.log('clicked link');">
            <span>HIC-preventiewijzer HIC-preventiewijzer HIC-preventiewijzer</span>
            <svg
              class="icon | ml-auto translate-y-0.5 text-red-500 h-4"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
            >
              <!-- SVG content -->
            </svg>
          </a>
        </li>
        <li>
          <a href="javascript: console.log('clicked link');">
            <span>Overvallen</span>
            <svg
              class="icon | ml-auto translate-y-0.5 text-red-500 h-4"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
            >
              <!-- SVG content -->
            </svg>
          </a>
        </li>
        <li>
          <a href="javascript: console.log('clicked link');">
            <span>Straatroof</span>
            <svg
              class="icon | ml-auto translate-y-0.5 text-red-500 h-4"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
            >
              <!-- SVG content -->
            </svg>
          </a>
        </li>
      </ul>
      <p>
        <a href="javascript: console.log('clicked link');" class="button button--primary | w-full justify-center"
          >Bekijk alle</a
        >
      </p>
    </div>
  </div>
</div>