diff --git a/assets/css/typography.css b/assets/css/typography.css
index e330e93..7de4e7d 100644
--- a/assets/css/typography.css
+++ b/assets/css/typography.css
@@ -23,6 +23,9 @@
   a {
     @apply text-primary-600 underline decoration-from-font [text-underline-position:from-font];
   }
+  .not-prose a {
+    @apply text-current no-underline;
+  }
   blockquote {
     @apply mt-6 border-gray-300 italic text-gray-700 dark:border-gray-700 dark:text-gray-400 first:mt-0 ltr:border-l-2 ltr:pl-6 rtl:border-r-2 rtl:pr-6;
   }
diff --git a/content/docs/guide/callouts.md b/content/docs/guide/callouts.md
new file mode 100644
index 0000000..cb3c11f
--- /dev/null
+++ b/content/docs/guide/callouts.md
@@ -0,0 +1,24 @@
+---
+title: Callout Component
+linkTitle: Callout
+---
+
+A built-in component to show important information to the reader.
+
+## Example
+
+{{< callout emoji="👾">}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+{{< callout type="info" >}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+{{< callout type="warning" >}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+{{< callout type="error" >}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
diff --git a/layouts/shortcodes/callout.html b/layouts/shortcodes/callout.html
new file mode 100644
index 0000000..1b193d0
--- /dev/null
+++ b/layouts/shortcodes/callout.html
@@ -0,0 +1,24 @@
+{{ $calloutEmojiDict := dict "info" "ℹ️" "warning" "⚠️" "error" "🚫" }}
+{{ $type := .Get "type" | default "default" }}
+{{/* If emoji is not set, use the emoji from dict */}}
+{{ $emoji := .Get "emoji" }}
+{{ if eq $emoji "" }}
+  {{ $emoji = index $calloutEmojiDict $type }}
+{{ end }}
+
+{{ $defaultClass := "border-orange-100 bg-orange-50 text-orange-800 dark:border-orange-400/30 dark:bg-orange-400/20 dark:text-orange-300" }}
+{{ $infoClass := "border-blue-200 bg-blue-100 text-blue-900 dark:border-blue-200/30 dark:bg-blue-900/30 dark:text-blue-200" }}
+{{ $warningClass := "border-yellow-100 bg-yellow-50 text-yellow-900 dark:border-yellow-200/30 dark:bg-yellow-700/30 dark:text-yellow-200" }}
+{{ $errorClass := "border-red-200 bg-red-100 text-red-900 dark:border-red-200/30 dark:bg-red-900/30 dark:text-red-200" }}
+
+
+{{ $class := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) }}
+
+<div class="overflow-x-auto mt-6 flex rounded-lg border py-2 ltr:pr-4 rtl:pl-4 contrast-more:border-current contrast-more:dark:border-current {{ $class }}">
+  <div class="select-none text-xl ltr:pl-3 ltr:pr-2 rtl:pr-3 rtl:pl-2" style='font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";'>{{ $emoji }}</div>
+  <div class="w-full min-w-0 leading-7">
+    <p class="mt-6 leading-7 first:mt-0">
+      {{ .Inner | markdownify }}
+    </p>
+  </div>
+</div>