PvBanner

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

<template>
  <div class="pv-flex pv-flex-vertical">
    <span>Variant: Primary, Orientation: Horizontal</span>
    <PvBanner
      style="width: 300px"
      label="Super Long Banner Label Text. It should only take 2 lines no more!"
      icon="lightbulb"
      variant="Primary"
      orientation="Horizontal"
    >
      <template #action>
        <PvButton variant="secondary" size="small"> Cta </PvButton>
        <PvButton size="small"> Cta </PvButton>
      </template>
    </PvBanner>
    <span>Variant: Primary, Orientation: Vertical</span>
    <PvBanner
      style="width: 100%"
      label="Banner Label"
      icon="lightbulb"
      variant="Primary"
      orientation="Vertical"
    >
      <template #action>
        <PvButton variant="secondary" size="small"> Cta </PvButton>
        <PvButton size="small"> Cta </PvButton>
      </template>
    </PvBanner>
    <span>Variant: Secondary, Orientation: Horizontal</span>
    <PvBanner
      style="width: 100%"
      label="Banner Label"
      icon="lightbulb"
      variant="Secondary"
      orientation="Horizontal"
    >
      <template #action>
        <PvButton variant="secondary" size="small"> Cta </PvButton>
        <PvButton size="small"> Cta </PvButton>
      </template>
    </PvBanner>
    <span>Variant: Secondary, Orientation: Vertical</span>
    <PvBanner
      style="width: 200px"
      label="Super Long Banner Label Text. It should only take 2 lines no more!"
      icon="lightbulb"
      variant="Secondary"
      orientation="Vertical"
    >
      <template #action>
        <PvButton variant="secondary" size="small"> Cta </PvButton>
        <PvButton size="small"> Cta </PvButton>
      </template>
    </PvBanner>
    <span>Simple Banner</span>
    <PvBanner
      label="Super Long Banner Label Text. It should only take 2 lines no more!"
      variant="Secondary"
      orientation="Vertical"
    />
  </div>
</template>