diff --git a/packages/styles/scss/components/card/index.scss b/packages/styles/scss/components/card/index.scss
index a1a0b3dbd5b..18c1363a33e 100644
--- a/packages/styles/scss/components/card/index.scss
+++ b/packages/styles/scss/components/card/index.scss
@@ -16,7 +16,8 @@
   :host(#{$dds-prefix}-card),
   :host(#{$dds-prefix}-link-list-item-card),
   :host(#{$dds-prefix}-card-group-item) .#{$prefix}--card,
-  :host(#{$dds-prefix}-card-cta) {
+  :host(#{$dds-prefix}-card-cta),
+  :host(#{$dds-prefix}-link-list-item-card-cta) {
     background-color: $ui-01;
     text-decoration: none;
     display: flex;
diff --git a/packages/styles/scss/components/link-list/_link-list.scss b/packages/styles/scss/components/link-list/_link-list.scss
index 5d58ecaadd5..438ff6b97df 100644
--- a/packages/styles/scss/components/link-list/_link-list.scss
+++ b/packages/styles/scss/components/link-list/_link-list.scss
@@ -15,6 +15,7 @@
   }
 
   :host(#{$dds-prefix}-link-list-item-card),
+  :host(#{$dds-prefix}-link-list-item-card-cta),
   .#{$prefix}--link-list {
     .#{$prefix}--card {
       max-width: none;
@@ -74,6 +75,8 @@
   .#{$prefix}--link-list__list--horizontal {
     ::slotted(#{$dds-prefix}-link-list-item),
     ::slotted(#{$dds-prefix}-link-list-item-card),
+    ::slotted(#{$dds-prefix}-link-list-item-cta),
+    ::slotted(#{$dds-prefix}-link-list-item-card-cta),
     .#{$prefix}--link-list__list__CTA {
       float: left;
       padding-right: $carbon--spacing-07;
@@ -88,6 +91,8 @@
   .#{$prefix}--link-list__list--vertical {
     ::slotted(#{$dds-prefix}-link-list-item),
     ::slotted(#{$dds-prefix}-link-list-item-card),
+    ::slotted(#{$dds-prefix}-link-list-item-cta),
+    ::slotted(#{$dds-prefix}-link-list-item-card-cta),
     .#{$prefix}--link-list__list__CTA {
       padding-bottom: $carbon--spacing-05;
 
@@ -99,6 +104,7 @@
 
   .#{$prefix}--link-list__list--vertical-end {
     ::slotted(#{$dds-prefix}-link-list-item),
+    ::slotted(#{$dds-prefix}-link-list-item-cta),
     .#{$prefix}--link-list__list__CTA .#{$prefix}--link-with-icon__container {
       @include carbon--make-col-ready;
 
@@ -128,6 +134,7 @@
   }
 
   :host(#{$dds-prefix}-link-list-item-card),
+  :host(#{$dds-prefix}-link-list-item-card-cta),
   .#{$prefix}--link-list__list__CTA {
     &.#{$prefix}--link-list__list--video .#{$prefix}--card__footer span {
       color: $link-01;
@@ -135,6 +142,7 @@
   }
 
   :host(#{$dds-prefix}-link-list-item-card),
+  :host(#{$dds-prefix}-link-list-item-card-cta),
   .#{$prefix}--link-list__list--card .#{$prefix}--link-list__list__CTA {
     max-width: carbon--mini-units(80);
     border-top: 1px solid $ui-03;
@@ -145,6 +153,7 @@
   }
 
   :host(#{$dds-prefix}-link-list-item-card),
+  :host(#{$dds-prefix}-link-list-item-card-cta),
   .#{$prefix}--link-list__list--card .#{$prefix}--link-list__list__CTA div {
     .#{$prefix}--tile {
       margin-left: 0;
diff --git a/packages/styles/scss/components/link-with-icon/_link-with-icon.scss b/packages/styles/scss/components/link-with-icon/_link-with-icon.scss
index 4f114a7ba60..c776f690893 100644
--- a/packages/styles/scss/components/link-with-icon/_link-with-icon.scss
+++ b/packages/styles/scss/components/link-with-icon/_link-with-icon.scss
@@ -14,6 +14,7 @@
   .#{$prefix}--link-with-icon,
   :host(#{$dds-prefix}-link-with-icon),
   :host(#{$dds-prefix}-link-list-item),
+  :host(#{$dds-prefix}-link-list-item-cta),
   :host(#{$dds-prefix}-text-cta) {
     display: flex;
 
@@ -41,18 +42,18 @@
         }
       }
     }
+  }
 
-    &.#{$prefix}--link-with-icon__icon-left {
-      justify-content: flex-end;
-      flex-direction: row-reverse;
+  .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon__icon-left {
+    justify-content: flex-end;
+    flex-direction: row-reverse;
 
-      svg {
-        align-self: start;
-        position: relative;
-        top: 1px;
-        margin-left: 0;
-        margin-right: $carbon--spacing-03;
-      }
+    svg {
+      align-self: start;
+      position: relative;
+      top: 1px;
+      margin-left: 0;
+      margin-right: $carbon--spacing-03;
     }
   }
 
@@ -62,15 +63,6 @@
     &:not(:first-of-type) {
       margin-left: $carbon--spacing-07;
     }
-
-    .#{$prefix}--link-with-icon__icon-left::slotted(svg[slot='icon']) {
-      margin-right: $carbon--spacing-03;
-      margin-left: 0;
-    }
-    .#{$prefix}--link-with-icon__icon-right::slotted(svg[slot='icon']) {
-      margin-left: $carbon--spacing-03;
-      margin-right: 0;
-    }
   }
 
   .#{$prefix}--link-with-icon__container {
diff --git a/packages/web-components/src/components/card-link/card-link.scss b/packages/web-components/src/components/card-link/card-link.scss
index d023d7ec7f4..f191778f166 100644
--- a/packages/web-components/src/components/card-link/card-link.scss
+++ b/packages/web-components/src/components/card-link/card-link.scss
@@ -12,14 +12,11 @@
 @import '@carbon/ibmdotcom-styles/scss/components/card-link/card-link';
 
 :host(#{$dds-prefix}-card-link),
-:host(#{$dds-prefix}-link-list-item-card) {
+:host(#{$dds-prefix}-link-list-item-card),
+:host(#{$dds-prefix}-link-list-item-card-cta) {
   .#{$prefix}--card__wrapper {
     .#{$prefix}--card__copy {
       flex: 1;
     }
-
-    ::slotted(svg[slot='footer']) {
-      fill: $link-01;
-    }
   }
 }
diff --git a/packages/web-components/src/components/card/card-footer.ts b/packages/web-components/src/components/card/card-footer.ts
index 2059c34fea0..1f4fc062845 100644
--- a/packages/web-components/src/components/card/card-footer.ts
+++ b/packages/web-components/src/components/card/card-footer.ts
@@ -68,6 +68,16 @@ class DDSCardFooter extends DDSLinkWithIcon {
     `;
   }
 
+  protected _renderInner() {
+    return this.iconPlacement === ICON_PLACEMENT.LEFT
+      ? html`
+          ${this._renderIcon()}${this._renderContent()}
+        `
+      : html`
+          ${this._renderContent()}${this._renderIcon()}
+        `;
+  }
+
   /**
    * The color scheme.
    */
diff --git a/packages/web-components/src/components/cta/link-list-item-card-cta.ts b/packages/web-components/src/components/cta/link-list-item-card-cta.ts
new file mode 100644
index 00000000000..313ce77a9f2
--- /dev/null
+++ b/packages/web-components/src/components/cta/link-list-item-card-cta.ts
@@ -0,0 +1,44 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html, css, customElement } from 'lit-element';
+import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import DDSCardCTA from './card-cta';
+import styles from '../link-list/link-list.scss';
+
+const { stablePrefix: ddsPrefix } = ddsSettings;
+
+/**
+ * Link list item card CTA.
+ *
+ * @element dds-link-list-item-card-cta
+ */
+@customElement(`${ddsPrefix}-link-list-item-card-cta`)
+class DDSLinkListItemCardCTA extends DDSCardCTA {
+  protected _renderImage() {
+    // Link list doesn't show video thumbnail in card
+    return html`
+      <slot name="image" @slotchange="${this._handleSlotChange}"></slot>
+    `;
+  }
+
+  connectedCallback() {
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'listitem');
+    }
+    super.connectedCallback();
+  }
+
+  // `styles` here is a `CSSResult` generated by custom WebPack loader
+  static get styles() {
+    return css`${super.styles}${styles}`;
+  }
+}
+
+export default DDSLinkListItemCardCTA;
diff --git a/packages/web-components/src/components/cta/link-list-item-cta.ts b/packages/web-components/src/components/cta/link-list-item-cta.ts
new file mode 100644
index 00000000000..706181739aa
--- /dev/null
+++ b/packages/web-components/src/components/cta/link-list-item-cta.ts
@@ -0,0 +1,37 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css, customElement } from 'lit-element';
+import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import DDSTextCTA from './text-cta';
+import styles from '../link-list/link-list.scss';
+
+const { stablePrefix: ddsPrefix } = ddsSettings;
+
+/**
+ * Link list item CTA.
+ *
+ * @element dds-link-list-item-cta
+ */
+@customElement(`${ddsPrefix}-link-list-item-cta`)
+class DDSLinkListItemCTA extends DDSTextCTA {
+  connectedCallback() {
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'listitem');
+    }
+    super.connectedCallback();
+  }
+
+  // `styles` here is a `CSSResult` generated by custom WebPack loader
+  static get styles() {
+    return css`${super.styles}${styles}`;
+  }
+}
+
+export default DDSLinkListItemCTA;
diff --git a/packages/web-components/src/components/link-list/__stories__/link-list.stories.ts b/packages/web-components/src/components/link-list/__stories__/link-list.stories.ts
index 5df2c960cc7..f965cd22473 100644
--- a/packages/web-components/src/components/link-list/__stories__/link-list.stories.ts
+++ b/packages/web-components/src/components/link-list/__stories__/link-list.stories.ts
@@ -9,146 +9,332 @@
 
 import { html } from 'lit-element';
 import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20';
+import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js';
+import { select } from '@storybook/addon-knobs';
+import textNullable from '../../../../.storybook/knob-text-nullable';
+import { CTA_TYPE } from '../../cta/shared-enums';
+import { ICON_PLACEMENT } from '../../link-with-icon/link-with-icon';
+import '../../cta/video-cta-container';
+import '../../cta/link-list-item-cta';
+import '../../cta/link-list-item-card-cta';
+import '../../card/card-footer';
 import '../link-list';
 import '../link-list-item';
 import '../link-list-item-card';
-import { select } from '@storybook/addon-knobs';
 import readme from './README.stories.mdx';
 
 const placement = {
-  left: 'left',
-  right: 'right',
+  [ICON_PLACEMENT.LEFT]: ICON_PLACEMENT.LEFT,
+  [ICON_PLACEMENT.RIGHT]: ICON_PLACEMENT.RIGHT,
+};
+
+const hrefsForType = {
+  [CTA_TYPE.REGULAR]: 'https://www.example.com',
+  [CTA_TYPE.LOCAL]: 'https://www.example.com',
+  [CTA_TYPE.JUMP]: '#example',
+  [CTA_TYPE.EXTERNAL]: 'https://www.example.com',
+  [CTA_TYPE.DOWNLOAD]: 'https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf',
+  [CTA_TYPE.VIDEO]: '1_9h94wo6b',
+};
+
+const knobNamesForType = {
+  [CTA_TYPE.REGULAR]: 'Content link href (href)',
+  [CTA_TYPE.LOCAL]: 'Content link href (href)',
+  [CTA_TYPE.JUMP]: 'Anchor href (href)',
+  [CTA_TYPE.EXTERNAL]: 'Content link href (href)',
+  [CTA_TYPE.DOWNLOAD]: 'Download link href (href)',
+  [CTA_TYPE.VIDEO]: 'Video ID (href)',
 };
 
-export const Default = () => {
-  return html`
-    <dds-link-list type="default">
-      <span slot="heading">Tutorial</span>
-      <dds-link-list-item-card href="https://example.com">
-        <p>Learn more</p>
-        ${ArrowRight20({ slot: 'footer' })}
-      </dds-link-list-item-card>
-      <dds-link-list-item-card href="https://example.com">
-        <p>Containerization A Complete Guide</p>
-        ${ArrowRight20({ slot: 'footer' })}
-      </dds-link-list-item-card>
-    </dds-link-list>
-  `;
+const types = {
+  None: null,
+  [`Local (${CTA_TYPE.LOCAL})`]: CTA_TYPE.LOCAL,
+  [`Jump (${CTA_TYPE.JUMP})`]: CTA_TYPE.JUMP,
+  [`External (${CTA_TYPE.EXTERNAL})`]: CTA_TYPE.EXTERNAL,
+  [`Download (${CTA_TYPE.DOWNLOAD})`]: CTA_TYPE.DOWNLOAD,
+  [`Video (${CTA_TYPE.VIDEO})`]: CTA_TYPE.VIDEO,
+};
+
+export const Default = ({ parameters }) => {
+  const { ctaType, download, href } = parameters?.props?.LinkListItem ?? {};
+  return !ctaType
+    ? html`
+        <dds-link-list type="default">
+          <span slot="heading">Tutorial</span>
+          <dds-link-list-item-card href="https://example.com">
+            <p>Learn more</p>
+            <dds-card-footer>
+              ${ArrowRight20({ slot: 'icon' })}
+            </dds-card-footer>
+          </dds-link-list-item-card>
+          <dds-link-list-item-card href="https://example.com">
+            <p>Containerization A Complete Guide</p>
+            <dds-card-footer>
+              ${ArrowRight20({ slot: 'icon' })}
+            </dds-card-footer>
+          </dds-link-list-item-card>
+        </dds-link-list>
+      `
+    : html`
+        <dds-link-list type="default">
+          <span slot="heading">Tutorial</span>
+          <dds-link-list-item-card-cta
+            href="${ifNonNull(href)}"
+            cta-type="${ifNonNull(ctaType)}"
+            download="${ifNonNull(download)}"
+          >
+            <p>Learn more</p>
+            <dds-card-cta-footer></dds-card-cta-footer>
+          </dds-link-list-item-card-cta>
+          <dds-link-list-item-card-cta
+            href="${ifNonNull(href)}"
+            cta-type="${ifNonNull(ctaType)}"
+            download="${ifNonNull(download)}"
+          >
+            <p>Containerization A Complete Guide</p>
+            <dds-card-cta-footer></dds-card-cta-footer>
+          </dds-link-list-item-card-cta>
+        </dds-link-list>
+      `;
 };
 
 Default.story = {
   parameters: {
     colLgClass: 'bx--col-lg-3',
+    knobs: {
+      LinkListItem: ({ groupId }) => {
+        const ctaType = select('CTA type (cta-type)', types, null, groupId);
+        const download =
+          ctaType !== CTA_TYPE.DOWNLOAD
+            ? undefined
+            : textNullable('Download target (download)', 'IBM_Annual_Report_2019.pdf', groupId);
+        return {
+          ctaType,
+          download,
+          href: textNullable(knobNamesForType[ctaType ?? CTA_TYPE.REGULAR], hrefsForType[ctaType ?? CTA_TYPE.REGULAR], groupId),
+        };
+      },
+    },
   },
 };
 
 export const Horizontal = ({ parameters }) => {
-  const { iconPlacement } = parameters?.props?.LinkList ?? { iconPlacement: 'left' };
-  return html`
-    <dds-link-list type="horizontal">
-      <span slot="heading">Tutorial</span>
-      <dds-link-list-item icon-placement="${iconPlacement}" href="https://example.com">
-        Learn more ${ArrowRight20({ slot: 'icon' })}
-      </dds-link-list-item>
-      <dds-link-list-item icon-placement="${iconPlacement}" href="https://example.com">
-        Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })}
-      </dds-link-list-item>
-    </dds-link-list>
-  `;
+  const { ctaType, download, href, iconPlacement = ICON_PLACEMENT.LEFT } = parameters?.props?.LinkListItem ?? {};
+  return !ctaType
+    ? html`
+        <dds-link-list type="horizontal">
+          <span slot="heading">Tutorial</span>
+          <dds-link-list-item icon-placement="${iconPlacement}" href="https://example.com">
+            Learn more ${ArrowRight20({ slot: 'icon' })}
+          </dds-link-list-item>
+          <dds-link-list-item icon-placement="${iconPlacement}" href="https://example.com">
+            Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })}
+          </dds-link-list-item>
+        </dds-link-list>
+      `
+    : html`
+        <dds-link-list type="horizontal">
+          <span slot="heading">Tutorial</span>
+          <dds-link-list-item-cta
+            icon-placement="${iconPlacement}"
+            href="${ifNonNull(href)}"
+            cta-type="${ifNonNull(ctaType)}"
+            download="${ifNonNull(download)}"
+          >
+            Learn more
+          </dds-link-list-item-cta>
+          <dds-link-list-item-cta
+            icon-placement="${iconPlacement}"
+            href="${ifNonNull(href)}"
+            cta-type="${ifNonNull(ctaType)}"
+            download="${ifNonNull(download)}"
+          >
+            Containerization A Complete Guide
+          </dds-link-list-item-cta>
+        </dds-link-list>
+      `;
 };
 
 Horizontal.story = {
   parameters: {
     colLgClass: 'bx--col-lg-10',
     knobs: {
-      LinkList: ({ groupId }) => ({
-        iconPlacement: select('Icon Placement (icon-placement)', placement, placement.left, groupId),
-      }),
+      LinkListItem: ({ groupId }) => {
+        const ctaType = select('CTA type (cta-type)', types, null, groupId);
+        const download =
+          ctaType !== CTA_TYPE.DOWNLOAD
+            ? undefined
+            : textNullable('Download target (download)', 'IBM_Annual_Report_2019.pdf', groupId);
+        return {
+          iconPlacement: select('Icon Placement (icon-placement)', placement, ICON_PLACEMENT.LEFT, groupId),
+          ctaType,
+          download,
+          href: textNullable(knobNamesForType[ctaType ?? CTA_TYPE.REGULAR], hrefsForType[ctaType ?? CTA_TYPE.REGULAR], groupId),
+        };
+      },
     },
   },
 };
 
 export const Vertical = ({ parameters }) => {
-  const { iconPlacement } = parameters?.props?.LinkList ?? { iconPlacement: 'left' };
-  return html`
-    <dds-link-list type="vertical">
-      <span slot="heading">Tutorial</span>
-      <dds-link-list-item icon-placement="${iconPlacement}" href="https://example.com">
-        Learn more ${ArrowRight20({ slot: 'icon' })}
-      </dds-link-list-item>
-      <dds-link-list-item icon-placement="${iconPlacement}" href="https://example.com">
-        Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })}
-      </dds-link-list-item>
-    </dds-link-list>
-  `;
+  const { ctaType, download, href, iconPlacement = ICON_PLACEMENT.LEFT } = parameters?.props?.LinkListItem ?? {};
+  return !ctaType
+    ? html`
+        <dds-link-list type="vertical">
+          <span slot="heading">Tutorial</span>
+          <dds-link-list-item icon-placement="${iconPlacement}" href="https://example.com">
+            Learn more ${ArrowRight20({ slot: 'icon' })}
+          </dds-link-list-item>
+          <dds-link-list-item icon-placement="${iconPlacement}" href="https://example.com">
+            Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })}
+          </dds-link-list-item>
+        </dds-link-list>
+      `
+    : html`
+        <dds-link-list type="vertical">
+          <span slot="heading">Tutorial</span>
+          <dds-link-list-item-cta
+            icon-placement="${iconPlacement}"
+            href="${ifNonNull(href)}"
+            cta-type="${ifNonNull(ctaType)}"
+            download="${ifNonNull(download)}"
+          >
+            Learn more
+          </dds-link-list-item-cta>
+          <dds-link-list-item-cta
+            icon-placement="${iconPlacement}"
+            href="${ifNonNull(href)}"
+            cta-type="${ifNonNull(ctaType)}"
+            download="${ifNonNull(download)}"
+          >
+            Containerization A Complete Guide
+          </dds-link-list-item-cta>
+        </dds-link-list>
+      `;
 };
 
 Vertical.story = {
   parameters: {
     colLgClass: 'bx--col-lg-4',
-    knobs: {
-      LinkList: ({ groupId }) => ({
-        iconPlacement: select('Icon Placement (icon-placement)', placement, placement.left, groupId),
-      }),
-    },
+    knobs: Horizontal.story.parameters.knobs,
   },
 };
 
 export const VerticalWithCards = ({ parameters }) => {
-  const { iconPlacement } = parameters?.props?.LinkList ?? { iconPlacement: 'left' };
-  return html`
-    <dds-link-list type="vertical">
-      <span slot="heading">Tutorial</span>
-      <dds-link-list-item icon-placement="${iconPlacement}" href="https://example.com">
-        Learn more ${ArrowRight20({ slot: 'icon' })}
-      </dds-link-list-item>
-      <dds-link-list-item icon-placement="${iconPlacement}" href="https://example.com">
-        Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })}
-      </dds-link-list-item>
-    </dds-link-list>
-    <dds-link-list type="default">
-      <span slot="heading">Tutorial</span>
-      <dds-link-list-item-card href="https://example.com">
-        <p>Learn more</p>
-        ${ArrowRight20({ slot: 'footer' })}
-      </dds-link-list-item-card>
-      <dds-link-list-item-card href="https://example.com">
-        <p>Containerization A Complete Guide</p>
-        ${ArrowRight20({ slot: 'footer' })}
-      </dds-link-list-item-card>
-    </dds-link-list>
-  `;
+  const { ctaType, download, href, iconPlacement = ICON_PLACEMENT.LEFT } = parameters?.props?.LinkListItem ?? {};
+  return !ctaType
+    ? html`
+        <dds-link-list type="vertical">
+          <span slot="heading">Tutorial</span>
+          <dds-link-list-item icon-placement="${iconPlacement}" href="https://example.com">
+            Learn more ${ArrowRight20({ slot: 'icon' })}
+          </dds-link-list-item>
+          <dds-link-list-item icon-placement="${iconPlacement}" href="https://example.com">
+            Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })}
+          </dds-link-list-item>
+        </dds-link-list>
+        <dds-link-list type="default">
+          <span slot="heading">Tutorial</span>
+          <dds-link-list-item-card href="https://example.com">
+            <p>Learn more</p>
+            <dds-card-footer>
+              ${ArrowRight20({ slot: 'icon' })}
+            </dds-card-footer>
+          </dds-link-list-item-card>
+          <dds-link-list-item-card href="https://example.com">
+            <p>Containerization A Complete Guide</p>
+            <dds-card-footer>
+              ${ArrowRight20({ slot: 'icon' })}
+            </dds-card-footer>
+          </dds-link-list-item-card>
+        </dds-link-list>
+      `
+    : html`
+        <dds-link-list type="vertical">
+          <span slot="heading">Tutorial</span>
+          <dds-link-list-item-cta
+            icon-placement="${iconPlacement}"
+            href="${ifNonNull(href)}"
+            cta-type="${ifNonNull(ctaType)}"
+            download="${ifNonNull(download)}"
+          >
+            Learn more
+          </dds-link-list-item-cta>
+          <dds-link-list-item-cta
+            icon-placement="${iconPlacement}"
+            href="${ifNonNull(href)}"
+            cta-type="${ifNonNull(ctaType)}"
+            download="${ifNonNull(download)}"
+          >
+            Containerization A Complete Guide
+          </dds-link-list-item-cta>
+        </dds-link-list>
+        <dds-link-list type="default">
+          <span slot="heading">Tutorial</span>
+          <dds-link-list-item-card-cta
+            href="${ifNonNull(href)}"
+            cta-type="${ifNonNull(ctaType)}"
+            download="${ifNonNull(download)}"
+          >
+            <p>Learn more</p>
+            <dds-card-cta-footer></dds-card-cta-footer>
+          </dds-link-list-item-card-cta>
+          <dds-link-list-item-card-cta
+            href="${ifNonNull(href)}"
+            cta-type="${ifNonNull(ctaType)}"
+            download="${ifNonNull(download)}"
+          >
+            <p>Containerization A Complete Guide</p>
+            <dds-card-cta-footer></dds-card-cta-footer>
+          </dds-link-list-item-card-cta>
+        </dds-link-list>
+      `;
 };
 
 VerticalWithCards.story = {
   parameters: {
     colLgClass: 'bx--col-lg-4',
-    knobs: {
-      LinkList: ({ groupId }) => ({
-        iconPlacement: select('Icon Placement (icon-placement)', placement, placement.left, groupId),
-      }),
-    },
+    knobs: Horizontal.story.parameters.knobs,
   },
 };
 
-export const EndOfSection = () => html`
-  <dds-link-list type="end">
-    <span slot="heading">Tutorial</span>
-    <dds-link-list-item href="https://example.com">
-      Learn more ${ArrowRight20({ slot: 'icon' })}
-    </dds-link-list-item>
-    <dds-link-list-item href="https://example.com">
-      Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })}
-    </dds-link-list-item>
-    <dds-link-list-item href="https://example.com">
-      Microservices and containers ${ArrowRight20({ slot: 'icon' })}
-    </dds-link-list-item>
-  </dds-link-list>
-`;
+export const EndOfSection = ({ parameters }) => {
+  const { ctaType, download, href } = parameters?.props?.LinkListItem ?? {};
+  return !ctaType
+    ? html`
+        <dds-link-list type="end">
+          <span slot="heading">Tutorial</span>
+          <dds-link-list-item href="https://example.com">
+            Learn more ${ArrowRight20({ slot: 'icon' })}
+          </dds-link-list-item>
+          <dds-link-list-item href="https://example.com">
+            Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })}
+          </dds-link-list-item>
+          <dds-link-list-item href="https://example.com">
+            Microservices and containers ${ArrowRight20({ slot: 'icon' })}
+          </dds-link-list-item>
+        </dds-link-list>
+      `
+    : html`
+        <dds-link-list type="end">
+          <span slot="heading">Tutorial</span>
+          <dds-link-list-item-cta href="${ifNonNull(href)}" cta-type="${ifNonNull(ctaType)}" download="${ifNonNull(download)}">
+            Learn more
+          </dds-link-list-item-cta>
+          <dds-link-list-item-cta href="${ifNonNull(href)}" cta-type="${ifNonNull(ctaType)}" download="${ifNonNull(download)}">
+            Containerization A Complete Guide
+          </dds-link-list-item-cta>
+          <dds-link-list-item-cta href="${ifNonNull(href)}" cta-type="${ifNonNull(ctaType)}" download="${ifNonNull(download)}">
+            Microservices and containers
+          </dds-link-list-item-cta>
+        </dds-link-list>
+      `;
+};
 
 EndOfSection.story = {
   parameters: {
     colLgClass: 'bx--col-lg-6',
+    knobs: Default.story.parameters.knobs,
   },
 };
 
@@ -162,13 +348,13 @@ export default {
     (story, { parameters }) => {
       const { colLgClass } = parameters;
       return html`
-        <div class="bx--grid dds-ce-demo-devenv--grid--stretch">
+        <dds-video-cta-container class="bx--grid dds-ce-demo-devenv--grid--stretch">
           <div class="bx--row">
             <div class="bx--col-sm-4 ${colLgClass} bx--offset-lg-4">
               ${story()}
             </div>
           </div>
-        </div>
+        </dds-video-cta-container>
       `;
     },
   ],
diff --git a/packages/web-components/src/components/link-list/__tests__/link-list.test.ts b/packages/web-components/src/components/link-list/__tests__/link-list.test.ts
index 354c8c0fdc1..ccbbd41fc2c 100644
--- a/packages/web-components/src/components/link-list/__tests__/link-list.test.ts
+++ b/packages/web-components/src/components/link-list/__tests__/link-list.test.ts
@@ -13,7 +13,7 @@ import { Default, Horizontal, Vertical, VerticalWithCards, EndOfSection } from '
 
 describe('dds-link-list', function() {
   it('Renders Default', async function() {
-    render(Default(), document.body);
+    render(Default({ parameters: {} }), document.body);
     await Promise.resolve();
     expect(document.body.querySelector('dds-link-list')).toMatchSnapshot({ mode: 'shadow' });
   });
@@ -70,7 +70,7 @@ describe('dds-link-list', function() {
   });
 
   it('Renders End of section', async function() {
-    render(EndOfSection(), document.body);
+    render(EndOfSection({ parameters: {} }), document.body);
     await Promise.resolve();
     expect(document.body.querySelector('dds-link-list')).toMatchSnapshot({ mode: 'shadow' });
   });
diff --git a/packages/web-components/src/components/link-list/link-list.scss b/packages/web-components/src/components/link-list/link-list.scss
index 8bd1f86fb9d..9805d02645f 100644
--- a/packages/web-components/src/components/link-list/link-list.scss
+++ b/packages/web-components/src/components/link-list/link-list.scss
@@ -12,7 +12,8 @@
 @import '../../globals/scss/vars';
 @import '../../globals/scss/box-sizing';
 
-:host(#{$dds-prefix}-link-list-item) {
+:host(#{$dds-prefix}-link-list-item),
+:host(#{$dds-prefix}-link-list-item-cta) {
   display: block;
 
   .#{$prefix}--link {
@@ -40,7 +41,8 @@
     display: flex;
     flex-direction: column;
 
-    ::slotted(#{$dds-prefix}-link-list-item) {
+    ::slotted(#{$dds-prefix}-link-list-item),
+    ::slotted(#{$dds-prefix}-link-list-item-cta) {
       padding: $carbon--layout-01;
       border-top: 1px solid $ui-03;
       border-bottom: 1px solid $ui-03;
diff --git a/packages/web-components/src/components/link-with-icon/link-with-icon.scss b/packages/web-components/src/components/link-with-icon/link-with-icon.scss
index b1d144e0613..6723d9fa313 100644
--- a/packages/web-components/src/components/link-with-icon/link-with-icon.scss
+++ b/packages/web-components/src/components/link-with-icon/link-with-icon.scss
@@ -12,11 +12,22 @@
 
 :host(#{$dds-prefix}-link-with-icon),
 :host(#{$dds-prefix}-link-list-item),
-:host(#{$dds-prefix}-text-cta) {
+:host(#{$dds-prefix}-text-cta),
+:host(#{$dds-prefix}-link-list-item-cta) {
   // Enables expressive version of type/size/component tokens in this component
   @include use-carbon-expressive-tokens();
   // Re-define the ruleset so this wins over `.bx--link:visited`, etc.
   .#{$prefix}--link--disabled {
     color: $disabled-02;
   }
+
+  .#{$prefix}--link-with-icon__icon-left ::slotted(svg[slot='icon']) {
+    margin-right: $carbon--spacing-03;
+    margin-left: 0;
+  }
+
+  .#{$prefix}--link-with-icon__icon-right ::slotted(svg[slot='icon']) {
+    margin-left: $carbon--spacing-03;
+    margin-right: 0;
+  }
 }
diff --git a/packages/web-components/src/components/link-with-icon/link-with-icon.ts b/packages/web-components/src/components/link-with-icon/link-with-icon.ts
index 5d73b239c76..9d4cb413389 100644
--- a/packages/web-components/src/components/link-with-icon/link-with-icon.ts
+++ b/packages/web-components/src/components/link-with-icon/link-with-icon.ts
@@ -63,24 +63,25 @@ class DDSLinkWithIcon extends StableSelectorMixin(DDSLink) {
   // eslint-disable-next-line class-methods-use-this
   protected _renderIcon(): TemplateResult | string | void {
     return html`
-      <slot class="${prefix}--link-with-icon__icon-${this.iconPlacement}" name="icon"></slot>
+      <slot name="icon"></slot>
     `;
   }
 
   protected _renderInner() {
-    return this.iconPlacement === ICON_PLACEMENT.LEFT
-      ? html`
-          ${this._renderIcon()}${this._renderContent()}
-        `
-      : html`
-          ${this._renderContent()}${this._renderIcon()}
-        `;
+    return html`
+      ${this._renderContent()}${this._renderIcon()}
+    `;
   }
 
   updated() {
-    const { _linkNode: linkNode } = this;
+    const { iconPlacement, _linkNode: linkNode } = this;
     if (linkNode) {
       linkNode.classList.add(`${prefix}--link-with-icon`);
+      linkNode.classList.toggle(`${prefix}--link-with-icon__icon-${ICON_PLACEMENT.LEFT}`, iconPlacement === ICON_PLACEMENT.LEFT);
+      linkNode.classList.toggle(
+        `${prefix}--link-with-icon__icon-${ICON_PLACEMENT.RIGHT}`,
+        iconPlacement === ICON_PLACEMENT.RIGHT
+      );
     }
   }
 
diff --git a/packages/web-components/tests/snapshots/dds-card-cta-footer.md b/packages/web-components/tests/snapshots/dds-card-cta-footer.md
index 52b9d33af2f..e828bca59d4 100644
--- a/packages/web-components/tests/snapshots/dds-card-cta-footer.md
+++ b/packages/web-components/tests/snapshots/dds-card-cta-footer.md
@@ -6,7 +6,7 @@
 
 ```
 <a
-  class="bx--card__footer bx--link bx--link-with-icon dds-ce--card__footer"
+  class="bx--card__footer bx--link bx--link-with-icon bx--link-with-icon__icon-right dds-ce--card__footer"
   id="link"
 >
   <span
@@ -26,7 +26,7 @@
 
 ```
 <a
-  class="bx--card__footer bx--link bx--link-with-icon dds-ce--card__footer"
+  class="bx--card__footer bx--link bx--link-with-icon bx--link-with-icon__icon-right dds-ce--card__footer"
   href="#"
   id="link"
 >
diff --git a/packages/web-components/tests/snapshots/dds-card-cta.md b/packages/web-components/tests/snapshots/dds-card-cta.md
index acaa08c2b0f..023c43a070a 100644
--- a/packages/web-components/tests/snapshots/dds-card-cta.md
+++ b/packages/web-components/tests/snapshots/dds-card-cta.md
@@ -75,7 +75,7 @@
 
 ```
 <a
-  class="bx--card__footer bx--link bx--link-with-icon dds-ce--card__footer"
+  class="bx--card__footer bx--link bx--link-with-icon bx--link-with-icon__icon-right dds-ce--card__footer"
   href="#"
   id="link"
 >
diff --git a/packages/web-components/tests/snapshots/dds-link-with-icon.md b/packages/web-components/tests/snapshots/dds-link-with-icon.md
index c2ca738b1ba..f0b3130ad23 100644
--- a/packages/web-components/tests/snapshots/dds-link-with-icon.md
+++ b/packages/web-components/tests/snapshots/dds-link-with-icon.md
@@ -13,10 +13,7 @@
     <slot>
     </slot>
   </span>
-  <slot
-    class="bx--link-with-icon__icon-undefined"
-    name="icon"
-  >
+  <slot name="icon">
   </slot>
 </a>
 
@@ -33,10 +30,7 @@
     <slot>
     </slot>
   </span>
-  <slot
-    class="bx--link-with-icon__icon-undefined"
-    name="icon"
-  >
+  <slot name="icon">
   </slot>
 </p>
 
diff --git a/packages/web-components/tests/snapshots/dds-text-cta.md b/packages/web-components/tests/snapshots/dds-text-cta.md
index 51e0cbedda6..863bde6fe94 100644
--- a/packages/web-components/tests/snapshots/dds-text-cta.md
+++ b/packages/web-components/tests/snapshots/dds-text-cta.md
@@ -6,7 +6,7 @@
 
 ```
 <a
-  class="bx--link bx--link-with-icon"
+  class="bx--link bx--link-with-icon bx--link-with-icon__icon-right"
   id="link"
 >
   <span>
@@ -23,7 +23,7 @@
 
 ```
 <a
-  class="bx--link bx--link-with-icon"
+  class="bx--link bx--link-with-icon bx--link-with-icon__icon-right"
   href="#"
   id="link"
 >