← Web Components

Web Components · Global

<mmm-flash-bar>

Site-wide announcement strip. Single string or rotating list of messages, with slide-by-slide or continuous marquee animation. Fully styleable with separate font / padding / height per breakpoint.

Overview

Two modes set by mode:

  • auto / slide — cycle through messages with a delay (slide-interval).
  • marquee — continuous horizontal scroll (marquee-speed, marquee-gap).

Single-message mode: pass text. Multiple messages: pass a JSON-array string via texts.

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-flash-bar
  text="Free shipping on orders over ₹999"
  background-color="#0e1011"
  text-color="#ffffff">
</mmm-flash-bar>

Attributes

AttributeTypeDefaultDescription
textstring—Single message.
textsJSON array—JSON-encoded array of messages for rotation.
modestringautoauto, static, slide, or marquee.
directionstringltrltr or rtl.
slide-intervalnumber3000Slide-mode delay between messages (ms).
slide-speednumber500Slide-mode animation duration (ms).
slide-directionstringleft (or right when RTL)Slide direction — left or right.
marquee-speedstring20sMarquee-mode full-loop duration (CSS time).
marquee-gapstring3remGap between messages in marquee mode.
text-colorstring#ffffffText colour.
font-sizestring14Default font size (px).
font-weightstring400Font weight.
font-familystringtheme description font / inheritFont family.
tablet-font-sizestringfont-sizeTablet override.
mobile-font-sizestring12Mobile override.
link-colorstringinheritInline-link colour inside the message.
link-hover-colorstringinheritInline-link hover colour.
background-colorstringtransparentStrip background.
paddingstring0.5rem 1remStrip padding.
tablet-paddingstringpaddingTablet override.
mobile-paddingstringpaddingMobile override.
heightstringautoStrip height.
min-heightstringautoStrip min-height.
tablet-heightstringheightTablet height.
mobile-heightstringheightMobile height.
tablet-min-heightstringmin-heightTablet min-height.
mobile-min-heightstringmin-heightMobile min-height.

Live preview

store sample-store tag <mmm-flash-bar>

Examples

1. Single static message

<mmm-flash-bar text="Free shipping on orders over ₹999"></mmm-flash-bar>

2. Rotating messages

<mmm-flash-bar
  texts='["Free shipping over ₹999","10% off first order","30-day returns"]'
  mode="slide"
  slide-interval="5000"
  background-color="#0e1011"
  text-color="#fff">
</mmm-flash-bar>

3. Continuous marquee

<mmm-flash-bar
  texts='["Welcome to Sample Store","Use code WELCOME10","Spring drop now live"]'
  mode="marquee"
  marquee-speed="30s"
  marquee-gap="5rem">
</mmm-flash-bar>