### Basic Paragraphs

Standard paragraph elements for body text content.

#### Single Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt diam sed tellus vehicula, non ultrices ligula egestas. Integer vitae dictum nisi, at efficitur nisi. Sed lorem leo, malesuada et nunc ut, vulputate vehicula orci.

HTML

    <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
                tincidunt diam sed tellus vehicula, non ultrices ligula egestas.
                Integer vitae dictum nisi, at efficitur nisi. Sed lorem leo,
                malesuada et nunc ut, vulputate vehicula orci.
            </p>

#### Multiple Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt diam sed tellus vehicula, non ultrices ligula egestas. Integer vitae dictum nisi, at efficitur nisi.

Etiam ultrices auctor dolor quis ultricies. Fusce nec laoreet est. Aenean ut tortor auctor leo ultrices mattis vitae sit amet diam. Morbi in commodo libero.

Vestibulum at eros nec ligula dictum dignissim. Vestibulum sodales tortor ut nisl bibendum, at fringilla mi egestas. Proin elementum nibh urna, a dictum diam tincidunt et.

HTML

    <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
                tincidunt diam sed tellus vehicula, non ultrices ligula egestas.
                Integer vitae dictum nisi, at efficitur nisi.
            </p>
            <p>
                Etiam ultrices auctor dolor quis ultricies. Fusce nec laoreet est.
                Aenean ut tortor auctor leo ultrices mattis vitae sit amet diam.
                Morbi in commodo libero.
            </p>
            <p>
                Vestibulum at eros nec ligula dictum dignissim. Vestibulum sodales
                tortor ut nisl bibendum, at fringilla mi egestas. Proin elementum
                nibh urna, a dictum diam tincidunt et.
            </p>

### Inline Text Elements

Special inline elements that can be used within paragraphs.

#### Superscript & Subscript

Water is H 2 O and the equation is E = mc 2 .

The 1 st of January, 2 nd of February, 3 rd of March.

HTML

    <p>
                Water is H
                <sub>2</sub>
                O and the equation is E = mc
                <sup>2</sup>
                .
            </p>
            <p>
                The 1
                <sup>st</sup>
                of January, 2
                <sup>nd</sup>
                of February, 3
                <sup>rd</sup>
                of March.
            </p>

#### Citations & Abbreviations

According to The Design of Everyday Things by Don Norman, good design is invisible. The UX should be seamless.

The CSS specification is maintained by the W3C .

HTML

    <p>
                According to
                <cite>The Design of Everyday Things</cite>
                by Don Norman, good design is invisible. The
                <abbr title="User Experience">UX</abbr>
                should be seamless.
            </p>
            <p>
                The
                <abbr title="Cascading Style Sheets">CSS</abbr>
                specification is maintained by the
                <abbr title="World Wide Web Consortium">W3C</abbr>
                .
            </p>

#### Mark & Highlight

You can highlight important text within a paragraph to draw attention to key information.

HTML

    <p>
                You can
                <mark>highlight important text</mark>
                within a paragraph to draw attention to key information.
            </p>

### Text Formatting

Emphasis, strong text, and other formatting options.

#### Emphasis & Strong

Use emphasis for stress emphasis and strong for important content. You can also combine both .

HTML

    <p>
                Use
                <em>emphasis</em>
                for stress emphasis and
                <strong>strong</strong>
                for important content. You can also
                <em><strong>combine both</strong></em>
                .
            </p>

#### Small Text

Regular text with small text for side comments, disclaimers, or legal text .

HTML

    <p>
                Regular text
                <small>
                    with small text for side comments, disclaimers, or legal text
                </small>
                .
            </p>

#### Strikethrough & Insert

The price is $99 $79 (20% off!).

This information is no longer accurate.

HTML

    <p>
                The price is
                <del>$99</del>
                <ins>$79</ins>
                (20% off!).
            </p>
            <p>
                <s>This information is no longer accurate.</s>
            </p>

### Code & Keyboard

Inline code and keyboard shortcut styling.

#### Inline Code

Use the `console.log()` function to debug JavaScript. Variables like `const` and `let` are block-scoped.

HTML

    <p>
                Use the
                <code>console.log()</code>
                function to debug JavaScript. Variables like
                <code>const</code>
                and
                <code>let</code>
                are block-scoped.
            </p>

#### Keyboard Shortcuts

Press `Cmd` + `S` to save on Mac, or `Ctrl` + `S` on Windows.

Use `Cmd` + `Shift` + `P` to open the command palette.

HTML

    <p>
                Press
                <kbd>Cmd</kbd>
                +
                <kbd>S</kbd>
                to save on Mac, or
                <kbd>Ctrl</kbd>
                +
                <kbd>S</kbd>
                on Windows.
            </p>
            <p>
                Use
                <kbd>Cmd</kbd>
                +
                <kbd>Shift</kbd>
                +
                <kbd>P</kbd>
                to open the command palette.
            </p>

#### Sample Output

The command returned: `Operation completed successfully.`

HTML

    <p>
                The command returned:
                <samp>Operation completed successfully.</samp>
            </p>

### Special Paragraph Styles

Special paragraph treatments for articles and editorial content.

#### Lead Paragraph

This is a lead paragraph with larger text that introduces an article or section. It helps draw readers into the content.

Regular paragraphs follow with standard text size. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

HTML

    <p class="lead">
                This is a lead paragraph with larger text that introduces an
                article or section. It helps draw readers into the content.
            </p>
            <p>
                Regular paragraphs follow with standard text size. Lorem ipsum
                dolor sit amet, consectetur adipiscing elit.
            </p>

#### Drop Cap

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt diam sed tellus vehicula, non ultrices ligula egestas. Integer vitae dictum nisi, at efficitur nisi. Sed lorem leo, malesuada et nunc ut.

HTML

    <p class="dropcap">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
                tincidunt diam sed tellus vehicula, non ultrices ligula egestas.
                Integer vitae dictum nisi, at efficitur nisi. Sed lorem leo,
                malesuada et nunc ut.
            </p>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!