PvCard

<script setup lang="ts">
import PvCard from "./PvCard.vue";
import PvCompanyLogo from "@/components/base/PvCompanyLogo/PvCompanyLogo.vue";
</script>

<template>
  <div class="pv-text-title-md pv-stack-16">Vertical</div>
  <div style="width: 300px" class="pv-stack-16">
    <PvCard>
      <img
        src="https://assets.codepen.io/281/Rectangle+3091.png"
        alt=""
        class="pv-stack-12 pv-full-width"
      />
      <p class="pv-flex pv-text-body-md pv-stack-12" style="--flex-gap: 4px">
        <PvCompanyLogo size="sm" name="Aetna" />
        <span>Aetna</span>
      </p>
      <p class="pv-text-title-lg pv-stack-8">
        Healthcare Price Transparency Could Save $1 Trillion
      </p>
      <p class="pv-text-body-md pv-text-subdued pv-stack-12">
        Description Label
      </p>
      <p class="pv-text-body-md pv-text-subdued">02/21/25</p>
    </PvCard>
  </div>
  <div class="pv-text-title-md pv-stack-16">Horizontal</div>
  <div style="width: 300px" class="pv-stack-16">
    <PvCard href="https://turquoise.health">
      <p class="pv-flex pv-text-body-md pv-stack-4" style="--flex-gap: 4px">
        <PvCompanyLogo size="sm" name="Aetna" />
        <span>Aetna</span>
      </p>
      <div class="pv-flex pv-stack-4">
        <p class="pv-text-title-lg">
          Healthcare Price Transparency Could Save $1 Trillion
        </p>
        <img
          src="https://assets.codepen.io/281/Rectangle+3091.png"
          alt=""
          width="72"
          height="72"
        />
      </div>
      <p class="pv-text-body-md pv-text-subdued">Description Label</p>
      <p class="pv-text-body-md pv-text-subdued">02/21/25</p>
    </PvCard>
  </div>
</template>