diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index 8b2b90b75..448917c1d 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -200,25 +200,79 @@ export default {
     }
     &.alert-info {
         background-color: $blue-100;
-        .alert-heading {
-            color: $blue-700;
+
+        &.bordered {
+            border-color: $blue-400;
+        }
+
+        &.text-start {
+            .alert-heading {
+                display: flex;
+                align-items: center;
+                color: $black;
+                font-weight: 700;
+
+                .warning-icon {
+                    margin-right: 0.5rem;
+                }
+            }
+            hr {
+                margin-top: 0.5rem;
+                margin-bottom: 0.5rem;
+                border-color: $blue-400;
+            }
+        }
+        &.text-center {
+            .alert-heading {
+                color: $blue-700;
+            }
         }
         svg {
             fill: $blue-700;
             width: 1rem;
             height: 1rem;
         }
+        hr {
+            border-color: $red-800;
+        }
     }
     &.alert-danger {
         background-color: $red-100;
-        .alert-heading {
-            color: $red-600;
+
+        &.bordered {
+            border-color: $red-400;
+        }
+
+        &.text-start {
+            .alert-heading {
+                display: flex;
+                align-items: center;
+                color: $black;
+                font-weight: 700;
+
+                .warning-icon {
+                    margin-right: 0.5rem;
+                }
+            }
+            hr {
+                margin-top: 0.5rem;
+                margin-bottom: 0.5rem;
+                border-color: $red-400;
+            }
+        }
+        &.text-center {
+            .alert-heading {
+                color: $red-600;
+            }
         }
         svg {
             fill: $red-600;
             width: 1rem;
             height: 1rem;
         }
+        hr {
+            border-color: $red-800;
+        }
     }
     &.alert-warning {
         background-color: $yellow-100;
@@ -268,14 +322,42 @@ export default {
     }
     &.alert-success {
         background-color: $green-100;
-        .alert-heading {
-            color: $green-700;
+
+        &.bordered {
+            border-color: $green-400;
+        }
+
+        &.text-start {
+            .alert-heading {
+                display: flex;
+                align-items: center;
+                color: $black;
+                font-weight: 700;
+
+                .warning-icon {
+                    margin-right: 0.5rem;
+                }
+            }
+            hr {
+                margin-top: 0.5rem;
+                margin-bottom: 0.5rem;
+                border-color: $green-400;
+            }
+        }
+
+        &.text-center {
+            .alert-heading {
+                color: $green-700;
+            }
         }
         svg {
             fill: $green-700;
             width: 1rem;
             height: 1rem;
         }
+        hr {
+            border-color: $green-800;
+        }
     }
     &.bordered {
         border: 1px solid;