Used to give high-level announcements to users. Typically remains on every page.
<div class="banner banner-white-violet banner-arrow text-semibold">
<p>Important update on Change Healthcare data breach, credit monitoring/identity protection.</p>
</div>
<div class="banner banner-white-violet banner-arrow text-semibold">
<i class="fa-regular fa-gift"></i>
<p><a href="#">CLICK HERE</a> for information about the Coronavirus (COVID-19) and Viva Health.</p>
</div>
<div class="banner banner-violet-white banner-arrow text-semibold">
<p>Important update on Change Healthcare data breach, credit monitoring/identity protection.</p>
</div>
<div class="banner banner-cadet banner-mobile-vertical">
<div class="row align-items-center">
<div class="run-counter">
<div class="run-counter-item">
<span class="run-counter-days">03</span>
<span class="run-counter-text">Days</span>
</div>
<div class="run-counter-item">
<span class="run-counter-hours">07</span>
<span class="run-counter-text">Hours</span>
</div>
<div class="run-counter-item">
<span class="run-counter-min">03</span>
<span class="run-counter-text">Min</span>
</div>
<div class="run-counter-item">
<span class="run-counter-sec">03</span>
<span class="run-counter-text">Sec</span>
</div>
</div>
<p class="text-semibold">AEP Starts in 3 days! View Viva Medicare plans now!</p>
</div>
<a href="#" class="btn btn-secondary">Learn More</a>
</div>
<div class="banner banner-teal-white banner-mobile-vertical">
<div class="row align-items-center">
<div class="banner-img"><img src="img/banners/paperSmall.svg" alt="" /></div>
<p>Download our <strong>FREE Making Medicare Easy Guide</strong> now, and get your Medicare questions answered today!</p>
</div>
<a href="#" class="btn btn-white">Learn More</a>
</div>
<div class="banner banner-teal-white banner-mobile-vertical">
<div class="row align-items-center">
<div class="banner-img"><img src="img/banners/paperLarge.svg" alt="" /></div>
<div>
<h4>Title Goes Here</h4>
<p>Download our <strong>FREE Making Medicare Easy Guide</strong>, and get your Medicare questions answered today!</p>
</div>
</div>
<a href="#" class="btn btn-white">Learn More</a>
</div>
<div class="banner banner-teal-white">
<div class="banner-dots">
<span>$0 Medicare Plans</span>
<span>Worldwide Emergency Coverage</span>
<span>Vision & Dental Benefits</span>
<span>And More!</span>
</div>
</div>
<div class="banner banner-teal-white banner-mobile-vertical">
<i class="fa-regular fa-gift"></i>
<div class="banner-dots">
<span>$0 Medicare Plans</span>
<span>Worldwide Emergency Coverage</span>
<span>Vision & Dental Benefits</span>
</div>
<a href="#" class="btn btn-white">Learn More</a>
</div>
<div class="banner banner-specialty">
<div class="banner-flag">
<img src="icons/flag-pride.svg" alt="Pride" />
</div>
<div>
<h3>
Recognizing and celebrating Pride Month <br />
Second Line Title Goes Here
</h3>
<p>
Promoting love, respect, and equity for all. Promoting love, respect, and equity for all. Promoting love, respect. <br />
There can be a second or third line too. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>