Add Banner component

index.ts

@@ -3,7 +3,8 @@ import CallToAction from "./src/blocks/CallToAction.astro";
 import Hero from "./src/blocks/Hero.astro"
 
 // Components
+import Banner from "./src/Banner.astro"
 import Image from "./src/Image.astro";
 
 // Export
-export {CallToAction, Image, Hero}
+export {Banner, CallToAction, Image, Hero}

src/Banner.astro

@@ -0,0 +1,48 @@
+---
+const {
+    Title,
+    Message,
+    Type,
+    Link
+} = Astro.props
+---
+
+<a href={Link} class={"pd-banner pd-banner-type-" + Type}>
+    <p class="pd-banner-title"><slot name="icon"/> {Title}</p>
+    <p class="pd-banner-message">{Message}</p>
+</a>
+
+<style>
+.pd-banner {
+    background: gray;
+    color: white;
+    display: flex;
+    align-items: center;
+    border-radius: 6px;
+    margin-bottom: 24px;
+    @media screen and (max-width: 800px) {
+        flex-direction: column;
+        .pd-banner-message {padding: 24px}
+    }
+    p {
+        margin: 0px;
+    }
+    .pd-banner-title {
+        @media screen and (max-width: 800px) {
+            border-radius: 6px 6px 0px 0px !important;
+            width: 100%;
+            padding: 12px 0px 12px 50px !important;
+        }
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        background: #00000038;
+        padding: 12px 16px;
+        border-radius: 6px 0px 0px 6px;
+        margin-right: 12px;
+    }
+}
+.pd-banner-type-Dangerous {background: #a42626;    color: white}
+.pd-banner-type-Update {background: #3a66b9;    color: white}
+.pd-banner-type-Warning {background: #e6e680;    color: black}
+</style>