Randomg things.

web/themes/custom/dchadwick/components/alert/alert.component.yml

@@ -0,0 +1,13 @@
+name: Alert
+props:
+  type: object
+  properties:
+    alertType:
+      type: string
+      title: Alert Type
+      description: 'The type of alert.'
+slots:
+  alertText:
+    title: Alert Text
+    required: true
+    description: The test for the alert.

web/themes/custom/dchadwick/components/alert/alert.css

@@ -0,0 +1,21 @@
+.alert-wrapper .field_alert_text {
+  padding: 20px 0;
+  text-align: center;
+}
+
+.alert.normal {
+  background-color: deepskyblue;
+  color: darkblue;
+}
+
+.alert.warning {
+  background-color: goldenrod;
+  color: black;
+  font-weight: bold;
+}
+
+.alert.danger {
+  background-color: lightpink;
+  color: darkred;
+  font-weight: bolder;
+}

web/themes/custom/dchadwick/components/alert/alert.twig

@@ -0,0 +1,3 @@
+<div class="alert {{ alertType }}">
+  {% block alertText %}{% endblock %}
+</div>

web/themes/custom/dchadwick/templates/blocks/block--inline-block--alert.html.twig

@@ -0,0 +1,26 @@
+{#
+ * Component variables
+ *
+ * props:
+ *  alerType
+ *
+ * slots
+ *  alertText
+ *
+ #}
+<div {{ attributes.addClass('alert-wrapper') }}>
+  {{ title_prefix }}
+  {{ title_suffix }}
+
+  {% set alertType = content.field_alert_type.0['#markup']|clean_class %}
+  {% embed 'dchadwick:alert' with {
+    alertType: alertType,
+  }%}
+
+    {% block alertText %}
+      <p>{{ content.field_alert_text }}</p>
+    {% endblock%}
+
+  {% endembed %}
+
+</div>