Merge branch 'master' into card-stableselector

carbon-design-system · Dec 7, 2020 · 142d634 · 142d634
2 parents b0b9d7f + 55ac0c6
commit 142d634
Show file tree

Hide file tree

Showing 64 changed files with 181 additions and 155 deletions.
diff --git a/packages/web-components/examples/codesandbox/components/content-block-cards/index.html b/packages/web-components/examples/codesandbox/components/content-block-cards/index.html
@@ -63,7 +63,7 @@
                 </dds-card-cta-footer>
               </dds-card-group-item>
             </dds-card-group>
-            <dds-card-cta slot="cta" cta-type="local" href="https://www.ibm.com">
+            <dds-card-cta slot="footer" cta-type="local" href="https://www.ibm.com">
               <p>Lorem ipsum dolor sit ametttt</p>
               <svg slot="footer" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20">
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>

diff --git a/packages/web-components/examples/codesandbox/components/content-block-headlines/index.html b/packages/web-components/examples/codesandbox/components/content-block-headlines/index.html
@@ -32,7 +32,7 @@
                 >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
                 faster.</dds-content-item-copy
               >
-              <dds-link-list slot="cta" type="vertical">
+              <dds-link-list slot="footer" type="vertical">
                 <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                   Link text
                 </dds-link-list-item-cta>
@@ -44,7 +44,7 @@
                 >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
                 faster.</dds-content-item-copy
               >
-              <dds-link-list slot="cta" type="vertical">
+              <dds-link-list slot="footer" type="vertical">
                 <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                   Link text
                 </dds-link-list-item-cta>
@@ -53,7 +53,7 @@
             <dds-content-block-headlines-item slot="content">
               <dds-content-block-headlines-heading>1.34M</dds-content-block-headlines-heading>
               <dds-content-item-copy slot="copy">Save 1.34M per year by optimizing your time and IT expenses.</dds-content-item-copy>
-              <dds-link-list slot="cta" type="vertical">
+              <dds-link-list slot="footer" type="vertical">
                 <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                   Link text
                 </dds-link-list-item-cta>
@@ -65,7 +65,7 @@
                 >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
                 faster.</dds-content-item-copy
               >
-              <dds-link-list slot="cta" type="vertical">
+              <dds-link-list slot="footer" type="vertical">
                 <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                   Link text
                 </dds-link-list-item-cta>

diff --git a/packages/web-components/examples/codesandbox/components/content-block-segmented/index.html b/packages/web-components/examples/codesandbox/components/content-block-segmented/index.html
@@ -50,7 +50,7 @@
               </dds-image-with-caption>
               <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com">Lorem Ipsum dolor sit</dds-text-cta>
             </dds-content-block-segmented-item>
-            <dds-card-cta slot="cta" cta-type="local" href="https://example.com">
+            <dds-card-cta slot="footer" cta-type="local" href="https://example.com">
               Lorem ipsum dolor
               <dds-card-cta-footer></dds-card-cta-footer>
             </dds-card-cta>

diff --git a/packages/web-components/examples/codesandbox/components/content-block-simple/index.html b/packages/web-components/examples/codesandbox/components/content-block-simple/index.html
@@ -31,7 +31,7 @@
               <dds-image-item media="(min-width: 400px)" srcset="https://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616"></dds-image-item>
               <dds-image-item media="(min-width: 320px)" srcset="https://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616"></dds-image-item>
             </dds-image>
-            <dds-text-cta slot="cta" href="https://www.ibm.com/" type="local">Lorem ipsum dolor sit amet</dds-text-cta>
+            <dds-text-cta slot="footer" href="https://www.ibm.com/" type="local">Lorem ipsum dolor sit amet</dds-text-cta>
           </dds-content-block-simple>
         </div>
       </div>

diff --git a/packages/web-components/examples/codesandbox/components/content-group-horizontal/index.html b/packages/web-components/examples/codesandbox/components/content-group-horizontal/index.html
@@ -29,7 +29,7 @@
               <span slot="eyebrow">Lorem ipsum</span>
               <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>
               <dds-content-item-horizontal-copy>Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</dds-content-item-horizontal-copy>
-              <dds-link-list slot="cta" type="vertical">
+              <dds-link-list slot="footer" type="vertical">
                 <dds-link-list-item-cta
                   icon-placement="right"
                   href="https://www.ibm.com"

diff --git a/packages/web-components/examples/codesandbox/components/content-group-pictograms/index.html b/packages/web-components/examples/codesandbox/components/content-group-pictograms/index.html
@@ -56,7 +56,7 @@
               <dds-content-item-copy>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
               </dds-content-item-copy>
-              <dds-link-with-icon href="https://www.example.com" slot="cta">
+              <dds-link-with-icon href="https://www.example.com" slot="footer">
                 Aliquam condimentum interdum
                 <svg id="icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
                   <defs>

diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/index.html b/packages/web-components/examples/codesandbox/components/content-item-horizontal/index.html
@@ -27,7 +27,7 @@ <h1>Hello World! 👋</h1>
     <span slot="eyebrow">Lorem ipsum</span>
     <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>
     <dds-content-item-horizontal-copy>Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</dds-content-item-horizontal-copy>
-    <dds-link-list slot="cta" type="vertical">
+    <dds-link-list slot="footer" type="vertical">
       <dds-link-list-item-cta
         icon-placement="right"
         href="https://www.ibm.com"

diff --git a/packages/web-components/examples/codesandbox/components/cta-section/index.html b/packages/web-components/examples/codesandbox/components/cta-section/index.html
@@ -26,14 +26,14 @@
           <dds-cta-section>
             <dds-content-block-heading>Curabitur malesuada varius mi eu posuere</dds-content-block-heading>
             <dds-cta-section-copy>Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs.</dds-cta-section-copy>
-            <dds-button-group slot='buttons'>
-                <dds-button-group-item href="https://example.com">
-                  Primary Button
-                </dds-button-group-item>
-                <dds-button-group-item href="https://example.com">
-                  Primary button
-                </dds-button-group-item>
-              </dds-button-group>
+            <dds-button-group slot="action">
+              <dds-button-group-item href="https://example.com">
+                Primary Button
+              </dds-button-group-item>
+              <dds-button-group-item href="https://example.com">
+                Primary button
+              </dds-button-group-item>
+            </dds-button-group>
           </dds-cta-section>
         </div>
       </div>

diff --git a/packages/web-components/examples/codesandbox/components/pictogram-item/index.html b/packages/web-components/examples/codesandbox/components/pictogram-item/index.html
@@ -69,7 +69,7 @@ <h1>Hello World! 👋</h1>
     </svg>
     <dds-content-item-heading>Lorem ipsum dolor sit</dds-content-item-heading>
     <dds-content-item-copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</dds-content-item-copy>
-    <dds-link-with-icon slot="cta">
+    <dds-link-with-icon slot="footer">
       Lorem ipsum dolor
       <svg
         slot="icon"

diff --git a/packages/web-components/examples/codesandbox/usage/markdown-handlebars/index.hbs b/packages/web-components/examples/codesandbox/usage/markdown-handlebars/index.hbs
@@ -59,7 +59,7 @@ LICENSE file in the root directory of this source tree.
             <dds-image-item media="(min-width: 320px)"
               srcset="https://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616"></dds-image-item>
           </dds-image>
-          <dds-text-cta slot="cta" href="https://www.ibm.com/" type="local">Lorem ipsum dolor sit amet</dds-text-cta>
+          <dds-text-cta slot="footer" href="https://www.ibm.com/" type="local">Lorem ipsum dolor sit amet</dds-text-cta>
         </dds-content-block-simple>
       </div>
     </div>

diff --git a/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts b/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts
@@ -29,7 +29,7 @@ export const Default = ({ parameters }) => {
       <span slot="sourceBottomCopy">
         ${sourceBottomCopy}
       </span>
-      <dds-link-with-icon slot="cta" href="https://example.com">
+      <dds-link-with-icon slot="footer" href="https://example.com">
         Link with Icon ${ArrowRight20({ slot: 'icon' })}
       </dds-link-with-icon>
     </dds-callout-quote>

diff --git a/...eb-components/src/components/content-block-cards/__stories__/README.stories.mdx b/...eb-components/src/components/content-block-cards/__stories__/README.stories.mdx
@@ -71,7 +71,7 @@ import '@carbon/ibmdotcom-web-components/es/components/cta/video-cta-container.j
       </dds-card-cta-footer>
     </dds-card-group-item>
   </dds-card-group>
-  <dds-card-cta slot="cta" cta-type="local" href="https://www.ibm.com">
+  <dds-card-cta slot="footer" cta-type="local" href="https://www.ibm.com">
     <p>Lorem ipsum dolor sit ametttt</p>
     <svg slot="footer" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20">
       <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>

diff --git a/...-components/src/components/content-block-cards/__stories__/content-block-cards.stories.ts b/...-components/src/components/content-block-cards/__stories__/content-block-cards.stories.ts
@@ -74,7 +74,7 @@ export const Default = ({ parameters }) => {
       <dds-card-group slot="content">
         ${cardGroupItem} ${cardGroupItem} ${cardGroupItem} ${cardGroupItem} ${cardGroupItem}
       </dds-card-group>
-      <dds-card-cta slot="cta" cta-type="${ifNonNull(ctaType)}" href="${ifNonNull(href)}">
+      <dds-card-cta slot="footer" cta-type="${ifNonNull(ctaType)}" href="${ifNonNull(href)}">
         <p>${ctaCopy}</p>
         ${ArrowRight20({ slot: 'footer' })}
       </dds-card-cta>
@@ -91,7 +91,7 @@ export const withImages = ({ parameters }) => {
         ${cardGroupItemWithImages} ${cardGroupItemWithImages} ${cardGroupItemWithImages} ${cardGroupItemWithImages}
         ${cardGroupItemWithImages}
       </dds-card-group>
-      <dds-card-cta slot="cta" cta-type="${ifNonNull(ctaType)}" href="${ifNonNull(href)}">
+      <dds-card-cta slot="footer" cta-type="${ifNonNull(ctaType)}" href="${ifNonNull(href)}">
         <p>${ctaCopy}</p>
         ${ArrowRight20({ slot: 'footer' })}
       </dds-card-cta>
@@ -108,7 +108,7 @@ export const withVideos = ({ parameters }) => {
         ${cardGroupItemWithVideos} ${cardGroupItemWithVideos} ${cardGroupItemWithVideos} ${cardGroupItemWithVideos}
         ${cardGroupItemWithVideos}
       </dds-card-group>
-      <dds-card-cta slot="cta" cta-type="${ifNonNull(ctaType)}" href="${ifNonNull(href)}">
+      <dds-card-cta slot="footer" cta-type="${ifNonNull(ctaType)}" href="${ifNonNull(href)}">
         <p>${ctaCopy}</p>
         ${ArrowRight20({ slot: 'footer' })}
       </dds-card-cta>

diff --git a/...s/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts b/...s/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts
@@ -18,7 +18,7 @@ const template = (props?) => {
     <dds-content-block-cards>
       <dds-content-block-heading>${heading}</dds-content-block-heading>
       <dds-card-group>${children}</dds-card-group>
-      <dds-card-cta slot="cta" cta-type="${ifNonNull(ctaType)}" href="${ifNonNull(href)}">
+      <dds-card-cta slot="footer" cta-type="${ifNonNull(ctaType)}" href="${ifNonNull(href)}">
         <p>ctaCopy-foo</p>
         ${ArrowRight20({ slot: 'footer' })}
       </dds-card-cta>

diff --git a/...omponents/src/components/content-block-headlines/__stories__/README.stories.mdx b/...omponents/src/components/content-block-headlines/__stories__/README.stories.mdx
@@ -41,7 +41,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item/content-item
       >Modernize mission-critical applications and infrastructure in a hybrid
       multicloud environment up to 25 percent faster.</dds-content-item-copy
     >
-    <dds-link-list slot="cta" type="vertical">
+    <dds-link-list slot="footer" type="vertical">
       <dds-link-list-item-cta
         icon-placement="right"
         href="https://www.ibm.com"
@@ -59,7 +59,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item/content-item
       >Modernize mission-critical applications and infrastructure in a hybrid
       multicloud environment up to 25 percent faster.</dds-content-item-copy
     >
-    <dds-link-list slot="cta" type="vertical">
+    <dds-link-list slot="footer" type="vertical">
       <dds-link-list-item-cta
         icon-placement="right"
         href="https://www.ibm.com"
@@ -77,7 +77,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item/content-item
       >Save 1.34M per year by optimizing your time and IT
       expenses.</dds-content-item-copy
     >
-    <dds-link-list slot="cta" type="vertical">
+    <dds-link-list slot="footer" type="vertical">
       <dds-link-list-item-cta
         icon-placement="right"
         href="https://www.ibm.com"
@@ -95,7 +95,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item/content-item
       >Modernize mission-critical applications and infrastructure in a hybrid
       multicloud environment up to 25 percent faster.</dds-content-item-copy
     >
-    <dds-link-list slot="cta" type="vertical">
+    <dds-link-list slot="footer" type="vertical">
       <dds-link-list-item-cta
         icon-placement="right"
         href="https://www.ibm.com"

diff --git a/...nts/src/components/content-block-headlines/__stories__/content-block-headlines.stories.ts b/...nts/src/components/content-block-headlines/__stories__/content-block-headlines.stories.ts
@@ -23,7 +23,7 @@ const contentItemRow1 = html`
       >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
       faster.</dds-content-item-copy
     >
-    <dds-link-list slot="cta" type="vertical">
+    <dds-link-list slot="footer" type="vertical">
       <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
         Link text
       </dds-link-list-item-cta>
@@ -35,7 +35,7 @@ const contentItemRow2 = html`
   <dds-content-block-headlines-item>
     <dds-content-block-headlines-heading>1.34M</dds-content-block-headlines-heading>
     <dds-content-item-copy slot="copy">Save 1.34M per year by optimizing your time and IT expenses.</dds-content-item-copy>
-    <dds-link-list slot="cta" type="vertical">
+    <dds-link-list slot="footer" type="vertical">
       <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
         Link text
       </dds-link-list-item-cta>

diff --git a/...ges/web-components/src/components/content-block-headlines/content-block-headlines-item.ts b/...ges/web-components/src/components/content-block-headlines/content-block-headlines-item.ts
@@ -32,7 +32,7 @@ class DDSContentBlockHeadlinesItem extends StableSelectorMixin(DDSContentItem) {
     return html`
       <h4 class="bx--content-block-headlines__heading"><slot name="heading"></slot></h4>
       <p class="bx--content-block-headlines__copy"><slot name="copy"></slot></p>
-      <slot name="cta"></slot>
+      <slot name="footer"></slot>
     `;
   }
 

diff --git a/...eb-components/src/components/content-block-mixed/__stories__/README.stories.mdx b/...eb-components/src/components/content-block-mixed/__stories__/README.stories.mdx
@@ -80,7 +80,7 @@ import '@carbon/ibmdotcom-web-components/cta/card-cta-footer.js';
         </dds-card-cta-footer>
       </dds-card-group-item>
     </dds-card-group>
-    <dds-card-cta slot="cta" cta-type="local" href="https://www.ibm.com">
+    <dds-card-cta slot="footer" cta-type="local" href="https://www.ibm.com">
       <p>Lorem ipsum dolor sit ametttt</p>
       <svg slot="footer" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20">
         <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
@@ -97,7 +97,7 @@ import '@carbon/ibmdotcom-web-components/cta/card-cta-footer.js';
       </svg>
       <dds-content-item-heading>Lorem ipsum dolor sit amet</dds-content-item-heading>
       <dds-content-item-copy>Lorem ipsum dolor sit amet</dds-content-item-copy>
-      <dds-link-with-icon href="https://www.ibm.com/" slot="cta">
+      <dds-link-with-icon href="https://www.ibm.com/" slot="footer">
         Link text
         <svg slot="icon" ...>
           ...

diff --git a/...-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts b/...-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts
@@ -166,7 +166,7 @@ export const Default = ({ parameters }) => {
               </svg>
               <dds-content-item-heading>${itemHeading}</dds-content-item-heading>
               <dds-content-item-copy>${itemCopy}</dds-content-item-copy>
-              <dds-link-with-icon href="${linkWithIcon.href}" slot="cta">
+              <dds-link-with-icon href="${linkWithIcon.href}" slot="footer">
                 ${linkWithIcon.copy} ${ArrowRight20({ slot: 'icon' })}
               </dds-link-with-icon>
             </dds-pictogram-item>

diff --git a/...omponents/src/components/content-block-segmented/__stories__/README.stories.mdx b/...omponents/src/components/content-block-segmented/__stories__/README.stories.mdx
@@ -62,7 +62,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-segmented/c
         </dds-image-with-caption>
         <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com">Lorem Ipsum dolor sit</dds-text-cta>
       </dds-content-block-segmented-item>
-      <dds-card-cta slot="cta" cta-type="local" href="https://example.com">
+      <dds-card-cta slot="footer" cta-type="local" href="https://example.com">
         Lorem ipsum dolor
         <dds-card-cta-footer></dds-card-cta-footer>
       </dds-card-cta>

diff --git a/...nts/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts b/...nts/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts
@@ -112,12 +112,12 @@ export const Default = ({ parameters }) => {
       </dds-content-block-segmented-item>
       ${ctaStyle === 'text'
         ? html`
-            <dds-text-cta slot="cta" cta-type=${ctaType} icon-placement="right" href=${hrefsForType[ctaType]}
+            <dds-text-cta slot="footer" cta-type=${ctaType} icon-placement="right" href=${hrefsForType[ctaType]}
               >Lorem ipsum dolor</dds-text-cta
             >
           `
         : html`
-            <dds-card-cta slot="cta" cta-type=${ctaType} href=${hrefsForType[ctaType]}>
+            <dds-card-cta slot="footer" cta-type=${ctaType} href=${hrefsForType[ctaType]}>
               Lorem ipsum dolor
               <dds-card-cta-footer></dds-card-cta-footer>
             </dds-card-cta>
@@ -150,12 +150,12 @@ export const withVideo = ({ parameters }) => {
       </dds-content-block-segmented-item>
       ${ctaStyle === 'text'
         ? html`
-            <dds-text-cta slot="cta" cta-type=${ctaType} icon-placement="right" href=${hrefsForType[ctaType]}
+            <dds-text-cta slot="footer" cta-type=${ctaType} icon-placement="right" href=${hrefsForType[ctaType]}
               >Lorem ipsum dolor</dds-text-cta
             >
           `
         : html`
-            <dds-card-cta slot="cta" cta-type=${ctaType} href=${hrefsForType[ctaType]}>
+            <dds-card-cta slot="footer" cta-type=${ctaType} href=${hrefsForType[ctaType]}>
               Lorem ipsum dolor
               <dds-card-cta-footer></dds-card-cta-footer>
             </dds-card-cta>
@@ -201,12 +201,12 @@ export const withAsideElements = ({ parameters }) => {
       </dds-content-block-complementary>
       ${ctaStyle === 'text'
         ? html`
-            <dds-text-cta slot="cta" cta-type=${ctaType} icon-placement="right" href=${hrefsForType[ctaType]}
+            <dds-text-cta slot="footer" cta-type=${ctaType} icon-placement="right" href=${hrefsForType[ctaType]}
               >Lorem ipsum dolor</dds-text-cta
             >
           `
         : html`
-            <dds-card-cta slot="cta" cta-type=${ctaType} href=${hrefsForType[ctaType]}>
+            <dds-card-cta slot="footer" cta-type=${ctaType} href=${hrefsForType[ctaType]}>
               Lorem ipsum dolor
               <dds-card-cta-footer></dds-card-cta-footer>
             </dds-card-cta>

diff --git a/...mponents/src/components/content-block-segmented/__tests__/content-block-segmented.test.ts b/...mponents/src/components/content-block-segmented/__tests__/content-block-segmented.test.ts
@@ -47,7 +47,7 @@ describe('dds-content-block-segmented', function() {
             ${image}
             <dds-content-block-segmented-item> </dds-content-block-segmented-item>
             <dds-content-block-complementary> </dds-content-block-complementary>
-            <dds-card-cta slot="cta" cta-type="local" href="https://example.com">
+            <dds-card-cta slot="footer" cta-type="local" href="https://example.com">
               Lorem ipsum dolor
             </dds-card-cta>
           `,

diff --git a/...b-components/src/components/content-block-simple/__stories__/README.stories.mdx b/...b-components/src/components/content-block-simple/__stories__/README.stories.mdx
@@ -45,7 +45,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-simple/cont
     <dds-image-item media="(min-width: 320px)" srcset="http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616">
     </dds-image-item>
   </dds-image>
-  <dds-text-cta slot="cta" href="https://www.ibm.com/" type="local">Lorem ipsum dolor sit amet</dds-text-cta>
+  <dds-text-cta slot="footer" href="https://www.ibm.com/" type="local">Lorem ipsum dolor sit amet</dds-text-cta>
 </dds-content-block-simple>
 ```