Banner

Examples

<vega-banner id="banner" mode="inline" />

document.querySelector('vega-banner').source = [
                {
                    avatar: 'https://vega.hlprd.com/images/home/get-started.svg',
                    headline: 'Congratulations! You have been pre-qualified for a $20,000 Loan.',
                    description: `You can use the money to increase inventory, buy equipment, hire or pay employees, whatever you need to help your business grow and succeed.
There is no lengthy application, just a few clicks. Upon approval, you’ll receive funds in your account instantly.`,
                    ctaText: 'Learn More',
                    ctaURL: 'https://www.google.com/',
                    backgroundColor: '#CFCFCF',
                    showCloseButton: true,
                },
                {
                    headline: 'Congratulations! You have been pre-qualified for a $20,000 Loan.',
                    description: `You can use the money to increase inventory, buy equipment, hire or pay employees, whatever you need to help your business grow and succeed.
There is no lengthy application, just a few clicks. Upon approval, you’ll receive funds in your account instantly.`,
                    ctaText: 'Learn More',
                    ctaURL: 'https://www.google.com/',
                },
            ];


document.getElementById("banner").addEventListener("vegaClose", (e) => { console.log(e.detail) })

Example of sticky header mode

<vega-banner id="notification" mode="sticky-header" />

document.querySelector('#notification').source = [
                {
                    headline: 'Payroll System Maintenance Down Time',
                    description: `Payroll system will be down on Sunday, September 4, 2022 from 1:00AM EST to 4:00 AM EST for maintenance.`,
                    ctaText: 'Learn More',
                    ctaURL: 'https://www.google.com/',
                    backgroundColor: '#FFD469',
                    showCloseButton: true,
                },
            ];

Usage

The Banner is used for several purposes:

• They may provide upsell content to be used for marketing purposes.
• They may be used for creating alerts on a page, such as alerts, warnings, or informational notices.

There are several parameters which may be fed to the source property, including avatar (or an icon), the headline, the text, Call to action text and URL, a close button, and the background color.

The banner may have one or more panes which can be cycled through to provide more elaborate content.

Properties

Events

Clicking the close button on the vega-banner will throw a vegaClose event and return the clicked banner. The banner will not actually be hidden on the page. By listening to this event, you can customize the source property.

document.getElementById("banner").addEventListener("vegaClose", (e) => { console.log(e.detail) })

When loading the banner, the vegaLoad event will be dispatched.

document.getElementById("banner").addEventListener("vegaLoad", (e) => { console.log(e.target) })

When clicking and opening a call to action URL, the event vegaClickCOA is dispatched.

document.getElementById("banner").addEventListener("vegaClickCOA", (e) => { console.log(e.detail) })

For more details, view in Storybook.

Accessibility

• Required ARIA attributes must be provided.
• ARIA roles used must conform to valid values.
• Inline text spacing must be adjustable with custom stylesheets.
• Elements must have sufficient color contrast.
• id attribute value must be unique.
• Images must have alternate text.
• Interactive controls must not be nested.

Best Practices

• Banners are typically designed to stand out on the page. However, if there are too many on a page, they may overwhelm each other. They can also eventually cause users to simply tune them out. For this reason keep the number of banners to a minimum.

• Banners are designed to interrupt users. The level of interruption should mirror the importance of the message being delivered.

• Allow users to dismiss banners if they wish not to see them.