diff --git a/core/frontend/src/cards/css/callout.css b/core/frontend/src/cards/css/callout.css
index 60792072e2..dc5e671c62 100644
--- a/core/frontend/src/cards/css/callout.css
+++ b/core/frontend/src/cards/css/callout.css
@@ -1,43 +1,43 @@
-.kg-card-callout {
+.kg-callout-card {
     display: flex;
     padding: 20px 28px;
     border-radius: 3px;
 }
 
-.kg-card-callout-grey {
+.kg-callout-card-grey {
     background: rgba(124, 139, 154, 0.13);
 }
 
-.kg-card-callout-white {
+.kg-callout-card-white {
     background: transparent;
     box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
 }
 
-.kg-card-callout-blue {
+.kg-callout-card-blue {
     background: rgba(33, 172, 232, 0.12);
 }
 
-.kg-card-callout-green {
+.kg-callout-card-green {
     background: rgba(52, 183, 67, 0.12);
 }
 
-.kg-card-callout-yellow {
+.kg-callout-card-yellow {
     background: rgba(240, 165, 15, 0.13);
 }
 
-.kg-card-callout-red {
+.kg-callout-card-red {
     background: rgba(209, 46, 46, 0.11);
 }
 
-.kg-card-callout-pink {
+.kg-callout-card-pink {
     background: rgba(225, 71, 174, 0.11);
 }
 
-.kg-card-callout-purple {
+.kg-callout-card-purple {
     background: rgba(135, 85, 236, 0.12);
 }
 
-.kg-card-callout-accent {
+.kg-callout-card-accent {
     background: var(--ghost-accent-color);
     color: #fff;
 }
diff --git a/core/server/services/mega/template.js b/core/server/services/mega/template.js
index 3d37662fd4..dbd1a9e5cc 100644
--- a/core/server/services/mega/template.js
+++ b/core/server/services/mega/template.js
@@ -557,56 +557,56 @@ figure blockquote p {
     padding-bottom: 4px;
 }
 
-.kg-card-callout {
+.kg-callout-card {
     display: flex;
     margin: 0 0 1.5em 0;
     padding: 20px 28px;
     border-radius: 3px;
 }
 
-.kg-card-callout p {
+.kg-callout-card p {
     margin: 0
 }
 
-.kg-card-callout-grey {
+.kg-callout-card-grey {
     background: #eef0f2;
 }
 
-.kg-card-callout-white {
+.kg-callout-card-white {
     background: #fff;
     box-shadow: inset 0 0 0 1px #dddedf;
 }
 
-.kg-card-callout-blue {
+.kg-callout-card-blue {
     background: #E9F6FB;
 }
 
-.kg-card-callout-green {
+.kg-callout-card-green {
     background: #E8F8EA;
 }
 
-.kg-card-callout-yellow {
+.kg-callout-card-yellow {
     background: #FCF4E3;
 }
 
-.kg-card-callout-red {
+.kg-callout-card-red {
     background: #FBE9E9;
 }
 
-.kg-card-callout-pink {
+.kg-callout-card-pink {
     background: #FCEEF8;
 }
 
-.kg-card-callout-purple {
+.kg-callout-card-purple {
     background: #F2EDFC;
 }
 
-.kg-card-callout-accent {
+.kg-callout-card-accent {
     background: ${templateSettings.accentColor || '#15212A'};
     color: #fff;
 }
 
-.kg-card-callout-accent a {
+.kg-callout-card-accent a {
     color: #fff;
 }