<c-vars
  color="primary"
  base_class="relative flex flex-col overflow-hidden rounded-lg shadow hover:shadow-lg transition-all duration-300 ease-in-out"
  footer_class="flex justify-end"
  slot_class="p-4 flex-grow" />

<div class="{{ base_class }} bg-surface {{ class }}">
  {% if title or menu %}
  <div class="flex items-center justify-between p-4 pb-2">
    <div class="flex-grow">
      {% if title %}
      <h3 class="text-lg font-medium">{{ title }}</h3>
      {% endif %}
      {% if subtitle %}
      <