Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Boombox

A louder alternative to a Whisperbox that is used to nudge users towards secondary actions on the page, such as purchasing a Certificate, but in a way that's more conspicuous and less likely to be overlooked.

Boombox has to be placed the end of the page. It has low contrast typography and a dark grey background.

An alternative implementation of the boombox is the "Boombox Banner" which is for a simpler, banner-style layout with an image, single paragraph of text and a call to action (for example a ghost button).

The Boombox Banner has two modifiers: --intense, which changes the colour scheme to a more eye-catching white on pink, and --ribbon which sets the image to the correct width when it's an SVG ribbon.

= molecule('boombox-banner', variant: ['intense', 'ribbon'], content: { image_src: image_path('upgraded_access/ribbon-upgrade.svg'), image_alt: '', copy: "You can upgrade this course for the full range of benefits.For £59 you'll get unlimited access, access to tests and a Certificate of Achievement when you complete the course.", cta_button: link_to('Upgrade', '#', class: 'a-button a-button--boss a-button--ghost a-button--ghost--inverse') })