Banner ​

<template>
  <p-banner>
    Every sign will requires privy balance.
    Please make sure you have enough privy balance
    before sign the document(s)
  </p-banner>
</template>

<template>
  <p-banner>
    <p-subheading>
      Your enterprise Privy Balance is running out.
    </p-subheading>
    <div class="text-sm">
      Every sign will requires privy balance. Please make sure you have enough privy balance before sign the document(s)
    </div>
  </p-banner>
</template>

<template>
  <p-banner>
    <p-subheading>
      Your enterprise Privy Balance is running out.
    </p-subheading>
    <div class="text-sm">
      Every sign will requires privy balance.
      Please make sure you have enough privy balance
      before sign the document(s)
    </div>
    <div class="mt-3">
      <p-button variant="outline" size="sm">Top Up Balance</p-button>
      <p-button variant="link">Learn More</p-button>
    </div>
  </p-banner>
</template>

<template>
  <p-banner>
    <template #icon>
      <IconCheck class="text-success" />
    </template>
    <span>
      Great! Your Privy ID and NPWP are verified.
    </span>
  </p-banner>

  <script setup>
  import IconCheck from '@privyid/persona-icon/vue/checkmark-circle-solid/20.vue'
  </script>
</template>

<template>
  <p-banner variant="info">
    Every sign will requires privy balance.
    Please make sure you have enough privy balance
    before sign the document(s)
  </p-banner>
  <p-banner variant="danger">
    Every sign will requires privy balance.
    Please make sure you have enough privy balance
    before sign the document(s)
  </p-banner>
</template>

<template>
  <p-banner :dismissable="false">
    Every sign will requires privy balance.
    Please make sure you have enough privy balance
    before sign the document(s)
  </p-banner>
</template>