matcornic · McShelby · Sep 20, 2020 · Sep 20, 2020 · Sep 20, 2020 · Sep 20, 2020
diff --git a/exampleSite/content/shortcodes/notice.en.md b/exampleSite/content/shortcodes/notice.en.md
@@ -10,13 +10,17 @@ The notice shortcode shows 4 types of disclaimers to help you structure your pag
 ```
 {{%/* notice note */%}}
 A notice disclaimer
+
+A second paragraph in the disclaimer
 {{%/* /notice */%}}
 ```
 
 renders as
 
 {{% notice note %}}
 A notice disclaimer
+
+A second paragraph in the disclaimer
 {{% /notice %}}
 
 ### Info

diff --git a/exampleSite/content/shortcodes/notice.fr.md b/exampleSite/content/shortcodes/notice.fr.md
@@ -9,13 +9,17 @@ Le shortcode *Notice* permet d'afficher 4 types de message pour vous aider à st
 
 ```
 {{%/* notice note */%}}
+Une notice de type *note*
+
 Une notice de type *note*
 {{%/* /notice */%}}
 ```
 
 s'affiche comme
 
 {{% notice note %}}
+Une notice de type *note*
+
 Une notice de type *note*
 {{% /notice %}}
 

diff --git a/i18n/ar.toml b/i18n/ar.toml
@@ -23,4 +23,16 @@ other = "تعديل هذه الصفحة"
 other = "المزيد"
 
 [Expand-title]
-other = "...قم بتوسيع"
+other = "...قم بتوسيع"
+
+[note]
+other = "Note"
+
+[info]
+other = "Info"
+
+[tip]
+other = "Tip"
+
+[warning]
+other = "Warning"
diff --git a/i18n/de.toml b/i18n/de.toml
@@ -23,4 +23,16 @@ other = "Bearbeite diese Seite"
 other = "Mehr"
 
 [Expand-title]
-other = "Erweitere mich..."
+other = "Erweitere mich..."
+
+[note]
+other = "Anmerkung"
+
+[info]
+other = "Info"
+
+[tip]
+other = "Tipp"
+
+[warning]
+other = "Warnung"
diff --git a/i18n/en.toml b/i18n/en.toml
@@ -23,4 +23,16 @@ other = "Edit this page"
 other = "More"
 
 [Expand-title]
-other = "Expand me..."
+other = "Expand me..."
+
+[note]
+other = "Note"
+
+[info]
+other = "Info"
+
+[tip]
+other = "Tip"
+
+[warning]
+other = "Warning"
diff --git a/i18n/es.toml b/i18n/es.toml
@@ -24,3 +24,15 @@ other = "Más"
 
 [Expand-title]
 other = "Expandir..."
+
+[note]
+other = "Nota"
+
+[info]
+other = "Información"
+
+[tip]
+other = "Consejo"
+
+[warning]
+other = "Aviso"
diff --git a/i18n/fr.toml b/i18n/fr.toml
@@ -23,4 +23,16 @@ other = "Modifier la page"
 other = "Aller plus loin"
 
 [Expand-title]
-other = "Déroulez-moi..."
+other = "Déroulez-moi..."
+
+[note]
+other = "Remarque"
+
+[info]
+other = "Information"
+
+[tip]
+other = "Astuce"
+
+[warning]
+other = "Avertissement"
diff --git a/i18n/hi.toml b/i18n/hi.toml
@@ -24,3 +24,15 @@ other = "अधिक सामग्री दिखाएं"
 
 [Expand-title]
 other = "विस्तार करे..."
+
+[note]
+other = "Note"
+
+[info]
+other = "Info"
+
+[tip]
+other = "Tip"
+
+[warning]
+other = "Warning"
diff --git a/i18n/id.toml b/i18n/id.toml
@@ -24,3 +24,15 @@ other = "Lainnya"
 
 [Expand-title]
 other = "Bentangkan..."
+
+[note]
+other = "Note"
+
+[info]
+other = "Info"
+
+[tip]
+other = "Tip"
+
+[warning]
+other = "Warning"
diff --git a/i18n/ja.toml b/i18n/ja.toml
@@ -24,3 +24,15 @@ other = "更に"
 
 [Expand-title]
 other = "開く..."
+
+[note]
+other = "Note"
+
+[info]
+other = "Info"
+
+[tip]
+other = "Tip"
+
+[warning]
+other = "Warning"
diff --git a/i18n/nl.toml b/i18n/nl.toml
@@ -24,3 +24,15 @@ other = "Snelkoppelingen"
 
 [Expand-title]
 other = "Lees meer..."
+
+[note]
+other = "Note"
+
+[info]
+other = "Info"
+
+[tip]
+other = "Tip"
+
+[warning]
+other = "Warning"
diff --git a/i18n/pt.toml b/i18n/pt.toml
@@ -24,3 +24,15 @@ other = "Mais"
 
 [Expand-title]
 other = "Expandir..."
+
+[note]
+other = "Nota"
+
+[info]
+other = "Informação"
+
+[tip]
+other = "Dica"
+
+[warning]
+other = "Aviso"
diff --git a/i18n/ru.toml b/i18n/ru.toml
@@ -23,4 +23,16 @@ other = "Редактировать"
 other = "Еще"
 
 [Expand-title]
-other = "Развернуть..."
+other = "Развернуть..."
+
+[note]
+other = "Заметка"
+
+[info]
+other = "Информация"
+
+[tip]
+other = "Совет"
+
+[warning]
+other = "Внимание"
diff --git a/i18n/tr.toml b/i18n/tr.toml
@@ -24,3 +24,15 @@ other = "Dahası Var"
 
 [Expand-title]
 other = "Genişlet..."
+
+[note]
+other = "Note"
+
+[info]
+other = "Info"
+
+[tip]
+other = "Tip"
+
+[warning]
+other = "Warning"
diff --git a/i18n/zh-cn.toml b/i18n/zh-cn.toml
@@ -24,3 +24,15 @@ other = "更多"
 
 [Expand-title]
 other = "展开"
+
+[note]
+other = "注释"
+
+[info]
+other = "信息"
+
+[tip]
+other = "提示"
+
+[warning]
+other = "警告"
diff --git 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
@@ -481,59 +481,56 @@ blockquote cite {
     font-size: 1.2rem;
 }
 div.notices {
+    border-top-width: 2rem;
+    border-top-style: solid;
+    color: #666;
     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;
-    color: #666;
+div.notices > * {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
 }
-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;
-}
-div.notices p:first-child:after {
-    position: absolute;
-    top: 2px;
-    color: #fff;
-    left: 2rem;
+    margin-left: -.35rem;
+    margin-right: .35rem;
 }
-div.notices.info p {
-    border-top: 30px solid #F0B37E;
-    background: #FFF2DB;
+div.notices.info {
+    border-color: #6AB0DE;
+    background: #E7F2FA;
 }
-div.notices.info p:first-child:after {
-    content: 'Info';
+div.notices.info > div.label:first-child:before {
+    content: "\f05a";
 }
-div.notices.warning p {
-    border-top: 30px solid rgba(217, 83, 79, 0.8);
+div.notices.warning {
+    border-color: rgba(217, 83, 79, 0.8);
     background: #FAE2E2;
 }
-div.notices.warning p:first-child:after {
-    content: 'Warning';
+div.notices.warning > div.label:first-child:before {
+    content: "\f071";
 }
-div.notices.note p {
-    border-top: 30px solid #6AB0DE;
-    background: #E7F2FA;
+div.notices.note {
+    border-color: #F0B37E;
+    background: #FFF2DB;
 }
-div.notices.note p:first-child:after {
-    content: 'Note';
+div.notices.note > div.label:first-child:before {
+    content: "\f06a";
 }
-div.notices.tip p {
-    border-top: 30px solid rgba(92, 184, 92, 0.8);
+div.notices.tip {
+    border-color: rgba(92, 184, 92, 0.8);
     background: #E6F9E6;
 }
-div.notices.tip p:first-child:after {
-    content: 'Tip';
+div.notices.tip > div.label:first-child:before {
+    content: "\f0eb";
 }
 
 /* attachments shortcode */