app/styles/components/typography/_typography.scss
/*doc
---
title: Typography
name: typography-00_headings
category: Scaffolding - Typography
---
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dicta quidem tempore voluptatem nobis omnis, labore autem fugiat quis, sunt voluptate at ducimus nisi tempora eius quas fuga ex cupiditate!
## Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat odit harum dolorum, est at sit suscipit expedita, similique iure non, velit facilis maiores officia perferendis doloremque dolorem. Cum voluptatibus, repellat?
```html_example
<h1>h1. Heading Level 1</h1>
<h2>h2. Heading Level 2</h2>
<h3>h3. Heading Level 3</h3>
<h4>h4. Heading Level 4</h4>
<h5>h5. Heading Level 5</h5>
<h6>h6. Heading Level 6</h6>
```
```css_example
h1 {
font-weight: bold;
}
```
## Subheader
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, tenetur. Tempora, tenetur, animi. Laborum, omnis, reiciendis modi earum beatae quia porro cupiditate consectetur dolorem, placeat odit? Odio est praesentium repellendus?
```html_example
<h1 class="subheader">h1. Heading Level 1</h1>
<h2 class="subheader">h2. Heading Level 2</h2>
<h3 class="subheader">h3. Heading Level 3</h3>
<h4 class="subheader">h4. Heading Level 4</h4>
<h5 class="subheader">h5. Heading Level 5</h5>
<h6 class="subheader">h6. Heading Level 6</h6>
```
## Small Header Segment
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, enim. Similique distinctio earum repudiandae quo reprehenderit? Voluptates pariatur minus tempore. Doloribus ipsam iure dolor placeat omnis eum porro beatae quod.
```html_example
<h1>h1. Heading Level 1 <small>Secondary text</small></h1>
<h2>h2. Heading Level 2 <small>Secondary text</small></h2>
<h3>h3. Heading Level 3 <small>Secondary text</small></h3>
<h4>h4. Heading Level 4 <small>Secondary text</small></h4>
<h5>h5. Heading Level 5 <small>Secondary text</small></h5>
<h6>h6. Heading Level 6 <small>Secondary text</small></h6>
```
*/
/*doc
---
title: Body copy
name: typography-01_body-copy
category: Scaffolding - Typography
---
## Paragraph
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere eaque voluptas soluta minima quidem tempore aut quaerat illum labore animi mollitia, numquam inventore? Odio eos sunt veritatis necessitatibus, dolor omnis!
```html_example
<p>Consectetur adipisicing elit. Dignissimos, impedit, nemo, culpa earum architecto illo facilis vero consequatur sapiente iste tempora excepturi pariatur.</p>
<p>AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789</p>
<p>The quick brown fox jumps over the lazy dog.</p>
<p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
```
```js_example
console.log("Hello");
```
## Leading paragraph
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, dicta error! Numquam quaerat pariatur ad veritatis velit blanditiis, et praesentium ex voluptates odio, ipsa corporis aut architecto dolor laboriosam dolore!
```html_example
<p class="lead">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
```
*/
/*doc
---
title: Link
name: typography-02_link
category: Scaffolding - Typography
---
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae reiciendis provident voluptatibus sit, ea atque itaque minus quia. Laudantium et sunt voluptatem, delectus saepe minus, iure reprehenderit enim magnam minima!
```html_example
<a href="javascript:;">Sample link</a>
<p>Lorem <a href="javascript:;">ipsum</a> dolor sit amet, <a href="javascript:;">consectetur</a> adipisicing elit. Tempora, ab.</p>
```
*/
/*doc
---
title: List
name: typography-03_list
category: Scaffolding - Typography
---
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore vel, sint labore eveniet corrupti nisi quidem! Cum unde, commodi odit, ratione, dolor placeat veniam, dolorum fuga ipsa consectetur tenetur modi.
## Unordered list
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa praesentium, eum quos, quidem aspernatur dolor nostrum, ea voluptas ipsam voluptatibus iure odio asperiores omnis nobis iste maiores ex repellendus architecto?
```html_example
<ul>
<li>List item with a much longer description or more content.</li>
<li>List item</li>
<li>List item
<ul>
<li>Nested List Item</li>
<li>Nested List Item</li>
<li>Nested List Item</li>
</ul>
</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
```
## Ordered list
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dolorem placeat obcaecati est! Alias laborum at harum necessitatibus magnam, vitae modi qui voluptate aperiam, quos numquam cupiditate minima iusto voluptatibus!
```html_example
<ol>
<li>List item with a much longer description or more content.</li>
<li>List item</li>
<li>List item
<ol>
<li>Nested List Item</li>
<li>Nested List Item</li>
<li>Nested List Item</li>
</ol>
</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
```
## Definition list
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi velit, quia reiciendis voluptatibus placeat ipsum facilis sit. Sapiente ad esse nihil ullam sunt nisi asperiores, ipsam, molestiae doloribus nostrum aperiam!
```html_example
<dl>
<dt>Definition Title</dt>
<dd>Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</dd>
</dl>
```
*/
/*doc
---
title: Blockquote
name: typography-04_blockquote
category: Scaffolding - Typography
---
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ad, voluptate reprehenderit rerum, ab excepturi eaque at minima, officiis eligendi, repellat doloribus obcaecati neque accusantium id quam expedita quidem. Quae.
```html_example
<blockquote>
To be, or not to be: that is the question:
<cite>William Shakespeare</cite>
</blockquote>
```
*/
/*doc
---
title: Inline text elements
name: typography-05_inline-text-elements
category: Scaffolding - Typography
---
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit tempore officiis sed porro aperiam dolores repudiandae ipsam quaerat ea voluptatibus iure dolorum eius sequi velit accusantium qui, fuga illo sunt.
## Marked text
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo reprehenderit mollitia voluptate alias provident eum laboriosam quisquam totam unde velit? Nihil maiores labore magnam impedit reiciendis quod debitis quo corporis?
```html_example
<p>Neque <mark>porro quisquam</mark> est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
```
## Deleted text
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas et dolore soluta, pariatur tempora asperiores mollitia, quibusdam illum sunt accusamus aperiam quasi. Excepturi similique odio, amet porro. Molestiae, hic, quia.
```html_example
<p>Neque porro quisquam est, <del>qui dolorem ipsum quia dolor sit amet.</del></p>
```
## Strikethrough text
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum impedit dicta accusamus cum recusandae quae dolores sunt unde! Quod tenetur necessitatibus quis facilis, dolores optio sit ea, perspiciatis dignissimos aliquam.
```html_example
<p><s>Neque porro quisquam est,</s> qui dolorem ipsum quia dolor sit amet.</p>
```
## Inserted text
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia natus, hic tenetur repellat, nesciunt autem officiis molestias omnis facere blanditiis sint in. In quisquam excepturi asperiores nisi similique, veniam soluta.
```html_example
<p><ins>Neque porro quisquam est,</ins> qui dolorem ipsum quia dolor sit amet.</p>
```
## Small text
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quasi error magnam commodi voluptatibus nemo quod voluptatem facere blanditiis quibusdam ducimus quis, deserunt alias consequuntur, distinctio eum repellendus assumenda. Ipsum.
```html_example
<p><small>Ut enim ad minima veniam</small>, quis nostrum exercitationem ullam corporis suscipit laboriosam.</p>
```
## Strong text
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio aliquam delectus eum, impedit vel asperiores suscipit, dolorum natus esse necessitatibus repudiandae unde voluptas consectetur fugit, corporis harum soluta aperiam quisquam!
```html_example
<p><strong>Ut enim ad minima veniam</strong>, quis nostrum exercitationem ullam corporis suscipit laboriosam.</p>
```
## Emphasized text
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quas, sed, praesentium nam asperiores aspernatur, voluptate iste minima fugit deleniti fuga voluptatibus. Voluptatem accusantium itaque nam explicabo, placeat quos voluptatum.
```html_example
<p><em>Ut enim ad minima veniam</em>, quis nostrum exercitationem ullam corporis suscipit laboriosam.</p>
```
*/
/*doc
---
title: Alignment
name: typography-06_alignment
category: Scaffolding - Typography
---
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae omnis provident delectus deleniti molestiae. Voluptatum nisi autem doloremque laudantium est saepe dignissimos illum dolore, iste vero magni hic, quibusdam facilis.
```html_example
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text. Consectetur adipisicing elit. Dignissimos, impedit, nemo, culpa earum architecto illo facilis vero consequatur sapiente iste tempora excepturi pariatur. Consectetur adipisicing elit. Dignissimos, impedit, nemo, culpa earum architecto illo facilis vero consequatur sapiente iste tempora excepturi pariatur.</p>
<p class="text-nowrap">No wrap text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
```
*/