blockquotes

.storybook/preview.scss

@@ -17,7 +17,7 @@ div.sbdocs :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)) {
   font-size: 16px;
 }
 
-div.sbdocs-content {
+div.sbdocs-content  {
   h1 {
     font-family: 'Knowledge', sans-serif;
   }
@@ -34,18 +34,6 @@ div.sbdocs-content {
     margin: 1rem 0;
   }
 
- blockquote {
-    background-color: #ededed;
-    padding: 15px 20px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    margin: 2rem auto;
-    p {
-      font-size: 16px;
-      line-height: 22px;
-    }
-  }
-
   & > div > :where(p, ul, ol),
   .sb-anchor > div > :where(p, ul, ol) {
     font-size: 18px;
@@ -71,6 +59,20 @@ div.sbdocs-content {
   }
 }
 
+.sbdocs-content  {
+  blockquote:not(.sb-unstyled *) {
+    background-color: #ededed;
+    padding: 15px 20px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin: 2rem auto;
+    p {
+      font-size: 16px;
+      line-height: 22px;
+    }
+  }
+}
+
 .sbdocs-content div.sbdocs:not(.sb-unstyled) {
   font-family: 'Knowledge', sans-serif;
 

src/components/BodyText/BodyText.stories.svelte

@@ -67,6 +67,9 @@ Sirloin beef flank labore cillum venison pariatur cow nulla ut irure in consequa
 
 Biltong enim consequat pork chop, flank ea.
 
+> Officia ball tip sed tenderloin dolore. Est magna enim, turkey in turducken flank jowl ad lorem buffalo ground
+> > Ronald McDonald
+
 Flank bacon sint dolore porchetta strip steak. Tail capicola flank nostrud meatball consequat pastrami lorem cupidatat chuck drumstick ham hock bresaola sint.
 
 ##### Venison pork chop
@@ -100,11 +103,12 @@ Ham hock id porchetta elit. Sint spare ribs aute buffalo.
     padding: 2px 5px;
     border-radius: 4px;
     font-weight: 800;
+    line-height: 1;
     &:hover {
       color: #999;
     }
     @media (max-width: 800px) {
-      color: white;
+      color: white !important;
     }
   }
   .body-text-typography-example-story {
@@ -148,5 +152,17 @@ Ham hock id porchetta elit. Sint spare ribs aute buffalo.
         font-size: 12px;
       }
     }
+    blockquote {
+      position: relative;
+      &:before {
+        @extend %heading-tag;
+        content: '“';
+        font-size: 3rem;
+        line-height: 3rem;
+      }
+      blockquote:before {
+        display: none;
+      }
+    }
   }
 </style>

src/scss/reset/_typography.scss

@@ -113,3 +113,26 @@ figcaption {
   @include text-secondary;
   @include font-note;
 }
+
+blockquote {
+  margin-inline: 0;
+  padding-left: 1rem;
+  border-left: 1px solid $theme-colour-brand-rules;
+  @extend %fmy-6;
+  p {
+    @include font-body;
+    @include text-lg;
+    &:last-of-type {
+      @extend %fmb-2;
+    }
+  }
+  blockquote {
+    margin-block: 0;
+    border: 0;
+    padding-left: 0;
+    p {
+      @include text-sm;
+      @include font-note;
+    }
+  }
+}