1 files changed, 34 insertions, 0 deletions

diff --git a/assets/css/components/_hero.scss b/assets/css/components/_hero.scss
new file mode 100644
index 0000000..7fa79e1
--- /dev/null
+++ b/assets/css/components/_hero.scss
@@ -0,0 +1,34 @@
+.c-hero {
+    margin-bottom: $line-height * 2em;
+    margin-left: -1 * $page--item-prefix--width;
+    padding-left: $page--item-prefix--width;
+    overflow: hidden;
+
+    &::after {
+        content: str-repeat('░', 120);
+        display: block;
+        position: relative;
+        z-index: -10;
+        height: $line-height;
+        margin-top: px-to-em(2px);
+        margin-left: -1 * $page--item-prefix--width;
+        padding-top: px-to-em(2px);
+        border-top: 1px solid var(--fg-hi);
+        color: var(--fg-hi);
+        line-height: $code-block--line-height;
+    }
+
+    &__pre {
+        margin-top: 0;
+        overflow: hidden;
+    }
+
+    @media (max-width: map-get($breakpoints, 'sm')) {
+        margin-left: 0;
+        padding-left: 0;
+
+        &::after {
+            margin-left: 0;
+        }
+    }
+}