diff --git a/src/main/java/io/jenkins/plugins/designlibrary/Banner.java b/src/main/java/io/jenkins/plugins/designlibrary/Banner.java
new file mode 100644
index 00000000..e527ab35
--- /dev/null
+++ b/src/main/java/io/jenkins/plugins/designlibrary/Banner.java
@@ -0,0 +1,21 @@
+package io.jenkins.plugins.designlibrary;
+
+import hudson.Extension;
+
+@Extension
+public class Banner extends UISample {
+    @Override
+    public String getDisplayName() {
+        return "Banner";
+    }
+
+    @Override
+    public String getIconFileName() {
+        return "symbol-information-circle-outline plugin-ionicons-api";
+    }
+
+    @Extension
+    public static final class DescriptorImpl extends UISampleDescriptor {
+    }
+}
+
diff --git a/src/main/resources/io/jenkins/plugins/designlibrary/Banner/index.jelly b/src/main/resources/io/jenkins/plugins/designlibrary/Banner/index.jelly
new file mode 100644
index 00000000..a28bc89b
--- /dev/null
+++ b/src/main/resources/io/jenkins/plugins/designlibrary/Banner/index.jelly
@@ -0,0 +1,25 @@
+<?jelly escape-by-default='true'?>
+<j:jelly xmlns:j="jelly:core" xmlns:s="/lib/samples">
+  <s:sample>
+    <div class="jdl-leading-paragraph">
+      Banners are a handy way to display small snippets of text and actions.
+    </div>
+    <div class="jdl-component-group">
+      <div class="jdl-component-sample jdl-component-sample--full-width jdl-component-sample--gridless">
+        <div class="alert alert-info">
+          Hello world
+        </div>
+        <div class="alert alert-warning">
+          Hello world
+        </div>
+        <div class="alert alert-danger">
+          Hello world
+        </div>
+        <div class="alert alert-success jenkins-!-margin-bottom-0">
+          Hello world
+        </div>
+      </div>
+      <s:code language="xml" file="index.jelly" />
+    </div>
+  </s:sample>
+</j:jelly>
diff --git a/src/main/webapp/Banner/index.jelly b/src/main/webapp/Banner/index.jelly
new file mode 100644
index 00000000..d9219da7
--- /dev/null
+++ b/src/main/webapp/Banner/index.jelly
@@ -0,0 +1,12 @@
+<div class="alert alert-info">
+  Hello world
+</div>
+<div class="alert alert-warning">
+  Hello world
+</div>
+<div class="alert alert-danger">
+  Hello world
+</div>
+<div class="alert alert-success">
+  Hello world
+</div>