diff --git a/exampleSite/content/shortcodes/notice.en.md b/exampleSite/content/shortcodes/notice.en.md
index c82a6e9f5a..24e4d0716a 100644
--- a/exampleSite/content/shortcodes/notice.en.md
+++ b/exampleSite/content/shortcodes/notice.en.md
@@ -10,6 +10,8 @@ The notice shortcode shows 4 types of disclaimers to help you structure your pag
 ```
 {{%/* notice note */%}}
 A notice disclaimer
+
+With multiple paragraphs
 {{%/* /notice */%}}
 ```
 
@@ -17,6 +19,8 @@ renders as
 
 {{% notice note %}}
 A notice disclaimer
+
+With multiple paragraphs
 {{% /notice %}}
 
 ### Info
diff --git a/layouts/shortcodes/notice.html b/layouts/shortcodes/notice.html
index 0e3324719b..b705613cf6 100644
--- a/layouts/shortcodes/notice.html
+++ b/layouts/shortcodes/notice.html
@@ -1,2 +1,5 @@
 {{ $_hugo_config := `{ "version": 1 }` }}
-<div class="notices {{ .Get 0 }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>{{ .Inner }}</div>
+<div class="notices {{ .Get 0 }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
+  <div class="label">{{ .Get 0 | T }}</div>
+  {{ .Inner }}
+</div>
diff --git a/static/css/theme.css b/static/css/theme.css
index 6385fcace9..661bcb5055 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -476,57 +476,53 @@ blockquote cite {
 }
 div.notices {
     margin: 2rem 0;
-    position: relative;
+    padding-bottom: .1px;
+    padding-left: 1rem;
+    padding-right: 1rem;
 }
-div.notices p {
-    padding: 15px;
-    display: block;
-    font-size: 1rem;
-    margin-top: 0rem;
-    margin-bottom: 0rem;
+div.notices > * {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
     color: #666;
 }
-div.notices p:first-child:before {
-    position: absolute;
-    top: 2px;
+div.notices > div.label {
     color: #fff;
+    margin-bottom: 1rem;
+    margin-top: -1.75rem;
+}
+div.notices > div.label:first-child:before {
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     content: "\f06a";
-    left: 10px;
+    margin-left: -.35rem;
+    margin-right: .35rem;
 }
-div.notices p:first-child:after {
-    position: absolute;
-    top: 2px;
-    color: #fff;
-    left: 2rem;
-}
-div.notices.info p {
+div.notices.info {
     border-top: 30px solid #F0B37E;
     background: #FFF2DB;
 }
-div.notices.info p:first-child:after {
+div.notices.info > div.label:first-child:after {
     content: 'Info';
 }
-div.notices.warning p {
+div.notices.warning {
     border-top: 30px solid rgba(217, 83, 79, 0.8);
     background: #FAE2E2;
 }
-div.notices.warning p:first-child:after {
+div.notices.warning > div.label:first-child:after {
     content: 'Warning';
 }
-div.notices.note p {
+div.notices.note {
     border-top: 30px solid #6AB0DE;
     background: #E7F2FA;
 }
-div.notices.note p:first-child:after {
+div.notices.note > div.label:first-child:after {
     content: 'Note';
 }
-div.notices.tip p {
+div.notices.tip {
     border-top: 30px solid rgba(92, 184, 92, 0.8);
     background: #E6F9E6;
 }
-div.notices.tip p:first-child:after {
+div.notices.tip > div.label:first-child:after {
     content: 'Tip';
 }