Links

<a href="javascript: console.log('clicked link');" class="link | group">
  <span>Link text</span>
</a>

<a href="javascript: console.log('clicked outline link');" class="link link--outline | group">
  <svg
    class="aspect-square w-3 rotate-45 transition-transform group-hover:rotate-0"
    viewBox="0 0 16 16"
    xmlns="http://www.w3.org/2000/svg"
  >
    <!-- SVG content -->
  </svg>
  <strong>Terug naar kaart filter</strong>
</a>

<a href="javascript: console.log('clicked outline link');" class="link link--outline | group px-4 py-3">
  <svg class="accent-color-blue aspect-square w-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <!-- SVG content -->
  </svg>
  <span>Rapportage</span>
  <svg
    class="ml-auto aspect-square h-3.5 -rotate-45 transition-transform group-hover:rotate-0 group-hover:text-green-500"
    viewBox="0 0 16 16"
    xmlns="http://www.w3.org/2000/svg"
  >
    <!-- SVG content -->
  </svg>
</a>

<section class="grid space-y-2">
  <a href="javascript: console.log('clicked block link');" class="link link--outline | group px-4 py-3">
    <div>
      <h6 class="heading-6">Verhouding aantal soorten risico’s in de buurt</h6>
      <div class="link">
        <span class="font-semibold">Bekijk grafiek</span>
        <svg
          class="aspect-square h-3.5 -rotate-45 transition-transform group-hover:rotate-0"
          viewBox="0 0 16 16"
          xmlns="http://www.w3.org/2000/svg"
        >
          <!-- SVG content -->
        </svg>
      </div>
    </div>
  </a>
  <a href="javascript: console.log('clicked block link');" class="link link--outline | group px-4 py-3">
    <div>
      <h6 class="heading-6">Verhouding aantal soorten risico’s in de buurt</h6>
      <div class="link">
        <span class="font-semibold">Bekijk grafiek</span>
        <svg
          class="aspect-square h-3.5 -rotate-45 transition-transform group-hover:rotate-0"
          viewBox="0 0 16 16"
          xmlns="http://www.w3.org/2000/svg"
        >
          <!-- SVG content -->
        </svg>
      </div>
    </div>
  </a>
</section>