csslayout/contents/drop-cap.md

layout, title, description, keywords

layout	title	description	keywords
layouts/post.njk	Drop cap	Create a drop cap with CSS	css drop cap, css :first-letter

HTML

<div class="drop-cap">
    ...
</div>

CSS

.drop-cap:first-letter {
    /* Display at the left */
    float: left;
    line-height: 1;

    /* Spacing */
    margin: 0 0.5rem 0 0;
    padding: 0 0.5rem;

    /* Optional */
    border: 2px solid #d1d5db;
    font-size: 2rem;
    font-weight: 700;
}

{% demo %} {% include "covers/drop-cap.njk" %} {% enddemo %}