Skip to content
STYLESCAPE

Dropcap Characters

Large initial letters for paragraph beginnings. Put ss-c-dropcap on the first paragraph; the component styles its ::first-letter, so the text stays one word for screen readers and search.

Basic Dropcap

Once 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 class="ss-c-dropcap">
            Once 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

Add a modifier: ss-c-dropcap--boxed, --circle or --outlined.

Typography sets the tone of a page before a single word is read. A boxed initial anchors the opening paragraph and gives the eye a clear place to start.

A circular initial softens the opening of an article. It suits editorial layouts where the page already uses rounded shapes elsewhere.

In an outlined initial only the contour of the letter is drawn, which keeps a large capital light on a busy page.

HTML 
<div style="display: grid; gap: 32px">
        <div>
            <p class="ss-c-dropcap ss-c-dropcap--boxed">
                Typography sets the tone of a page before a single word is read. A boxed initial anchors the opening paragraph and gives the eye a clear place to start.
            </p>
        </div>
        <div>
            <p class="ss-c-dropcap ss-c-dropcap--circle">
                A circular initial softens the opening of an article. It suits editorial layouts where the page already uses rounded shapes elsewhere.
            </p>
        </div>
        <div>
            <p class="ss-c-dropcap ss-c-dropcap--outlined">
                In an outlined initial only the contour of the letter is drawn, which keeps a large capital light on a busy page.
            </p>
        </div>
        </div>

Decorative Dropcaps

ss-c-dropcap--gradient uses the accent and info colours; --serif sets the initial in the serif italic.

Gradient initials pick up the accent and info colours of the theme, so they follow light and dark mode without extra rules.

Serif italic initials recall book typography and pair well with a sans-serif body text set in a single column.

HTML 
<div style="display: grid; gap: 32px">
        <div>
            <p class="ss-c-dropcap ss-c-dropcap--gradient">
                Gradient initials pick up the accent and info colours of the theme, so they follow light and dark mode without extra rules.
            </p>
        </div>
        <div>
            <p class="ss-c-dropcap ss-c-dropcap--serif">
                Serif italic initials recall book typography and pair well with a sans-serif body text set in a single column.
            </p>
        </div>
        </div>