add text highlight

3 files changed, 14 insertions, 1 deletions

diff --git a/demo/index.html b/demo/index.html
index 7a4bf3e..c7ef27c 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -22,7 +22,7 @@
             <h6>H6 Title</h6>
 
             <header class="text-center"><h4>paragraphs</h4></header>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+            <p>Lorem ipsum dolor sit amet, <span class="highlight">consectetur</span> adipiscing elit. Integer posuere erat a ante.</p>
             <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 
             <header class="text-center"><h4>blockquote</h4></header>
diff --git a/dist/spectre.css b/dist/spectre.css
index 3c1994f..0298be3 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -459,6 +459,12 @@ ol {
 ol ol {
   list-style-type: lower-alpha;
 }
+.highlight {
+  padding: .2rem;
+  line-height: 1.6rem;
+  border-radius: .2rem;
+  background-color: #fff5b7;
+}
 .text-left {
   text-align: left;
 }
diff --git a/src/typography.less b/src/typography.less
index dc7da3d..d9d4b39 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -72,6 +72,13 @@ ol {
   }
 }
 
+.highlight {
+  padding: .2rem;
+  line-height: 1.6rem;
+  border-radius: .2rem;
+  background-color: #fff5b7;
+}
+
 .text-left {
   text-align: left;
 }