diff --git a/projects/rero/ng-core/assets/scss/_theme.scss b/projects/rero/ng-core/assets/scss/_theme.scss
index 6abb96cc..602e41f3 100644
--- a/projects/rero/ng-core/assets/scss/_theme.scss
+++ b/projects/rero/ng-core/assets/scss/_theme.scss
@@ -66,3 +66,21 @@ legend {
   @extend .text-base;
   width: auto;
 }
+
+// CALLOUT
+.callout {
+  border: 1px solid var(--surface-300);
+  border-left: 5px solid var(--surface-300);
+  border-radius: 5px;
+}
+
+@each $variant in $callout-variants {
+  .callout-#{$variant} {
+    border: 1px solid rgba(var(--callout-color-#{$variant}), 0.3);
+    border-left: 5px solid rgb(var(--callout-color-#{$variant}));
+  }
+
+  .callout-bg-#{$variant} {
+    background-color: rgba(var(--callout-color-#{$variant}), 0.05);
+  }
+}
diff --git a/projects/rero/ng-core/assets/scss/variables.scss b/projects/rero/ng-core/assets/scss/variables.scss
new file mode 100644
index 00000000..d0a90330
--- /dev/null
+++ b/projects/rero/ng-core/assets/scss/variables.scss
@@ -0,0 +1,29 @@
+/*
+ * RERO angular core
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+$callout-variants: info, success, warning, danger;
+
+:root {
+  // Blue: #2563eb
+  --callout-color-info: 37, 99, 235;
+  // Green #22c55e
+  --callout-color-success: 34, 197, 94;
+  // Yellow #eab308
+  --callout-color-warning: 234, 179, 8;
+  // Red: #ff3d32
+  --callout-color-danger: 255, 61, 50;
+}