diff --git a/src/scss/cdb-components/shapes/add.scss b/src/scss/cdb-components/shapes/add.scss
index a2e80b5..ac5616b 100644
--- a/src/scss/cdb-components/shapes/add.scss
+++ b/src/scss/cdb-components/shapes/add.scss
@@ -50,7 +50,7 @@ Description
   height: 16px;
   text-align: center;
 }
-.CDB-Shape .is-medium {
+.CDB-Shape--medium {
   width: 24px;
   height: 24px;
 }
diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/threePoints.scss
index fe268d6..2eecdf4 100644
--- a/src/scss/cdb-components/shapes/threePoints.scss
+++ b/src/scss/cdb-components/shapes/threePoints.scss
@@ -6,7 +6,7 @@ Description
 ```
 <h2>24px</h2>
 <div style="padding: 20px;">
-  <button class="CDB-Shape is-medium" style="background: rgba(0, 0, 0, .02);">
+  <button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .02);">
     <div class="CDB-Shape-threePoints is-horizontal is-medium">
       <div class="CDB-Shape-threePointsItem is-round"></div>
       <div class="CDB-Shape-threePointsItem is-round"></div>
@@ -15,7 +15,7 @@ Description
   </button>
 </div>
 <div style="padding: 20px;">
-  <button class="CDB-Shape is-medium" style="background: rgba(0, 0, 0, .02);">
+  <button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .02);">
     <div class="CDB-Shape-threePoints is-horizontal is-blue is-medium">
       <div class="CDB-Shape-threePointsItem is-round"></div>
       <div class="CDB-Shape-threePointsItem is-round"></div>
@@ -24,7 +24,7 @@ Description
   </button>
 </div>
 <div style="padding: 20px; background: #2E3C43;">
-  <button class="CDB-Shape is-medium" style="background: rgba(0, 0, 0, .08);">
+  <button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .08);">
     <div class="CDB-Shape-threePoints is-horizontal is-white is-medium">
       <div class="CDB-Shape-threePointsItem is-round"></div>
       <div class="CDB-Shape-threePointsItem is-round"></div>