Merge pull request #174 from openstax/K12-98/Add-blockquote-styling

Add blockquote styling
openstax · Aug 6, 2024 · a26ccf3 · a26ccf3
2 parents c08b7e0 + 9ab6e92
commit a26ccf3
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 0 deletions.
diff --git a/docs/static/blockquote.png b/docs/static/blockquote.png
diff --git a/docs/styles.md b/docs/styles.md
@@ -944,6 +944,27 @@ have a `<p>` tag and `<a>` tags.
 
 ---
 
+## Blockquote
+
+Add a styled blockquote.
+
+**Examples**
+
+<div style="text-align: center;">
+    <img src="./static/blockquote.png" width="750">
+</div>
+
+**Availability**
+
+The blockquote styling should only be used on `<blockquote>` tags.
+
+**Usage**
+```html
+<blockquote class="os-raise-blockquote">Andre bought a new bag of cat food. The next day, he opened it to feed his cat. The graph shows how many ounces were left in the bag on the days after it was bought.</blockquote>
+```
+
+---
+
 # Flex
 
 ## Initializing Flexbox (os-raise-d-flex-nowrap / os-raise-d-flex)

diff --git a/src/styles/content.scss b/src/styles/content.scss
@@ -312,6 +312,13 @@ table.os-raise-horizontaltable {
   color: #000;
 }
 
+.os-raise-blockquote {
+  color: #000;
+  margin: 0 .5rem 1rem;
+  padding: 1rem 1.5rem;
+  border-left: .188rem solid #F47641;
+}
+
 // Extra Support Box Styles
 .os-raise-extrasupport {
   border: .0625rem solid #757575;