diff --git a/packages/example/src/pages/components/DoDontExample.mdx b/packages/example/src/pages/components/DoDontExample.mdx
index 4ac0925f3..bae5e543c 100644
--- a/packages/example/src/pages/components/DoDontExample.mdx
+++ b/packages/example/src/pages/components/DoDontExample.mdx
@@ -3,6 +3,14 @@ title: DoDontExample
 description: Usage instructions for the DoDontExample component
 ---
 
+<InlineNotification kind="warning">
+
+**Warning:** This component will be deprecated in a future release. Please use
+the [DoDontRow](/components/DoDontRow) and [DoDont](/components/DoDontRow)
+component instead.
+
+</InlineNotification>
+
 <PageDescription>
 
 The `<DoDontExample>` component will generally need to be placed inside `<Row>`
diff --git a/packages/example/src/pages/components/DoDontRow.mdx b/packages/example/src/pages/components/DoDontRow.mdx
index b29a9a63f..9bcc9491b 100644
--- a/packages/example/src/pages/components/DoDontRow.mdx
+++ b/packages/example/src/pages/components/DoDontRow.mdx
@@ -58,6 +58,31 @@ component, which now includes built in columns.
 
 </DoDontRow>
 
+<DoDontRow>
+
+<DoDont aspectRatio="4:3" text="4:3" />
+
+<DoDont aspectRatio="16:9" text="16:9" />
+
+<DoDont aspectRatio="2:1" text="2:1" />
+
+</DoDontRow>
+
+<DoDontRow>
+
+<DoDont aspectRatio="9:16" text="9:16" />
+
+<DoDont aspectRatio="1:2" text="1:2" />
+
+<DoDont aspectRatio="3:4" text="3:4" />
+
+</DoDontRow>
+<DoDontRow>
+
+<DoDont aspectRatio="1:1" text="1:1" />
+
+</DoDontRow>
+
 ## Code
 
 ### Image
@@ -99,6 +124,24 @@ component, which now includes built in columns.
 </DoDontRow>
 ```
 
+### Aspect Ratios
+
+```mdx path=components/DoDontRow/DoDontRow.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/DoDontRow
+<DoDontRow>
+  <DoDont aspectRatio="4:3" text="4:3" />
+  <DoDont aspectRatio="16:9" text="16:9" />
+  <DoDont aspectRatio="2:1" text="2:1" />
+</DoDontRow>
+<DoDontRow>
+  <DoDont aspectRatio="9:16" text="9:16" />
+  <DoDont aspectRatio="1:2" text="1:2" />
+  <DoDont aspectRatio="3:4" text="3:4" />
+</DoDontRow>
+<DoDontRow>
+  <DoDont aspectRatio="1:1" text="1:1" />
+</DoDontRow>
+```
+
 ## Props
 
 ### DoDontRow
@@ -109,13 +152,13 @@ component, which now includes built in columns.
 
 ### Do & Dont
 
-| property       | propType | required | default            | description                                                                                                                                                                                                                                      |
-| -------------- | -------- | -------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| children       | node     |          |                    | child node, expects a markdown image or `<Video>` component                                                                                                                                                                                      |
-| text           | string   |          |                    | text to display inside the component instead of an image or video                                                                                                                                                                                |
-| caption        | string   |          |                    | caption                                                                                                                                                                                                                                          |
-| captionTitle   | string   |          |                    | caption title                                                                                                                                                                                                                                    |
-| color          | string   |          | light              | set to `dark` for dark background card                                                                                                                                                                                                           |
-| aspectRatio    | string   |          |                    | set to `1:1` to force square example <br/>_(We welcome [contributions](https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/DoDontExample) to add additional aspect ratio options)_ |
-| type           | string   |          | `do`               | specify the type of example with `do` or `dont`                                                                                                                                                                                                  |
-| ...columnProps | number   |          | `colMd=4, colLg=4` | specify any `<Column>` props to pass down                                                                                                                                                                                                        |
+| property       | propType | required | default            | description                                                       |
+| -------------- | -------- | -------- | ------------------ | ----------------------------------------------------------------- |
+| children       | node     |          |                    | child node, expects a markdown image or `<Video>` component       |
+| text           | string   |          |                    | text to display inside the component instead of an image or video |
+| caption        | string   |          |                    | caption                                                           |
+| captionTitle   | string   |          |                    | caption title                                                     |
+| color          | string   |          | light              | set to `dark` for dark background card                            |
+| aspectRatio    | string   |          |                    | `1:1`,`1:2`,`2:1`,`3:4`,`4:3`,`16:9`,`9:16`                       |
+| type           | string   |          | `do`               | specify the type of example with `do` or `dont`                   |
+| ...columnProps | number   |          | `colMd=4, colLg=4` | specify any `<Column>` props to pass down                         |
diff --git a/packages/gatsby-theme-carbon/src/components/DoDontExample/do-dont-example.scss b/packages/gatsby-theme-carbon/src/components/DoDontExample/do-dont-example.scss
index f73ad4449..b3016e936 100644
--- a/packages/gatsby-theme-carbon/src/components/DoDontExample/do-dont-example.scss
+++ b/packages/gatsby-theme-carbon/src/components/DoDontExample/do-dont-example.scss
@@ -100,7 +100,7 @@
 }
 
 .#{$prefix}--example--correct .#{$prefix}--example-card::before {
-  background: $support-02;
+  background: $carbon--green-50;
 }
 
 .#{$prefix}--example--incorrect .#{$prefix}--example-card::before {
@@ -118,7 +118,7 @@
 }
 
 .#{$prefix}--example__icon--correct {
-  fill: $support-02;
+  fill: $carbon--green-50;
 }
 
 .#{$prefix}--example__icon--incorrect {
diff --git a/packages/gatsby-theme-carbon/src/components/DoDontRow/DoDont.js b/packages/gatsby-theme-carbon/src/components/DoDontRow/DoDont.js
index 583ea7e90..ef0e8ba5b 100644
--- a/packages/gatsby-theme-carbon/src/components/DoDontRow/DoDont.js
+++ b/packages/gatsby-theme-carbon/src/components/DoDontRow/DoDont.js
@@ -38,8 +38,22 @@ export default class DoDont extends React.Component {
     const wrapperClassNames = cx(className, styles.example, {
       [styles.correct]: type === 'do',
       [styles.incorrect]: type === 'dont',
-      [styles.square]: aspectRatio === '1:1',
       [styles.dark]: color === 'dark',
+      [styles.ratio]:
+        aspectRatio === '1:1' ||
+        aspectRatio === '2:1' ||
+        aspectRatio === '1:2' ||
+        aspectRatio === '4:3' ||
+        aspectRatio === '3:4' ||
+        aspectRatio === '9:16' ||
+        aspectRatio === '16:9',
+      [styles.ratio1x1]: aspectRatio === '1:1',
+      [styles.ratio2x1]: aspectRatio === '2:1',
+      [styles.ratio1x2]: aspectRatio === '1:2',
+      [styles.ratio4x3]: aspectRatio === '4:3',
+      [styles.ratio3x4]: aspectRatio === '3:4',
+      [styles.ratio9x16]: aspectRatio === '9:16',
+      [styles.ratio16x9]: aspectRatio === '16:9',
     });
 
     return (
diff --git a/packages/gatsby-theme-carbon/src/components/DoDontRow/DoDontRow.module.scss b/packages/gatsby-theme-carbon/src/components/DoDontRow/DoDontRow.module.scss
index 7085316c9..329890f85 100644
--- a/packages/gatsby-theme-carbon/src/components/DoDontRow/DoDontRow.module.scss
+++ b/packages/gatsby-theme-carbon/src/components/DoDontRow/DoDontRow.module.scss
@@ -103,10 +103,34 @@
   color: $carbon--white-0;
 }
 
-.square .card {
+.ratio1x1 .card {
   padding-top: 100%;
 }
 
+.ratio4x3 .card {
+  padding-top: 75%;
+}
+
+.ratio3x4 .card {
+  padding-top: 133.3333333333%;
+}
+
+.ratio2x1 .card {
+  padding-top: 50%;
+}
+
+.ratio1x2 .card {
+  padding-top: 150%;
+}
+
+.ratio9x16 .card {
+  padding-top: 177.7777777778%;
+}
+
+.ratio16x9 .card {
+  padding-top: 56.25%;
+}
+
 .card::before {
   content: '';
   position: absolute;
@@ -145,7 +169,7 @@
   position: relative;
 }
 
-.square .card-content {
+.ratio .card-content {
   position: absolute;
   top: 0;
   left: 0;