Discount Ninja
Search
K
Comment on page

Announcement Bar

The announcement bar helps merchants to draw attention to promotions, communicate important announcements to customers and tells the customer what they need to do to unlock rewards.

Concepts

  • Bar: the component is represented by the bar element
  • Row: the bar component can contains one or two row components
    • Primary row: has exactly one slot, supports cycling
    • Secondary row:
      • Can have up to three slots, does not support cycling
      • Not displayed on mobile
  • Slot:
    • A cell in a row component that contains one or more messages
    • A slot can only contain multiple messages in a primary row
  • Indicator: a series of dots or lines that clarify which message is displayed in a slot
  • Message: a message consists of text (and optionally an icon or image) displayed in a slot

Example

<la-dn-announcement-bar animation-on-cycle="slide" animation-on-close="fade">
<la-dn-announcement-bar-row order="1">
<la-dn-announcement-bar-slot>
<la-dn-announcement-bar-message token="ABCD" active="true">
A first message
</la-dn-announcement-bar-message>
</la-dn-announcement-bar-slot>
<la-dn-announcement-bar-slot>
<la-dn-announcement-bar-message token="EFGH" active="true">
A second message
</la-dn-announcement-bar-message>
</la-dn-announcement-bar-slot>
<la-dn-announcement-bar-slot>
<la-dn-announcement-bar-message token="IJKL" active="true">
A third message
</la-dn-announcement-bar-message>
</la-dn-announcement-bar-slot>
</la-dn-announcement-bar-row>
<la-dn-announcement-bar-row primary="true" order="2" controls="true" indicators="true" cycle="true">
<la-dn-announcement-bar-slot>
<la-dn-announcement-bar-message token="MNOP" active="true">
A fourth message
</la-dn-announcement-bar-message>
<la-dn-announcement-bar-message token="QRST">
A fifth message
</la-dn-announcement-bar-message>
</la-dn-announcement-bar-slot>
</la-dn-announcement-bar-row>
</la-dn-announcement-bar>