diff --git a/packages/dialtone-vue/components/badge/badge.vue b/packages/dialtone-vue/components/badge/badge.vue
index 331f6a7b51..b40de94413 100644
--- a/packages/dialtone-vue/components/badge/badge.vue
+++ b/packages/dialtone-vue/components/badge/badge.vue
@@ -16,7 +16,7 @@
     />
     <span
       v-if="hasLeftIcon"
-      class="d-badge__icon-left"
+      :class="['d-badge__icon-left', startIconClass]"
     >
       <!-- @slot Slot for start icon, icon-size slot prop defaults to '200' -->
       <slot
@@ -39,7 +39,7 @@
     </span>
     <span
       v-if="hasRightIcon"
-      class="d-badge__icon-right"
+      :class="['d-badge__icon-right', endIconClass]"
     >
       <!-- @slot Slot for end icon, icon-size slot prop defaults to '200' -->
       <slot
@@ -131,6 +131,22 @@ export default {
       default: '',
     },
 
+    /**
+     * Used to customize the start icon container
+     */
+    startIconClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Used to customize the end icon container
+     */
+    endIconClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
     /**
      * Shows a subtle appearance for the badge
      * Currently only affects the badge when type is bulletin.
diff --git a/packages/dialtone-vue/components/banner/banner.vue b/packages/dialtone-vue/components/banner/banner.vue
index ec1b6d7786..33b7f8ddf0 100644
--- a/packages/dialtone-vue/components/banner/banner.vue
+++ b/packages/dialtone-vue/components/banner/banner.vue
@@ -15,6 +15,7 @@
       <dt-notice-icon
         v-if="showIcon"
         :kind="kind"
+        :icon-class="iconClass"
         :class="{ 'd-notice__icon--has-title': headerText || $slots.header }"
       >
         <!-- @slot Slot for custom icon -->
@@ -24,6 +25,8 @@
         :header-id="headerId"
         :content-id="contentId"
         :header-text="headerText"
+        :header-class="headerClass"
+        :content-class="contentClass"
       >
         <template #header>
           <!-- @slot Slot for the header -->
@@ -35,6 +38,7 @@
       <dt-notice-action
         :show-action="showAction"
         :show-close="showClose"
+        :action-class="actionClass"
         @close="$emit('close')"
       >
         <!-- @slot Enter a possible action for the user to take, such as a link to another page -->
@@ -178,6 +182,38 @@ export default {
       type: String,
       default: 'cover',
     },
+
+    /**
+     * Additional class name for the icon wrapper element.
+     */
+    iconClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Additional class name for the header wrapper element.
+     */
+    headerClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Additional class name for the content wrapper element.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Additional class name for the action wrapper element.
+     */
+    actionClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
   },
 
   emits: [
diff --git a/packages/dialtone-vue/components/box/box.vue b/packages/dialtone-vue/components/box/box.vue
index 572ee4b7bb..28a5dc4675 100644
--- a/packages/dialtone-vue/components/box/box.vue
+++ b/packages/dialtone-vue/components/box/box.vue
@@ -9,7 +9,7 @@
   >
     <div
       data-qa="dt-box-scrollbar-content"
-      class="d-box__scrollbar-content"
+      :class="['d-box__scrollbar-content', scrollbarContentClass]"
     >
       <!-- @slot Slot for main content -->
       <slot />
@@ -221,6 +221,12 @@ const props = defineProps({
    * @values hidden, scroll, auto, clip, visible
    */
   overflow: { type: String, default: undefined, validator: overflowValidator },
+
+  /**
+   * Additional CSS classes applied to the scrollbar content wrapper element.
+   * Only applies when scrollbar prop is set.
+   */
+  scrollbarContentClass: { type: [String, Object, Array], default: '' },
 });
 
 const SCROLLBAR_INCOMPATIBLE_ELEMENTS = ['ul', 'ol', 'span', 'fieldset'];
diff --git a/packages/dialtone-vue/components/breadcrumbs/breadcrumbs.vue b/packages/dialtone-vue/components/breadcrumbs/breadcrumbs.vue
index b8adbcc373..6fca19a8e8 100644
--- a/packages/dialtone-vue/components/breadcrumbs/breadcrumbs.vue
+++ b/packages/dialtone-vue/components/breadcrumbs/breadcrumbs.vue
@@ -7,7 +7,7 @@
       { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },
     ]"
   >
-    <ol :class="['d-breadcrumbs__list']">
+    <ol :class="['d-breadcrumbs__list', listClass]">
       <!-- @slot default slot for breadcrumbs content -->
       <slot>
         <dt-breadcrumb-item
@@ -65,6 +65,14 @@ export default {
       default: false,
     },
 
+    /**
+     * Additional CSS class(es) applied to the list wrapper element.
+     */
+    listClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
     /**
      * Descriptive label for the navigation content.
      */
diff --git a/packages/dialtone-vue/components/button/button.vue b/packages/dialtone-vue/components/button/button.vue
index 3b3af45392..cdb12f2a75 100644
--- a/packages/dialtone-vue/components/button/button.vue
+++ b/packages/dialtone-vue/components/button/button.vue
@@ -35,6 +35,7 @@
           'd-btn__icon': kind !== 'unstyled',
           'd-btn__icon--top': kind !== 'unstyled',
         },
+        blockStartIconClass,
       ]"
     >
       <!-- @slot Icon displayed above the button label (block-start) -->
@@ -53,6 +54,7 @@
           'd-btn__icon': kind !== 'unstyled',
           'd-btn__icon--left': kind !== 'unstyled',
         },
+        startIconClass,
       ]"
     >
       <!-- @slot Icon displayed at the start (left in LTR) of the button -->
@@ -71,6 +73,7 @@
           'd-btn__icon': kind !== 'unstyled',
           [ICON_POSITION_MODIFIERS[iconPosition]]: kind !== 'unstyled',
         },
+        iconClass,
       ]"
     >
       <!-- @slot Button icon -->
@@ -101,6 +104,7 @@
           'd-btn__icon': kind !== 'unstyled',
           'd-btn__icon--right': kind !== 'unstyled',
         },
+        endIconClass,
       ]"
     >
       <!-- @slot Icon displayed at the end (right in LTR) of the button -->
@@ -119,6 +123,7 @@
           'd-btn__icon': kind !== 'unstyled',
           'd-btn__icon--bottom': kind !== 'unstyled',
         },
+        blockEndIconClass,
       ]"
     >
       <!-- @slot Icon displayed below the button label (block-end) -->
@@ -313,6 +318,47 @@ export default {
       default: '',
     },
 
+    /**
+     * Used to customize the start icon container
+     */
+    startIconClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Used to customize the end icon container
+     */
+    endIconClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Used to customize the block-start icon container
+     */
+    blockStartIconClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Used to customize the block-end icon container
+     */
+    blockEndIconClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Used to customize the legacy icon container
+     * @deprecated Use startIconClass or endIconClass
+     */
+    iconClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
     /**
      * Whether the button should display a loading animation or not.
      * @values true, false
diff --git a/packages/dialtone-vue/components/chip/chip.vue b/packages/dialtone-vue/components/chip/chip.vue
index eac6438efc..59f8f18293 100644
--- a/packages/dialtone-vue/components/chip/chip.vue
+++ b/packages/dialtone-vue/components/chip/chip.vue
@@ -14,7 +14,7 @@
     >
       <span
         v-if="hasSlotContent($slots.icon)"
-        class="d-chip__icon"
+        :class="['d-chip__icon', iconClass]"
         data-qa="dt-chip-icon"
       >
         <!-- @slot slot for Chip icon -->
@@ -22,6 +22,7 @@
       </span>
       <span
         v-else-if="hasSlotContent($slots.avatar)"
+        :class="avatarClass"
         data-qa="dt-chip-avatar"
       >
         <!-- @slot slot for Chip avatar -->
@@ -153,6 +154,22 @@ export default {
       type: [String, Array, Object],
       default: '',
     },
+
+    /**
+     * Additional class name for the icon wrapper element.
+     */
+    iconClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Additional class name for the avatar wrapper element.
+     */
+    avatarClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
   },
 
   emits: [
diff --git a/packages/dialtone-vue/components/combobox_multi_select/combobox_multi_select.vue b/packages/dialtone-vue/components/combobox_multi_select/combobox_multi_select.vue
index 0edb8536f6..4efe992246 100644
--- a/packages/dialtone-vue/components/combobox_multi_select/combobox_multi_select.vue
+++ b/packages/dialtone-vue/components/combobox_multi_select/combobox_multi_select.vue
@@ -79,7 +79,10 @@
       v-if="hasSlotContent($slots.header)"
       #header
     >
-      <div ref="header">
+      <div
+        ref="header"
+        :class="headerClass"
+      >
         <slot name="header" />
       </div>
     </template>
@@ -88,7 +91,7 @@
     <template #list>
       <div
         ref="list"
-        class="d-recipe-combobox-multi-select__list"
+        :class="['d-recipe-combobox-multi-select__list', listClass]"
         @mousedown.prevent
       >
         <slot
@@ -109,7 +112,10 @@
       v-if="hasSlotContent($slots.footer)"
       #footer
     >
-      <div ref="footer">
+      <div
+        ref="footer"
+        :class="footerClass"
+      >
         <slot name="footer" />
       </div>
     </template>
@@ -374,6 +380,30 @@ export default {
       type: Boolean,
       default: false,
     },
+
+    /**
+     * Additional class name for the header wrapper element.
+     */
+    headerClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Additional class name for the footer wrapper element.
+     */
+    footerClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Additional class name for the list wrapper element.
+     */
+    listClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
   },
 
   emits: [
diff --git a/packages/dialtone-vue/components/combobox_with_popover/combobox_with_popover.vue b/packages/dialtone-vue/components/combobox_with_popover/combobox_with_popover.vue
index 1c9be0cb38..cc2ce89009 100644
--- a/packages/dialtone-vue/components/combobox_with_popover/combobox_with_popover.vue
+++ b/packages/dialtone-vue/components/combobox_with_popover/combobox_with_popover.vue
@@ -64,6 +64,7 @@
         >
           <div
             ref="header"
+            :class="headerClass"
           >
             <slot name="header" />
           </div>
@@ -104,6 +105,7 @@
         >
           <div
             ref="footer"
+            :class="footerClass"
           >
             <slot name="footer" />
           </div>
@@ -206,6 +208,22 @@ export default {
       default: '',
     },
 
+    /**
+     * Additional class for the header wrapper element.
+     */
+    headerClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Additional class for the footer wrapper element.
+     */
+    footerClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
     /**
      * A method that will be called when the selection goes past the beginning of the list.
      */
diff --git a/packages/dialtone-vue/components/dropdown/dropdown.vue b/packages/dialtone-vue/components/dropdown/dropdown.vue
index ddd5203520..e3f6435f6a 100644
--- a/packages/dialtone-vue/components/dropdown/dropdown.vue
+++ b/packages/dialtone-vue/components/dropdown/dropdown.vue
@@ -19,6 +19,7 @@
     v-bind="$attrs"
     :tether="tether"
     :transition="transition"
+    :footer-class="footerClass"
     v-on="dropdownListeners"
   >
     <template #anchor="{ attrs }">
@@ -238,6 +239,14 @@ export default {
       default: '',
     },
 
+    /**
+     * Additional class for the footer wrapper element.
+     */
+    footerClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
     /**
      * Sets the element to which the popover is going to append to.
      * 'body' will append to the nearest body (supports shadow DOM).
diff --git a/packages/dialtone-vue/components/empty_state/empty_state.stories.js b/packages/dialtone-vue/components/empty_state/empty_state.stories.js
index ef73a065c6..b3b71711b4 100644
--- a/packages/dialtone-vue/components/empty_state/empty_state.stories.js
+++ b/packages/dialtone-vue/components/empty_state/empty_state.stories.js
@@ -43,6 +43,15 @@ export const argTypesData = {
   },
 
   // Props
+  illustrationClass: {
+    description: 'Pass through classes. Used to customize the illustration container',
+  },
+  iconClass: {
+    description: 'Pass through classes. Used to customize the icon container',
+  },
+  bodyClass: {
+    description: 'Pass through classes. Used to customize the body slot container',
+  },
   size: {
     options: Object.keys(EMPTY_STATE_SIZE_MODIFIERS),
     control: {
diff --git a/packages/dialtone-vue/components/empty_state/empty_state.test.js b/packages/dialtone-vue/components/empty_state/empty_state.test.js
index 1fad4ab42f..b6b8e2e8d8 100644
--- a/packages/dialtone-vue/components/empty_state/empty_state.test.js
+++ b/packages/dialtone-vue/components/empty_state/empty_state.test.js
@@ -213,6 +213,42 @@ describe('DtIllustration Tests', () => {
     });
   });
 
+  describe('Pass-through class props', () => {
+    it('Should apply illustrationClass to the illustration wrapper', async () => {
+      mockSlots = { illustration: MOCK_ILLUSTRATION_SLOT };
+      mockProps = { illustrationClass: 'my-illustration-class' };
+
+      await updateWrapper();
+
+      const illustrationWrapper = wrapper.find('.d-empty-state__illustration');
+
+      expect(illustrationWrapper.classes()).toContain('my-illustration-class');
+    });
+
+    it('Should apply iconClass to the icon wrapper', async () => {
+      mockSlots = { icon: MOCK_ICON_SLOT };
+      mockProps = { size: 'sm', iconClass: 'my-icon-class' };
+
+      await updateWrapper();
+
+      const iconWrapper = wrapper.find('.d-empty-state__icon');
+
+      expect(iconWrapper.classes()).toContain('my-icon-class');
+    });
+
+    it('Should apply bodyClass to the body slot wrapper', async () => {
+      mockProps = { bodyClass: 'my-body-class' };
+      mockSlots = { body: MOCK_BODY_SLOT };
+
+      await updateWrapper();
+
+      const bodyWrapper = wrapper.find('.my-body-class');
+
+      expect(bodyWrapper.exists()).toBe(true);
+      expect(bodyWrapper.find('h2').exists()).toBe(true);
+    });
+  });
+
   describe('Validation Tests', () => {
     describe('With no bodyText or body slot provided', () => {
       it('Should console.error', () => {
diff --git a/packages/dialtone-vue/components/empty_state/empty_state.vue b/packages/dialtone-vue/components/empty_state/empty_state.vue
index e8f5255dfb..05018c252d 100644
--- a/packages/dialtone-vue/components/empty_state/empty_state.vue
+++ b/packages/dialtone-vue/components/empty_state/empty_state.vue
@@ -4,7 +4,7 @@
   >
     <span
       v-if="showIllustration"
-      class="d-empty-state__illustration"
+      :class="['d-empty-state__illustration', illustrationClass]"
     >
       <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->
       <slot name="illustration" />
@@ -12,7 +12,7 @@
 
     <span
       v-if="showIcon"
-      class="d-empty-state__icon"
+      :class="['d-empty-state__icon', iconClass]"
     >
       <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->
       <slot
@@ -50,7 +50,12 @@
       </dt-text>
     </dt-stack>
 
-    <slot name="body" />
+    <div
+      v-if="hasSlotContent(slots.body)"
+      :class="bodyClass"
+    >
+      <slot name="body" />
+    </div>
   </dt-stack>
 </template>
 
@@ -102,6 +107,30 @@ const props = defineProps({
     type: String,
     default: null,
   },
+
+  /**
+    * Additional class name for the illustration wrapper element.
+    */
+  illustrationClass: {
+    type: [String, Array, Object],
+    default: '',
+  },
+
+  /**
+    * Additional class name for the icon wrapper element.
+    */
+  iconClass: {
+    type: [String, Array, Object],
+    default: '',
+  },
+
+  /**
+    * Additional class name for the body slot wrapper element.
+    */
+  bodyClass: {
+    type: [String, Array, Object],
+    default: '',
+  },
 });
 
 const hasIcon = computed(() => {
diff --git a/packages/dialtone-vue/components/filter_pill/filter_pill.vue b/packages/dialtone-vue/components/filter_pill/filter_pill.vue
index 34faf8e9f2..e3cbb6f0dc 100644
--- a/packages/dialtone-vue/components/filter_pill/filter_pill.vue
+++ b/packages/dialtone-vue/components/filter_pill/filter_pill.vue
@@ -42,7 +42,7 @@
               :icon-size="iconSize"
             />
           </template>
-          <span class="d-filter-pill__label">
+          <span :class="['d-filter-pill__label', labelClass]">
             <!-- @slot Allows you to customize the label slot -->
             <slot
               :label="label"
@@ -389,6 +389,14 @@ export default {
       default: 'bottom-start',
     },
 
+    /**
+     * Additional CSS class(es) applied to the label wrapper element.
+     */
+    labelClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
     /**
      * Additional CSS class(es) applied to the popover content area.
      * Only applies when useDropdown is false.
diff --git a/packages/dialtone-vue/components/hovercard/hovercard.vue b/packages/dialtone-vue/components/hovercard/hovercard.vue
index a2265e7012..abfa397ef0 100644
--- a/packages/dialtone-vue/components/hovercard/hovercard.vue
+++ b/packages/dialtone-vue/components/hovercard/hovercard.vue
@@ -17,6 +17,7 @@
     :header-class="headerClass"
     :footer-class="footerClass"
     :append-to="appendTo"
+    :anchor-class="anchorClass"
     :external-anchor-element="externalAnchorElement"
     data-qa="dt-hovercard"
     :enter-delay="enterDelay"
@@ -153,6 +154,14 @@ const props = defineProps({
     default () { return getUniqueString(); },
   },
 
+  /**
+     * Additional class name for the anchor wrapper element.
+     */
+  anchorClass: {
+    type: [String, Array, Object],
+    default: '',
+  },
+
   /**
      * Additional class name for the header content wrapper element.
      */
diff --git a/packages/dialtone-vue/components/input/input.vue b/packages/dialtone-vue/components/input/input.vue
index 6842beccff..858cdf916a 100644
--- a/packages/dialtone-vue/components/input/input.vue
+++ b/packages/dialtone-vue/components/input/input.vue
@@ -60,7 +60,7 @@
         :read-only="disabled === true ? true : undefined"
       >
         <span
-          class="d-input-icon d-input-icon--left"
+          :class="['d-input-icon', 'd-input-icon--left', startIconClass]"
           data-qa="dt-input-left-icon-wrapper"
           @focusout="onBlur"
         >
@@ -106,7 +106,7 @@
           v-on="inputListeners"
         >
         <span
-          class="d-input-icon d-input-icon--right"
+          :class="['d-input-icon', 'd-input-icon--right', endIconClass]"
           data-qa="dt-input-right-icon-wrapper"
           @focusout="onBlur"
         >
@@ -342,6 +342,22 @@ export default {
       type: [String, Array, Object],
       default: '',
     },
+
+    /**
+     * Used to customize the start icon container
+     */
+    startIconClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Used to customize the end icon container
+     */
+    endIconClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
   },
 
   emits: [
diff --git a/packages/dialtone-vue/components/item_layout/item_layout.vue b/packages/dialtone-vue/components/item_layout/item_layout.vue
index 7e7f3bf920..d70217c75d 100644
--- a/packages/dialtone-vue/components/item_layout/item_layout.vue
+++ b/packages/dialtone-vue/components/item_layout/item_layout.vue
@@ -121,7 +121,7 @@ export default {
      * Set the class for the start section.
      */
     startClass: {
-      type: String,
+      type: [String, Array, Object],
       default: '',
     },
 
@@ -130,7 +130,7 @@ export default {
      * @deprecated Use startClass
      */
     leftClass: {
-      type: String,
+      type: [String, Array, Object],
       default: undefined,
     },
 
@@ -138,7 +138,7 @@ export default {
      * Set the class for the content section.
      */
     contentClass: {
-      type: String,
+      type: [String, Array, Object],
       default: '',
     },
 
@@ -146,7 +146,7 @@ export default {
      * Set the class for the title section.
      */
     titleClass: {
-      type: String,
+      type: [String, Array, Object],
       default: '',
     },
 
@@ -154,7 +154,7 @@ export default {
      * Set the class for the subtitle section.
      */
     subtitleClass: {
-      type: String,
+      type: [String, Array, Object],
       default: '',
     },
 
@@ -162,7 +162,7 @@ export default {
      * Set the class for the block-end section.
      */
     blockEndClass: {
-      type: String,
+      type: [String, Array, Object],
       default: '',
     },
 
@@ -171,7 +171,7 @@ export default {
      * @deprecated Use blockEndClass
      */
     bottomClass: {
-      type: String,
+      type: [String, Array, Object],
       default: undefined,
     },
 
@@ -179,7 +179,7 @@ export default {
      * Set the class for the end section.
      */
     endClass: {
-      type: String,
+      type: [String, Array, Object],
       default: '',
     },
 
@@ -188,7 +188,7 @@ export default {
      * @deprecated Use endClass
      */
     rightClass: {
-      type: String,
+      type: [String, Array, Object],
       default: undefined,
     },
 
@@ -196,7 +196,7 @@ export default {
      * Set the class for the selected section.
      */
     selectedClass: {
-      type: String,
+      type: [String, Array, Object],
       default: '',
     },
   },
diff --git a/packages/dialtone-vue/components/modal/modal.vue b/packages/dialtone-vue/components/modal/modal.vue
index 3f206311fa..7095196ae3 100644
--- a/packages/dialtone-vue/components/modal/modal.vue
+++ b/packages/dialtone-vue/components/modal/modal.vue
@@ -51,7 +51,7 @@
           <div
             v-if="hasSlotContent($slots.header)"
             :id="labelledById"
-            class="d-modal__header"
+            :class="['d-modal__header', headerClass]"
             data-qa="dt-modal-title"
           >
             <!-- @slot Slot for dialog header section, taking the place of any "headerText" text prop -->
@@ -94,7 +94,7 @@
           </p>
           <footer
             v-if="hasFooterSlot"
-            class="d-modal__footer"
+            :class="['d-modal__footer', footerClass]"
           >
             <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->
             <slot name="footer" />
@@ -288,6 +288,26 @@ export default {
       default: '',
     },
 
+    /**
+     * Additional class name for the header element within the modal.
+     * Can accept String, Object, and Array, i.e. has the
+     * same API as Vue's built-in handling of the class attribute.
+     */
+    headerClass: {
+      type: [String, Object, Array],
+      default: '',
+    },
+
+    /**
+     * Additional class name for the footer element within the modal.
+     * Can accept String, Object, and Array, i.e. has the
+     * same API as Vue's built-in handling of the class attribute.
+     */
+    footerClass: {
+      type: [String, Object, Array],
+      default: '',
+    },
+
     /**
      * Shows the close button on the modal
      * @values true, false
diff --git a/packages/dialtone-vue/components/notice/notice.vue b/packages/dialtone-vue/components/notice/notice.vue
index fded20c357..4a2dc77f83 100644
--- a/packages/dialtone-vue/components/notice/notice.vue
+++ b/packages/dialtone-vue/components/notice/notice.vue
@@ -6,6 +6,7 @@
     <dt-notice-icon
       v-if="showIcon"
       :kind="kind"
+      :icon-class="iconClass"
       :class="{ 'd-notice__icon--has-title': headerText || $slots.header }"
     >
       <!-- @slot Slot for custom icon -->
@@ -15,6 +16,8 @@
       :header-id="headerId"
       :content-id="contentId"
       :header-text="headerText"
+      :header-class="headerClass"
+      :content-class="contentClass"
       :role="role"
     >
       <template #header>
@@ -27,6 +30,7 @@
     <dt-notice-action
       :show-action="showAction"
       :show-close="showClose"
+      :action-class="actionClass"
       @close="$emit('close')"
     >
       <!-- @slot Enter a possible action for the user to take, such as a link to another page -->
@@ -154,6 +158,38 @@ export default {
       type: Boolean,
       default: false,
     },
+
+    /**
+     * Additional class name for the icon wrapper element.
+     */
+    iconClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Additional class name for the header wrapper element.
+     */
+    headerClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Additional class name for the content wrapper element.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Additional class name for the action wrapper element.
+     */
+    actionClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
   },
 
   emits: [
diff --git a/packages/dialtone-vue/components/notice/notice_action.vue b/packages/dialtone-vue/components/notice/notice_action.vue
index 7341f0629c..2205f11ff2 100644
--- a/packages/dialtone-vue/components/notice/notice_action.vue
+++ b/packages/dialtone-vue/components/notice/notice_action.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="d-notice__actions"
+    :class="['d-notice__actions', actionClass]"
     data-qa="notice-content-actions"
   >
     <!-- @slot Slot for main content -->
@@ -63,6 +63,14 @@ export default {
       type: Boolean,
       default: true,
     },
+
+    /**
+     * Additional class name for the action wrapper element.
+     */
+    actionClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
   },
 
   emits: [
diff --git a/packages/dialtone-vue/components/notice/notice_content.vue b/packages/dialtone-vue/components/notice/notice_content.vue
index 12adffd9e4..858552133d 100644
--- a/packages/dialtone-vue/components/notice/notice_content.vue
+++ b/packages/dialtone-vue/components/notice/notice_content.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="d-notice__content"
+    :class="['d-notice__content', contentClass]"
     data-qa="notice-content"
   >
     <dt-text
@@ -10,7 +10,7 @@
       :size="300"
       density="200"
       as="p"
-      class="d-notice__title"
+      :class="['d-notice__title', headerClass]"
       data-qa="notice-content-title"
     >
       <!-- @slot Slot for the header -->
@@ -70,6 +70,22 @@ export default {
       type: String,
       default: undefined,
     },
+
+    /**
+     * Additional class name for the header wrapper element.
+     */
+    headerClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Additional class name for the content wrapper element.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
   },
 
   data () {
diff --git a/packages/dialtone-vue/components/notice/notice_icon.vue b/packages/dialtone-vue/components/notice/notice_icon.vue
index eba62ce3ab..69200ec010 100644
--- a/packages/dialtone-vue/components/notice/notice_icon.vue
+++ b/packages/dialtone-vue/components/notice/notice_icon.vue
@@ -2,7 +2,7 @@
   <div
     v-if="defaultIcon || hasSlotContent($slots.default)"
     aria-hidden="true"
-    class="d-notice__icon"
+    :class="['d-notice__icon', iconClass]"
   >
     <!-- @slot Slot for the main content -->
     <slot>
@@ -57,6 +57,14 @@ export default {
         return NOTICE_KINDS.includes(kind);
       },
     },
+
+    /**
+     * Additional class name for the icon wrapper element.
+     */
+    iconClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
   },
 
   data () {
diff --git a/packages/dialtone-vue/components/popover/popover.stories.js b/packages/dialtone-vue/components/popover/popover.stories.js
index 8e2e0998c6..563008eac7 100644
--- a/packages/dialtone-vue/components/popover/popover.stories.js
+++ b/packages/dialtone-vue/components/popover/popover.stories.js
@@ -65,6 +65,9 @@ export const argTypesData = {
   },
 
   // Props
+  anchorClass: {
+    description: 'Pass through classes. Used to customize the anchor wrapper element',
+  },
   id: {
     table: {
       defaultValue: {
diff --git a/packages/dialtone-vue/components/popover/popover.test.js b/packages/dialtone-vue/components/popover/popover.test.js
index b8837155f5..407c523d09 100644
--- a/packages/dialtone-vue/components/popover/popover.test.js
+++ b/packages/dialtone-vue/components/popover/popover.test.js
@@ -305,6 +305,17 @@ describe('DtPopover Tests', () => {
     });
   });
 
+  describe('Pass-through class props', () => {
+    it('Should apply anchorClass to the anchor wrapper', () => {
+      mockProps = { anchorClass: 'my-anchor-class' };
+      updateWrapper();
+
+      anchor = wrapper.find('[data-qa="dt-popover-anchor"]');
+
+      expect(anchor.classes()).toContain('my-anchor-class');
+    });
+  });
+
   describe('contentMode Tests', () => {
     it('should set data-dt-mode on dialog when contentMode is set', () => {
       mockProps = { contentMode: 'dark' };
diff --git a/packages/dialtone-vue/components/popover/popover.vue b/packages/dialtone-vue/components/popover/popover.vue
index 6a4d9e98d9..f42cfbf27d 100644
--- a/packages/dialtone-vue/components/popover/popover.vue
+++ b/packages/dialtone-vue/components/popover/popover.vue
@@ -21,6 +21,7 @@
       <div
         :id="!ariaLabelledby && labelledBy"
         ref="anchor"
+        :class="anchorClass"
         :data-qa="$attrs['data-qa'] ? `${$attrs['data-qa']}-anchor` : 'dt-popover-anchor'"
         :tabindex="openOnContext ? 0 : undefined"
         @click.capture="defaultToggleOpen"
@@ -447,6 +448,14 @@ export default {
       default: false,
     },
 
+    /**
+     * Additional class name for the anchor wrapper element.
+     */
+    anchorClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
     /**
      * Additional class name for the header element (d-popover__header).
      */
diff --git a/packages/dialtone-vue/components/resizable/resizable_panel.vue b/packages/dialtone-vue/components/resizable/resizable_panel.vue
index a52e10924b..db003076fc 100644
--- a/packages/dialtone-vue/components/resizable/resizable_panel.vue
+++ b/packages/dialtone-vue/components/resizable/resizable_panel.vue
@@ -14,7 +14,7 @@
     data-qa="d-resizable-panel"
   >
     <div
-      class="d-resizable-panel__content"
+      :class="['d-resizable-panel__content', contentClass]"
       :style="offsetContentStyles"
     >
       <!-- @slot Panel content. Provides panel state and collapsed/resizing flags. -->
@@ -55,6 +55,8 @@ const props = defineProps({
   collapsed: { type: Boolean, default: false },
   /** Additional CSS classes applied to the panel element. */
   class: { type: [String, Object, Array], default: '' },
+  /** Additional CSS classes applied to the inner content wrapper element. */
+  contentClass: { type: [String, Object, Array], default: '' },
 });
 
 const SIZE_PROPS = ['initialSize', 'userMinSize', 'userMaxSize', 'systemMinSize', 'systemMaxSize', 'collapseSize'];
diff --git a/packages/dialtone-vue/components/tab/tab_group.vue b/packages/dialtone-vue/components/tab/tab_group.vue
index 9e80530152..cde5e5e372 100644
--- a/packages/dialtone-vue/components/tab/tab_group.vue
+++ b/packages/dialtone-vue/components/tab/tab_group.vue
@@ -15,7 +15,7 @@
           [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,
           [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,
         },
-        tabListClass,
+        resolvedTabsClass,
       ]"
       v-bind="tabListChildProps"
       role="tablist"
@@ -154,11 +154,20 @@ export default {
     /**
      * Pass through classes, used to customize the tab list
      */
-    tabListClass: {
+    tabsClass: {
       type: [String, Array, Object],
       default: '',
     },
 
+    /**
+     * Pass through classes, used to customize the tab list
+     * @deprecated Use tabsClass
+     */
+    tabListClass: {
+      type: [String, Array, Object],
+      default: undefined,
+    },
+
     /**
      * Pass through props, used to customize the tab list
      */
@@ -259,6 +268,12 @@ export default {
     };
   },
 
+  computed: {
+    resolvedTabsClass () {
+      return this.tabListClass ?? this.tabsClass;
+    },
+  },
+
   watch: {
     disabled: {
       immediate: true,
diff --git a/packages/dialtone-vue/components/toast/layouts/toast_layout_alternate.vue b/packages/dialtone-vue/components/toast/layouts/toast_layout_alternate.vue
index e533f9ad4e..ee8fa38a3b 100644
--- a/packages/dialtone-vue/components/toast/layouts/toast_layout_alternate.vue
+++ b/packages/dialtone-vue/components/toast/layouts/toast_layout_alternate.vue
@@ -14,6 +14,7 @@
         <dt-toast-layout-alternate-icon
           v-if="showIcon"
           :kind="kind"
+          :icon-class="iconClass"
           size="200"
           v-bind="toastListeners"
         >
@@ -23,6 +24,8 @@
           :header-id="headerId"
           :content-id="contentId"
           :header-text="headerText"
+          :header-class="headerClass"
+          :content-class="contentClass"
           :role="role"
           v-bind="toastListeners"
         >
@@ -35,6 +38,7 @@
         <dt-notice-action
           :show-action="false"
           :show-close="showClose"
+          :action-class="actionClass"
           :button-size="100"
           v-bind="toastListeners"
           @close="$emit('close')"
@@ -150,6 +154,38 @@ export default {
       type: Boolean,
       default: true,
     },
+
+    /**
+     * Additional class name for the icon wrapper element.
+     */
+    iconClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Additional class name for the header wrapper element.
+     */
+    headerClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Additional class name for the content wrapper element.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Additional class name for the action wrapper element.
+     */
+    actionClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
   },
 
   computed: {
diff --git a/packages/dialtone-vue/components/toast/layouts/toast_layout_alternate_icon.vue b/packages/dialtone-vue/components/toast/layouts/toast_layout_alternate_icon.vue
index 1b428544c9..91e0851534 100644
--- a/packages/dialtone-vue/components/toast/layouts/toast_layout_alternate_icon.vue
+++ b/packages/dialtone-vue/components/toast/layouts/toast_layout_alternate_icon.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     aria-hidden="true"
-    class="d-toast-layout-alternate__icon"
+    :class="['d-toast-layout-alternate__icon', iconClass]"
   >
     <slot>
       <component
@@ -61,6 +61,14 @@ export default {
       default: '400',
       validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),
     },
+
+    /**
+     * Additional class name for the icon wrapper element.
+     */
+    iconClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
   },
 
   computed: {
diff --git a/packages/dialtone-vue/components/toast/layouts/toast_layout_default.vue b/packages/dialtone-vue/components/toast/layouts/toast_layout_default.vue
index a240a86630..c8144d2456 100644
--- a/packages/dialtone-vue/components/toast/layouts/toast_layout_default.vue
+++ b/packages/dialtone-vue/components/toast/layouts/toast_layout_default.vue
@@ -14,6 +14,7 @@
       <dt-notice-icon
         v-if="showIcon"
         :kind="kind"
+        :icon-class="iconClass"
         :class="{ 'd-notice__icon--has-title': headerText || $slots.header }"
         v-bind="toastListeners"
       >
@@ -24,6 +25,8 @@
         :header-id="headerId"
         :content-id="contentId"
         :header-text="headerText"
+        :header-class="headerClass"
+        :content-class="contentClass"
         :role="role"
         v-bind="toastListeners"
       >
@@ -39,6 +42,7 @@
       <dt-notice-action
         :show-action="showAction"
         :show-close="showClose"
+        :action-class="actionClass"
         v-bind="toastListeners"
         @close="$emit('close')"
       >
@@ -166,6 +170,38 @@ export default {
       type: Boolean,
       default: true,
     },
+
+    /**
+     * Additional class name for the icon wrapper element.
+     */
+    iconClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Additional class name for the header wrapper element.
+     */
+    headerClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Additional class name for the content wrapper element.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Additional class name for the action wrapper element.
+     */
+    actionClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
   },
 
   emits: ['close'],
diff --git a/packages/dialtone-vue/components/toast/toast.vue b/packages/dialtone-vue/components/toast/toast.vue
index 9f9eecdd86..e872d1da84 100644
--- a/packages/dialtone-vue/components/toast/toast.vue
+++ b/packages/dialtone-vue/components/toast/toast.vue
@@ -12,6 +12,10 @@
     :show-close="showClose"
     :show-icon="showIcon"
     :show-action="showAction"
+    :icon-class="iconClass"
+    :header-class="headerClass"
+    :content-class="contentClass"
+    :action-class="actionClass"
     v-bind="$attrs"
     @close="handleClose"
   >
@@ -181,6 +185,38 @@ export default {
         return TOAST_LAYOUTS.includes(layout);
       },
     },
+
+    /**
+     * Additional class name for the icon wrapper element.
+     */
+    iconClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Additional class name for the header wrapper element.
+     */
+    headerClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Additional class name for the content wrapper element.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
+    /**
+     * Additional class name for the action wrapper element.
+     */
+    actionClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
   },
 
   emits: [
diff --git a/packages/dialtone-vue/components/tooltip/tooltip.vue b/packages/dialtone-vue/components/tooltip/tooltip.vue
index 6cf99d778f..b707588cb5 100644
--- a/packages/dialtone-vue/components/tooltip/tooltip.vue
+++ b/packages/dialtone-vue/components/tooltip/tooltip.vue
@@ -6,6 +6,7 @@
     <span
       v-if="!externalAnchor && !externalAnchorElement"
       ref="anchor"
+      :class="anchorClass"
       data-qa="dt-tooltip-anchor"
       @focusin="onEnterAnchor"
       @focusout="onLeaveAnchor"
@@ -194,6 +195,16 @@ export default {
       default: '',
     },
 
+    /**
+     * Additional class name for the anchor wrapper element.
+     * Can accept all of: String, Object, and Array, i.e. has the
+     * same api as Vue's built-in handling of the class attribute.
+     */
+    anchorClass: {
+      type: [String, Object, Array],
+      default: '',
+    },
+
     /**
      * A provided message for the tooltip content
      */