Merge pull request #474 from primer/task/add-text-mono-util

Add text-mono utility class
primer · May 8, 2018 · 9262814 · 9262814
2 parents 5657a4f + 6c3c4f9
commit 9262814
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 0 deletions.
diff --git a/modules/primer-utilities/docs/typography.md b/modules/primer-utilities/docs/typography.md
@@ -93,6 +93,7 @@ Change the font weight, styles, and alignment with these utilities.
 <p class="text-emphasized">Emphasized</p>
 <p class="text-small">Small</p>
 <p class="lead">Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p>
+<p class="text-mono">Monospace</p>
 ```
 
 ## Text alignment

diff --git a/modules/primer-utilities/lib/typography.scss b/modules/primer-utilities/lib/typography.scss
@@ -214,3 +214,8 @@
 .text-shadow-light {
   text-shadow: 0 1px 0 rgba($white, 0.5);
 }
+
+/* Set to monospace font */
+.text-mono {
+  font-family: $mono-font;
+}
diff --git a/modules/primer-utilities/stories/Typography.js b/modules/primer-utilities/stories/Typography.js
@@ -57,6 +57,7 @@ storiesOf('Typography utilities', module)
     <p className='text-emphasized'>text-emphasized</p>
     <p className='text-small'>text-small</p>
     <p className='lead'>lead</p>
+    <p className='text-mono'>text-mono</p>
   </div>
 ))
 .add('text alignment', () => (