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.
- 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
<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>
Last modified 2mo ago