Banner

The v-banner component is used as middle-interruptive message to user with 1-2 actions. It comes in 2 variations single-line and multi-line (implicit). These can have icons which you can use with your message and actions.

Single Banner

My Document
We can't save your edits while you are in offline mode.

Simple Banner

Simple Banner

Rounded Banner

Rounded Banner

Tile Banner

Tile Banner

Shaped Banner

Shaped Banner

Outlined Banner

Outlined Banner

Dark Banner

Dark Banner

Elevated Banner

Elevated Banner

Events Banner (icon click)

Unable to verify your Internet connection

Actions Banner

No Internet connection

Icon Banner

Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.

Two line Banner

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus nec sem id malesuada. Curabitur lacinia sem et turpis euismod, eget elementum ex pretium.