Banners

Alerts are typically used to provide feedback to a user when filling out a form or as a page-level notice/alert. These can also be general and used in cards, accordions, etc.

Highlight Banners

Used to give high-level announcements to users. Typically remains on every page.

Announcement



HTML
<div class="banner banner-white-violet banner-arrow text-semibold">
  <p>Important update on Change Healthcare data breach, credit monitoring/identity protection.</p>
</div>



HTML
<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>



HTML
<div class="banner banner-violet-white banner-arrow text-semibold">
  <p>Important update on Change Healthcare data breach, credit monitoring/identity protection.</p>
</div>



Counter



HTML
<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>



Marketing



HTML
<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>



HTML
<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>



HTML
<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>



HTML
<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>



Specialty Banner


HTML
<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>



Flag Icons



Pride


Pride
<img src="icons/flag-pride.svg" alt="Pride" />

Juneteenth


Juneteenth
<img src="icons/flag-juneteenth.svg" alt="Juneteenth" />

USA


USA
<img src="icons/flag-usa.svg" alt="USA" />

Breast Cancer


Breast Cancer
<img src="icons/flag-breast-cancer.svg" alt="Breast Cancer" />