diff --git a/layouts/shortcodes/attachments.html b/layouts/shortcodes/attachments.html
index d688b71856..2733247b53 100644
--- a/layouts/shortcodes/attachments.html
+++ b/layouts/shortcodes/attachments.html
@@ -1,9 +1,8 @@
 {{ $_hugo_config := `{ "version": 1 }` }}
-<section class="attachments {{ with .Get "style"}}{{.}}{{ end }}">
-	<label>
-		<i class="fas fa-paperclip" aria-hidden="true"></i>
-		{{with .Get "title"}}{{.}}{{else}}{{T "Attachments-label"}}{{end}}
-	</label>
+{{ $style := .Get "style" | default "neutral" }}
+{{ $title := .Get "title" | default ("Attachments-label" | T) }}
+<section class="attachments {{ $style }}">
+	<div class="label">{{ $title }}</div>
 	{{if eq .Page.File.BaseFileName "index"}}
 		{{$.Scratch.Add "filesName" "files"}}
 	{{else}}
@@ -33,4 +32,3 @@
 	</div>
 	{{.Inner}}
 </section>
-
diff --git a/static/css/theme.css b/static/css/theme.css
index 309afb24ff..158724b261 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -531,65 +531,71 @@ div.notices.tip > div.label:first-child:before {
 /* attachments shortcode */
 
 section.attachments {
+    border-top-width: 2rem;
+    border-top-style: solid;
+    color: #505050;
     margin: 2rem 0;
-    position: relative;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-bottom: .1px;
 }
 
-section.attachments label {
-    font-weight: 400;
-    padding-left: 0.5em;
-    padding-top: 0.2em;
-    padding-bottom: 0.2em;
-    margin: 0;
+section.attachments > div.label {
+    color: #fff;
+    font-weight: normal;
+    margin-bottom: 1rem;
+    margin-top: -1.75rem;
+}
+
+section.attachments > div.label:first-child:before {
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+    margin-left: -.35rem;
+    margin-right: .35rem;
+    content: "\f0c6";
 }
 
 section.attachments .attachments-files {
-    padding: 15px;
+    padding: 1rem;
     display: block;
     font-size: 1rem;
-    margin-top: 0rem;
+    margin-top: -1rem;
     margin-bottom: 0rem;
-    color: #666;
 }
 
-section.attachments.orange label {
-    color: #fff;
-    background: #F0B37E;
+section.attachments.orange {
+    border-color: #BF8B44;
+    background-color: #FFF2DB;
 }
 
-section.attachments.orange .attachments-files {
-    background: #FFF2DB;
+section.attachments.green {
+    border-color: #5AA55A;
+    background-color: #E6F9E6;
 }
 
-section.attachments.green label {
-    color: #fff;
-    background: rgba(92, 184, 92, 0.8);
+section.attachments.red {
+    border-color: #D96A68;
+    background-color: #FFEBEB;
 }
 
-section.attachments.green .attachments-files {
-    background: #E6F9E6;
+section.attachments.blue {
+    border-color: #4897CC;
+    background-color: #E9F5FD;
 }
 
-section.attachments.blue label {
-    color: #fff;
-    background: #6AB0DE;
+section.attachments.grey {
+    border-color: #505D65;
+    background-color: #F4F4F4;
 }
 
-section.attachments.blue .attachments-files {
-    background: #E7F2FA;
+section.attachments.neutral {
+    border-color: transparent;
+    background-color: transparent;
 }
-
-section.attachments.grey label {
-    color: #fff;
-    background: #505d65;
+section.attachments.neutral > div.label {
+    color: #505050;
 }
 
-section.attachments.grey .attachments-files {
-    background: #f4f4f4;
-}
-
-/* Children shortcode */
-
 /* Children shortcode */
 .children p {
     font-size: small;