### Text Indentation

Control text indentation for paragraphs, first lines, and nested content.

#### First Line Indent

Traditional book-style indentation for paragraph first lines.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dignissim convallis est. Quisque aliquam libero nisi, imperdiet at tincidunt nec, gravida vehicula nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo.

Maecenas viverra orci in volutpat maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae. Sed sagittis eros eu dolor elementum, ac tincidunt nunc fermentum.

HTML

    <p class="text_indent--first">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
                dignissim convallis est. Quisque aliquam libero nisi, imperdiet at
                tincidunt nec, gravida vehicula nisl. Praesent mattis, massa quis
                luctus fermentum, turpis mi volutpat justo.
            </p>
            <p class="text_indent--first">
                Maecenas viverra orci in volutpat maximus. Vestibulum ante ipsum
                primis in faucibus orci luctus et ultrices posuere cubilia curae.
                Sed sagittis eros eu dolor elementum, ac tincidunt nunc fermentum.
            </p>

#### Hanging Indent

Used for bibliographies, references, and definition lists.

Smith, John D. "The Complete Guide to Typography." Design Journal, vol. 12, no. 3, 2024, pp. 45-67. This comprehensive article explores the fundamental principles of typographic design.

Johnson, Mary K., and Robert Lee. "Modern Web Design Principles." Web Development Quarterly, vol. 8, no. 2, 2024, pp. 12-28.

HTML

    <p class="text_indent--hanging">
                Smith, John D. "The Complete Guide to Typography." Design Journal,
                vol. 12, no. 3, 2024, pp. 45-67. This comprehensive article
                explores the fundamental principles of typographic design.
            </p>
            <p class="text_indent--hanging">
                Johnson, Mary K., and Robert Lee. "Modern Web Design Principles."
                Web Development Quarterly, vol. 8, no. 2, 2024, pp. 12-28.
            </p>

#### Block Quote Indent

Indented blocks for quotations and excerpts.

> "Typography is the craft of endowing human language with a durable visual form."

> — Robert Bringhurst

HTML

    <blockquote class="text_indent--block">
                <p>
                    "Typography is the craft of endowing human language with a
                    durable visual form."
                </p>
                <cite>— Robert Bringhurst</cite>
            </blockquote>

### Indent Sizes

Various indentation depths for different content hierarchies.

#### Size Variations

Small indent (level 1) - Praesent mattis, massa quis luctus fermentum.

Medium indent (level 2) - Turpis mi volutpat justo, nec pellentesque.

Large indent (level 3) - Maecenas viverra orci in volutpat maximus.

Extra large indent (level 4) - Vestibulum ante ipsum primis.

HTML

    <p class="text_indent--01">
                Small indent (level 1) - Praesent mattis, massa quis luctus
                fermentum.
            </p>
            <p class="text_indent--02">
                Medium indent (level 2) - Turpis mi volutpat justo, nec
                pellentesque.
            </p>
            <p class="text_indent--03">
                Large indent (level 3) - Maecenas viverra orci in volutpat maximus.
            </p>
            <p class="text_indent--04">
                Extra large indent (level 4) - Vestibulum ante ipsum primis.
            </p>

#### Nested Content

Parent level content sits at the base indent.

First child level content is indented once.

Second child level content is indented twice.

HTML

    <div class="text_indent--nested">
                <p>Parent level content sits at the base indent.</p>
                <div class="text_indent--nested">
                    <p>First child level content is indented once.</p>
                    <div class="text_indent--nested">
                        <p>Second child level content is indented twice.</p>
                    </div>
                </div>
            </div>

### Margin Indentation

Use margin utilities for block-level indentation.

#### Left Margin Indent

This paragraph has left margin indentation. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dignissim convallis est.

This paragraph has more left margin. Quisque aliquam libero nisi, imperdiet at tincidunt nec, gravida vehicula nisl.

HTML

    <p class="ml--02">
                This paragraph has left margin indentation. Lorem ipsum dolor sit
                amet, consectetur adipiscing elit. Nullam dignissim convallis est.
            </p>
            <p class="ml--04">
                This paragraph has more left margin. Quisque aliquam libero nisi,
                imperdiet at tincidunt nec, gravida vehicula nisl.
            </p>

#### Both Sides Indent

This paragraph is indented on both left and right sides. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dignissim convallis est. Quisque aliquam libero nisi.

HTML

    <p class="mx--04">
                This paragraph is indented on both left and right sides. Lorem
                ipsum dolor sit amet, consectetur adipiscing elit. Nullam dignissim
                convallis est. Quisque aliquam libero nisi.
            </p>

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