Boombox is used to nudge users towards secondary actions on the page


Small Boombox Gr
Medium Boombox Gr
Large Boombox Gr


Boombox is a louder alternative to a Whisperbox. It is more conspicuous and less likely to be overlooked. A good usage example would be to present users with the option of purchasing a certificate.

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


Boombox Banner

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.

Live example

Added by: