## Dropcap Characters

Large decorative initial letters for paragraph beginnings.

### Basic Dropcap

O nce upon a time, in a land far away, there lived a designer who loved typography. They spent their days crafting beautiful letterforms and experimenting with various typographic techniques.

HTML

    <p style="line-height: 1.7">
                <span
                    class="dropcap"
                    style="
                        float: left;
                        font-size: 4em;
                        line-height: 0.8;
                        margin-right: 12px;
                        margin-top: 4px;
                        font-weight: bold;
                        color: var(--color_fill_primary);
                    "
                >
                    O
                </span>
                nce upon a time, in a land far away, there lived a designer who
                loved typography. They spent their days crafting beautiful
                letterforms and experimenting with various typographic techniques.
            </p>

### Dropcap Styles

T he boxed dropcap style adds a colored background behind the initial letter, making it stand out as a distinct design element within the text flow.

A circular dropcap creates a softer, more organic feel. This style works particularly well for editorial content and magazines where a refined aesthetic is desired.

I n the outlined style, the dropcap is rendered with just a stroke, creating an elegant and modern look that doesn't overpower the surrounding content.

HTML

    <div style="display: grid; gap: 32px">
                <!-- Square Background -->
                <p style="line-height: 1.7">
                    <span
                        class="dropcap dropcap--boxed"
                        style="
                            float: left;
                            font-size: 3em;
                            line-height: 1.2;
                            margin-right: 12px;
                            width: 60px;
                            height: 60px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background: var(--color_fill_primary);
                            color: white;
                            border-radius: 8px;
                        "
                    >
                        T
                    </span>
                    he boxed dropcap style adds a colored background behind the
                    initial letter, making it stand out as a distinct design
                    element within the text flow.
                </p>
                <!-- Circular Background -->
                <p style="line-height: 1.7">
                    <span
                        class="dropcap dropcap--circle"
                        style="
                            float: left;
                            font-size: 2.5em;
                            line-height: 1.4;
                            margin-right: 12px;
                            width: 56px;
                            height: 56px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background: var(--color_fill_secondary);
                            border-radius: 50%;
                        "
                    >
                        A
                    </span>
                    circular dropcap creates a softer, more organic feel. This
                    style works particularly well for editorial content and
                    magazines where a refined aesthetic is desired.
                </p>
                <!-- Outlined -->
                <p style="line-height: 1.7">
                    <span
                        class="dropcap dropcap--outlined"
                        style="
                            float: left;
                            font-size: 4em;
                            line-height: 0.8;
                            margin-right: 12px;
                            margin-top: 4px;
                            font-weight: bold;
                            color: transparent;
                            -webkit-text-stroke: 2px var(--color_fill_primary);
                        "
                    >
                        I
                    </span>
                    n the outlined style, the dropcap is rendered with just a
                    stroke, creating an elegant and modern look that doesn't
                    overpower the surrounding content.
                </p>
            </div>

### Decorative Dropcaps

G radient dropcaps add a modern touch with smooth color transitions. This technique is popular in digital publications and web design.

S erif dropcaps evoke a classic, timeless feel reminiscent of traditional book typography. They work beautifully in literary content.

HTML

    <div style="display: grid; gap: 32px">
                <!-- Gradient -->
                <p style="line-height: 1.7">
                    <span
                        class="dropcap dropcap--gradient"
                        style="
                            float: left;
                            font-size: 4.5em;
                            line-height: 0.75;
                            margin-right: 14px;
                            margin-top: 6px;
                            font-weight: 900;
                            background: linear-gradient(135deg, #667eea, #764ba2);
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                        "
                    >
                        G
                    </span>
                    radient dropcaps add a modern touch with smooth color
                    transitions. This technique is popular in digital publications
                    and web design.
                </p>
                <!-- Serif Style -->
                <p style="line-height: 1.7">
                    <span
                        class="dropcap dropcap--serif"
                        style="
                            float: left;
                            font-size: 5em;
                            line-height: 0.7;
                            margin-right: 10px;
                            margin-top: 8px;
                            font-family:
                                Georgia, &quot;Times New Roman&quot;, serif;
                            font-style: italic;
                            color: var(--color_fill_primary);
                        "
                    >
                        S
                    </span>
                    erif dropcaps evoke a classic, timeless feel reminiscent of
                    traditional book typography. They work beautifully in literary
                    content.
                </p>
            </div>

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