added support for callout texts along with the css for segment

web-components/src/global.css.js

@@ -127,6 +127,7 @@ styles.innerHTML = `
 
     --ellipsis-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="2" cy="2" r="2" fill="%232c2c2c" transform="translate(6 6)"/><circle cx="2" cy="2" r="2" fill="%232c2c2c" data-name="Ellipse 71" transform="translate(12 6)"/><circle cx="2" cy="2" r="2" fill="%232c2c2c" transform="translate(0 6)"/></svg>');
 
+    --consonant-merch-card-callout-background-color: #CBCBCB;
 }
 
 merch-card-collection {
@@ -237,6 +238,20 @@ merch-card [slot='heading-xl'] {
     color: var(--merch-color-grey-80);
 }
 
+merch-card [slot='body-xs'] .callout {
+    background: var(--consonant-merch-card-callout-background-color) 0% 0% no-repeat padding-box;
+    border-radius: 4px;
+    opacity: 0.5;
+    margin: 5px 2px;
+    padding: 0px 5px;
+    display: inline-flex;
+}
+
+merch-card [slot='body-xs'] .callout img {
+    margin: 1.5px 0px 0px 5px;
+    align-self: flex-start;
+}
+
 merch-card [slot='detail-m'] {
     font-size: var(--consonant-merch-card-detail-m-font-size);
     letter-spacing: var(--consonant-merch-card-detail-m-letter-spacing);

web-components/test/merch-card.test.html

@@ -676,14 +676,21 @@ <h4 slot="heading-xs">Acrobat Pro</h4>
             <merch-card class="merch-card background-opacity-70 segment badge-card" variant="segment" size=""
                 badge-background-color="#2D9D78" badge-color="#fff" badge-text="Save a lot" filters="all" types="" tabindex="0"
                 style="border: 1px solid rgb(45, 157, 120);">
-                <h3 id="merch-card-background-opacity-70-segment" class="card-heading" slot="heading-xs">merch-card aaa bbbccc dddeee bbbccc dddeee</h3>
+                <h3 id="merch-card-background-opacity-70-segment" class="card-heading" slot="heading-xs">Photoshop</h3>
                 <div slot="body-xs">
                     <p>Save over 25% on 20+ apps, including Photoshop, Illustrator, and more. First year only. Ends 27 here is an
                         inline price <span is="inline-price" data-display-old-price="true" data-display-per-unit="false"
                             data-display-recurrence="true" data-display-tax="false" data-force-tax-exclusive="false"
                             data-quantity="1" data-template="price"
                             data-wcs-osi="abm"></span>
                     </p>
+                    <p class="callout">AI Assistant add-on available <img src="./img/info-icon.svg"/></p>
+                    <div class="callout">
+                        <div>
+                            For a limited time pay <span is="inline-price" data-display-per-unit="false"
+                            data-display-recurrence="true" data-display-tax="false" data-wcs-osi="puf"></span> when you add 
+                        </div><img src="./img/info-icon.svg"/>
+                    </div>
                     <p><a href="https://www.adobe.com/creativecloud.html#cc-see-whats-included" target="_blank">See what's
                             included</a> | <a href="https://www.adobe.com/creativecloud/all-apps.html" target="_blank">Learn
                             more</a></p>