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 Default

<div class="bp-banner bg-primary">
    <div class="bp-banner--info p-a-40">
        <span class="bp-banner--info-heading medium-text-1">Lorem Ipsum</span>
        <span class="bp-banner--info-para para--two">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </span>
        <button class="btn btn--small btn--white m-t-20">Button</button>     
    </div>
    <div class="bp-banner--image" style="background-image:url(./assets/component-images/411x225.svg);">
    </div>
</div>