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>Universal
A universal banner with a colored accent bar on the left. Pair pv-banner-universal with one of pv-banner-accent-blue, pv-banner-accent-purple, pv-banner-accent-red, pv-banner-accent-yellow, or pv-banner-accent-green.
HTML
<div class="pv-banner-universal pv-banner-accent-blue 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-universal pv-banner-accent-purple 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-universal pv-banner-accent-red 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-universal pv-banner-accent-yellow 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-universal pv-banner-accent-green 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>AI
A fully rounded banner for AI-related messaging.
HTML
<div class="pv-banner-ai 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>Marketing
A banner with a turquoise gradient background for marketing messaging. Override the gradient with the --banner-marketing-background-image custom property.
HTML
<div class="pv-banner-marketing 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>