Links

<a href="javascript: console.log('clicked link');" class="link link--cta | group text-red-500">
  <span>Link text</span>
  <svg
    class="w-3.5 group-hover:translate-x-1 transition-transform"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 16 16"
  >
    <!-- SVG content -->
  </svg>
</a>

<a href="javascript: console.log('clicked link');" class="link | group text-red-500 gap-3 md:gap-5">
  <span class="link__icon | p-2 bg-current rounded-full | group-hover:translate-x-1 transition-transform">
    <svg class="w-3.5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
      <!-- SVG content -->
    </svg>
  </span>
  <span>Link text</span>
</a>

<a href="javascript: console.log('clicked link');" class="link | text-blue-800 gap-3 leading-snug">
  <span class="link__icon | p-2 bg-red-500 rounded-full">
    <svg class="w-3.5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
      <!-- SVG content -->
    </svg>
  </span>
  <span class="link__label">Een bestandsnaam die heel erg lang is en misschien wel getruncated wordt</span>
</a>

<a href="javascript: console.log('clicked link');" class="link | text-blue-800 gap-3 leading-snug">
  <span class="link__icon | p-2.5 lg:p-3.5 bg-blue-100 rounded-full">
    <svg class="w-5 lg:w-7 text-blue-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
      <!-- SVG content -->
    </svg>
  </span>
  <span class="link__label">Churchilllaan 11, 3527 GV Utrecht</span>
</a>

<div class="flex flex-wrap gap-4">
  <article>
    <a href="javascript: console.log('clicked link');" class="link--block | leading-snug">
      <span>Cybercrime en Fraude</span>
      <div class="link__icon">
        <svg class="w-3 md:w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
          <!-- SVG content -->
        </svg>
      </div>
    </a>
  </article>

  <article>
    <a href="javascript: console.log('clicked link');" class="link--block" data-variant="red">
      <div class="link__icon | leading-snug">
        <svg class="w-3 md:w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
          <!-- SVG content -->
        </svg>
      </div>
      <span>Terug naar thema's</span>
    </a>
  </article>
</div>