diff --git a/src/AspectRatio/AspectRatio.svelte b/src/AspectRatio/AspectRatio.svelte
index b22edc82..a4cb0577 100644
--- a/src/AspectRatio/AspectRatio.svelte
+++ b/src/AspectRatio/AspectRatio.svelte
@@ -7,9 +7,15 @@
 </script>
 
 <div
-  {...$$restProps}
   class:bx--aspect-ratio="{true}"
-  class="bx--aspect-ratio--{ratio} {$$restProps.class}"
+  class:bx--aspect-ratio--2x1="{ratio === '2x1'}"
+  class:bx--aspect-ratio--16x9="{ratio === '16x9'}"
+  class:bx--aspect-ratio--4x3="{ratio === '4x3'}"
+  class:bx--aspect-ratio--1x1="{ratio === '1x1'}"
+  class:bx--aspect-ratio--3x4="{ratio === '3x4'}"
+  class:bx--aspect-ratio--9x16="{ratio === '9x16'}"
+  class:bx--aspect-ratio--1x2="{ratio === '1x2'}"
+  {...$$restProps}
 >
   <div class:bx--aspect-ratio--object="{true}">
     <slot />