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 Circular Progress Bar

<div class="bp-banner bg-primary--opacity">
  <div class="bp-banner--info p-a-40">
    <span class="bp-banner--info-heading medium-text-1 gray-dark-color">Lorem Ipsum</span>
    <span class="bp-banner--info-para para--one gray-dark-color">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </span>
    <button class="btn btn--small btn--white m-t-20">Button</button>     
  </div>
  <div class="bp-vertical-line m-a-10"></div>
  <div class="bp-banner--sidecol">
    <div class="progress--circular" aria-valuenow="0%" aria-valuemin="30" aria-valuemax="100" style="--progress: 30%;">
      <div class="progressbar-text gray-dark-color">
        <div class="medium-text-1">30/100</div>
        <div class="para--four">Activities<br/>Completed</div>
      </div>
    </div>
  </div>
</div>