Multi-line button with icon, title & description

<script setup lang="ts">
import { Button } from "@/components/ui/button"
</script>

<template>
  <Button
    variant="outline"
    class="group/button h-auto justify-start gap-3 px-4 py-3 text-left"
  >
    <div class="bg-muted text-accent-foreground group-hover/button:bg-background rounded-md flex size-10 items-center justify-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
        class="lucide lucide-credit-card size-5"
      >
        <rect width="20" height="14" x="2" y="5" rx="2" />
        <line x1="2" x2="22" y1="10" y2="10" />
      </svg>
    </div>
    <div class="flex flex-col gap-0.5">
      <span>Credit Card</span>
      <span class="text-muted-foreground text-xs font-normal">
        Pay securely with your Visa or Mastercard
      </span>
    </div>
  </Button>
</template>