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 }` }}
-
{{ .Inner }}
+
+
{{ .Get 0 | T }}
+ {{ .Inner }}
+
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';
}