Banner
Use a banner to communicate information to the user with an optional call to action or actions.
Example
A primary, secondary, and tertiary banner.
HTML
<div class="pv-banner-primary pv-space-between">
<div class="pv-flex">
<svg aria-hidden="true" class="pv-icon pv-text-brand">
<title>arrow-forward</title>
<use xlink:href="#arrow-forward"></use>
</svg>
<p class="pv-text-title-sm">Banner label</p>
</div>
<div class="pv-flex">
<button class="pv-button-ghost pv-button-small">CTA</button>
<button class="pv-button-primary pv-button-small">
<svg aria-hidden="true" class="pv-icon-16">
<title>lightbulb</title>
<use xlink:href="#lightbulb"></use>
</svg>
<span>CTA</span>
</button>
</div>
</div>
<div class="pv-banner-secondary pv-space-between">
<div class="pv-flex">
<svg aria-hidden="true" class="pv-icon pv-text-brand">
<title>arrow-forward</title>
<use xlink:href="#arrow-forward"></use>
</svg>
<p class="pv-text-title-sm">Banner label</p>
</div>
<div class="pv-flex">
<button class="pv-button-ghost pv-button-small">CTA</button>
<button class="pv-button-primary pv-button-small">
<svg aria-hidden="true" class="pv-icon-16">
<title>lightbulb</title>
<use xlink:href="#lightbulb"></use>
</svg>
<span>CTA</span>
</button>
</div>
</div>
<div class="pv-banner-tertiary pv-space-between">
<div class="pv-flex">
<svg aria-hidden="true" class="pv-icon pv-text-brand">
<title>arrow-forward</title>
<use xlink:href="#arrow-forward"></use>
</svg>
<p class="pv-text-title-sm">Banner label</p>
</div>
<div class="pv-flex">
<button class="pv-button-ghost pv-button-small">CTA</button>
<button class="pv-button-primary pv-button-small">
<svg aria-hidden="true" class="pv-icon-16">
<title>lightbulb</title>
<use xlink:href="#lightbulb"></use>
</svg>
<span>CTA</span>
</button>
</div>
</div>