diff --git a/webclient/src/scss/ui_components/_alerts.scss b/webclient/src/scss/ui_components/_alerts.scss
new file mode 100644
index 0000000..29172e8
--- /dev/null
+++ b/webclient/src/scss/ui_components/_alerts.scss
@@ -0,0 +1,44 @@
+$alert-bg-alpha: 0.1;
+
+.alert {
+	padding: $space-3 $space-4;
+	border-left-style: solid;
+	border-left-width: 4px;
+	color: $color-text-light;
+
+	&.alert-primary {
+		border-color: $color-primary;
+		background: rgba($color-primary, $alert-bg-alpha);
+		color: $color-primary;
+	}
+
+	&.alert-success {
+		border-color: $color-success;
+		background: rgba($color-success, $alert-bg-alpha);
+		color: $color-success;
+	}
+
+	&.alert-secondary {
+		border-color: $color-secondary;
+		background: rgba($color-secondary, $alert-bg-alpha);
+		color: lighten($color-secondary, 10%);
+	}
+
+	&.alert-info {
+		border-color: $color-info;
+		background: rgba($color-info, $alert-bg-alpha);
+		color: lighten($color-info, 20%);
+	}
+
+	&.alert-warning {
+		border-color: $color-warning;
+		background: rgba($color-warning, $alert-bg-alpha);
+		color: $color-warning;
+	}
+
+	&.alert-error, &.alert-danger {
+		border-color: $color-error;
+		background: rgba($color-error, $alert-bg-alpha);
+		color: lighten($color-error, 15%);
+	}
+}
\ No newline at end of file
diff --git a/webclient/ui.php b/webclient/ui.php
index cf973f1..7ed70ca 100644
--- a/webclient/ui.php
+++ b/webclient/ui.php
@@ -23,6 +23,7 @@
 		<? include "ui_components/forms.php" ?>
 		<? include "ui_components/lists.php" ?>
 		<? include "ui_components/badges.php" ?>
+		<? include "ui_components/alerts.php" ?>
 		<? include "ui_components/tables.php" ?>
 		<? include "ui_components/toasts.php" ?>
 		<? include "ui_components/cards.php" ?>
diff --git a/webclient/ui_components/alerts.php b/webclient/ui_components/alerts.php
new file mode 100644
index 0000000..afcc7e1
--- /dev/null
+++ b/webclient/ui_components/alerts.php
@@ -0,0 +1,10 @@
+<section class="section" id="alerts">
+	<h2 class="section-title">Alerts</h2>
+
+	<div class="alert alert-primary">This is a primary alert—check it out!</div>
+	<div class="alert alert-success">This is a success alert—check it out!</div>
+	<div class="alert alert-secondary">This is a secondary alert—check it out!</div>
+	<div class="alert alert-info">This is a info alert—check it out!</div>
+	<div class="alert alert-warning">This is a warning alert—check it out!</div>
+	<div class="alert alert-error">This is a error/danger alert—check it out!</div>
+</section>
\ No newline at end of file