diff --git a/.eleventy.js b/.eleventy.js
index b04f10c..3d9b9f6 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -66,13 +66,16 @@ module.exports = function(eleventyConfig) {
                     const code = token.content.trim();
                     if (code && code.toLowerCase().startsWith("title:")) {
                         const title = code.substring(6, code.indexOf("\n"));
-                        const titleDiv = title ? `<div class="admonition-title">${title}</div>` : '';
-                        return `<div class="language-${token.info} admonition admonition-example admonition-plugin">${titleDiv}${md.render(code.slice(code.indexOf("\n")))}</div>`;
+                        const titleDiv = title ? `<div class="callout-title"><div class="callout-title-inner">${title}</div></div>` : '';
+
+                        return `<div class="callout" data-callout="${token.info}">${titleDiv}\n<div class="callout-content">${md.render(code.slice(code.indexOf("\n")))}</div></div>`;
                     }
 
-                    const title = `<div class="admonition-title">${token.info.charAt(3).toUpperCase()}${token.info.substring(4).toLowerCase()}</div>`;
-                    return `<div class="language-${token.info} admonition admonition-example admonition-plugin">${title}${md.render(code)}</div>`;
+                    const title = `<div class="callout-title"><div class="callout-title-inner">${
+                        token.info.charAt(3).toUpperCase()}${token.info.substring(4).toLowerCase()
+                    }</div></div>`
 
+                    return `<div class="callout" data-callout="${token.info}">${title}\n<div class="callout-content">${md.render(code)}</div></div>`;
                 }
 
                 // Other languages
diff --git a/src/site/styles/digital-garden-base.scss b/src/site/styles/digital-garden-base.scss
index 4a97eed..a67c80e 100644
--- a/src/site/styles/digital-garden-base.scss
+++ b/src/site/styles/digital-garden-base.scss
@@ -47,30 +47,6 @@ div.transclusion {
     }
 }
 
-.admonition-title {
-    font-size: 1.4rem;
-}
-
-div[class*="language-ad-"] .admonition-title::before,
-div[class*="callout-"] .admonition-title::before {
-    font-size: 1.4rem;
-    margin-bottom: 10px;
-    margin-right: 10px;
-}
-
-code[class*="language-ad-"] {
-    font-family: 'Roboto', sans-serif;
-    white-space: normal !important;
-}
-
-.theme-light div[class*="language-ad-"] {
-    color: rgb(12, 12, 12);
-}
-
-.theme-dark div[class*="language-ad-"] {
-    color: rgb(230, 230, 230);
-}
-
 ul.task-list {
     list-style: none;
     padding-left: 15px;