Promo

A promotional banner for highlighting Firefox features and benefits

Promo

Promo

Desktop Components library

MozPromo

Storybook

Usage

Use it for highlighting or explaining new or existing Firefox features or benefits.

Don't

Use it as a feedback messaging surface, use message bar instead

Example

Promo

Design properties

Property	Values	Default
Show heading Boolean	true \| false	true
Show actions Boolean	true \| false	true
Show image Boolean	true \| false	true
Image size Variant	Default \| Large	Default
Image display Variant	Cover \| Padded	Cover
Image position Variant	Left \| Right \| Bottom	Left
Actions position Variant	Block \| Inline	Block

Show heading

Displays an optional heading

Show actions

Displays an optional slot with a button and link.

Include at max 3 actions, whether it’s 2 buttons and a link or 3 buttons

Show image

Displays an optional slot for an image.

Variants

Image size

Promo

Image size Default

Promo

Image size Large

Image display

Promo

Image display Cover

Promo

Image display Padded

Image position

Promo

Image size Large Image position Bottom

Promo

Image size Large Image position Left

Promo

Image size Large Image position Right

Actions position

In contrast to inline, block layout elements take up a full line.

This variant only exists in Figma to accommodate a flexible layout

Promo

Actions position Block

Actions position Inline

Changelog

Date	Version	Notes
August 29, 2025	1.0.0	First release of Promo component documentation.