## Quote Characters

Quotation marks and blockquote styling for referenced content.

### Inline Quote

The designer said, Good design is as little design as possible , emphasizing the importance of simplicity.

HTML

    <p>
                The designer said,
                <q>Good design is as little design as possible</q>
                , emphasizing the importance of simplicity.
            </p>

### Block Quote Styles

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

> "

> Less is more.

> "Make it simple, but significant."

HTML

    <div style="display: flex; flex-direction: column; gap: 24px">
                <!-- Classic -->
                <blockquote
                    style="
                        border-left: 4px solid var(--color_fill_primary);
                        padding: 16px 20px;
                        margin: 0;
                        background: var(--color_fill_secondary);
                        border-radius: 0 8px 8px 0;
                    "
                >
                    <p
                        style="
                            margin: 0;
                            font-style: italic;
                            font-size: 18px;
                            line-height: 1.6;
                        "
                    >
                        "Typography is the craft of endowing human language with a
                        durable visual form."
                    </p>
                    <footer
                        style="margin-top: 12px; font-size: 14px; opacity: 0.8"
                    >
                        — Robert Bringhurst
                    </footer>
                </blockquote>

                <!-- Large Quote Mark -->
                <blockquote
                    style="
                        position: relative;
                        padding: 24px 24px 24px 60px;
                        margin: 0;
                        background: var(--color_fill_secondary);
                        border-radius: 12px;
                    "
                >
                    <span
                        style="
                            position: absolute;
                            left: 16px;
                            top: 8px;
                            font-size: 64px;
                            font-family: Georgia, serif;
                            color: var(--color_fill_primary);
                            opacity: 0.3;
                            line-height: 1;
                        "
                    >
                        "
                    </span>
                    <p style="margin: 0; font-size: 18px; line-height: 1.6">
                        Less is more.
                    </p>
                    <footer
                        style="margin-top: 12px; font-size: 14px; opacity: 0.8"
                    >
                        — Ludwig Mies van der Rohe
                    </footer>
                </blockquote>

                <!-- Centered -->
                <blockquote
                    style="
                        padding: 32px;
                        margin: 0;
                        text-align: center;
                        border-top: 2px solid var(--color_line_secondary);
                        border-bottom: 2px solid var(--color_line_secondary);
                    "
                >
                    <p
                        style="
                            margin: 0;
                            font-size: 24px;
                            font-style: italic;
                            line-height: 1.5;
                        "
                    >
                        "Make it simple, but significant."
                    </p>
                    <footer
                        style="margin-top: 16px; font-size: 14px; opacity: 0.7"
                    >
                        — Don Draper
                    </footer>
                </blockquote>
            </div>

### Pull Quote

Design thinking is a human-centered approach to innovation that draws from the designer's toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success. The methodology emphasizes understanding the user's needs before jumping to solutions.

> "Design is not just what it looks like. Design is how it works."

HTML

    <div
                style="
                    display: grid;
                    grid-template-columns: 1fr 280px;
                    gap: 32px;
                    align-items: start;
                "
            >
                <p style="margin: 0; line-height: 1.8; opacity: 0.9">
                    Design thinking is a human-centered approach to innovation that
                    draws from the designer's toolkit to integrate the needs of
                    people, the possibilities of technology, and the requirements
                    for business success. The methodology emphasizes understanding
                    the user's needs before jumping to solutions.
                </p>
                <aside
                    style="
                        padding: 20px;
                        background: linear-gradient(
                            135deg,
                            var(--color_fill_primary),
                            #764ba2
                        );
                        border-radius: 12px;
                        color: white;
                    "
                >
                    <blockquote style="margin: 0">
                        <p
                            style="
                                margin: 0;
                                font-size: 20px;
                                font-style: italic;
                                line-height: 1.5;
                            "
                        >
                            "Design is not just what it looks like. Design is how
                            it works."
                        </p>
                        <footer
                            style="margin-top: 12px; font-size: 13px; opacity: 0.9"
                        >
                            — Steve Jobs
                        </footer>
                    </blockquote>
                </aside>
            </div>

### Nested Quotes

> In his book, the author explains:

> > "When asked about simplicity, Einstein reportedly said: Everything should be made as simple as possible, but not simpler. "

HTML

    <blockquote
                style="
                    border-left: 4px solid var(--color_fill_primary);
                    padding: 16px 20px;
                    margin: 0;
                    background: var(--color_fill_secondary);
                    border-radius: 0 8px 8px 0;
                "
            >
                <p style="margin: 0 0 16px; line-height: 1.7">
                    In his book, the author explains:
                </p>
                <blockquote
                    style="
                        border-left: 3px solid var(--color_line_secondary);
                        padding: 12px 16px;
                        margin: 0;
                        background: rgba(0, 0, 0, 0.05);
                        border-radius: 0 6px 6px 0;
                    "
                >
                    <p style="margin: 0; font-style: italic">
                        "When asked about simplicity, Einstein reportedly said:
                        <q>
                            Everything should be made as simple as possible, but
                            not simpler.
                        </q>
                        "
                    </p>
                </blockquote>
            </blockquote>

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