A banner is a prominent message area used for announcements, alerts, promotions, or important notices. It can include icons, buttons, dismiss actions, and animations for better engagement.

Banner With Text Image Card

<div class="bp-banner bg-primary">
  <div class="bp-banner--info">
    <span class="bp-banner--info-heading medium-text-1 text-light">Congratulation Lorem Ipsum!</span>
    <span class="bp-banner--info-para para--two text-light">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </span>
    <button class="btn btn--small btn--white m-t-20 m-r-10"><span class="text-weight-semibold">Button</span></button>
    <button class="btn btn--small btn--white m-t-20"><span class="text-weight-semibold">Button</span></button>
  </div>
  <div class="bp-banner--card">
    <img src="./assets/component-images/certificate-size.svg" />
  </div>
</div>