diff --git a/src/ui/c-alert/c-alert.demo.vue b/src/ui/c-alert/c-alert.demo.vue
index 844d8703..69f3ea46 100644
--- a/src/ui/c-alert/c-alert.demo.vue
+++ b/src/ui/c-alert/c-alert.demo.vue
@@ -3,9 +3,17 @@ const variants = ['warning', 'error'] as const;
 </script>
 
 <template>
+  <h2>Basic</h2>
   <c-alert v-for="variant in variants" :key="variant" :type="variant" mb-4>
     Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni reprehenderit itaque enim? Suscipit magni optio velit
     quia, eveniet repellat pariatur quaerat laudantium dignissimos natus, beatae deleniti adipisci, atque necessitatibus
     odio!
   </c-alert>
+
+  <h2>With title</h2>
+  <c-alert v-for="variant in variants" :key="variant" :type="variant" title="This is the title" mb-4>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni reprehenderit itaque enim? Suscipit magni optio velit
+    quia, eveniet repellat pariatur quaerat laudantium dignissimos natus, beatae deleniti adipisci, atque necessitatibus
+    odio!
+  </c-alert>
 </template>
diff --git a/src/ui/c-alert/c-alert.vue b/src/ui/c-alert/c-alert.vue
index 607acb9f..8a3b55e8 100644
--- a/src/ui/c-alert/c-alert.vue
+++ b/src/ui/c-alert/c-alert.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { useTheme } from './c-alert.theme';
 
-const props = withDefaults(defineProps<{ type?: 'warning' }>(), { type: 'warning' });
-const { type } = toRefs(props);
+const props = withDefaults(defineProps<{ type?: 'warning'; title?: string }>(), { type: 'warning', title: undefined });
+const { type, title } = toRefs(props);
 
 const theme = useTheme();
 const variantTheme = computed(() => theme.value[type.value]);
@@ -17,6 +17,9 @@ const variantTheme = computed(() => theme.value[type.value]);
     </div>
 
     <div class="c-alert--content">
+      <div v-if="title" class="c-alert--title" text-15px fw-600>
+        {{ title }}
+      </div>
       <slot />
     </div>
   </div>