Large initial letter (drop cap) for blogs and knowledge bases in three forms: sunk across three lines, raised above the text and boxed. Uses CSS initial-letter where supported and otherwise falls back to a floated letter; the letter stays plain text for screen readers and search engines.
Gras dat in juli bruin kleurt is meestal niet dood. Het gaat in rust en komt na een paar flinke buien vanzelf terug. Sproeien? Doe het twee keer per week grondig in plaats van elke avond een beetje, dan groeien de wortels dieper.
<!-- Initiaal voor artikelen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ini">
<fieldset class="ini__opts">
<legend class="ini__sr">Vorm van de beginletter</legend>
<label class="ini__opt"><input class="ini__r" type="radio" name="ini-vorm" value="verzonken" checked><span>Verzonken</span></label>
<label class="ini__opt"><input class="ini__r" type="radio" name="ini-vorm" value="verhoogd"><span>Verhoogd</span></label>
<label class="ini__opt"><input class="ini__r" type="radio" name="ini-vorm" value="kader"><span>In kader</span></label>
</fieldset>
<article class="ini__art">
<h3 class="ini__h">Een groen gazon in een droge zomer</h3>
<p class="ini__p">Gras dat in juli bruin kleurt is meestal niet dood.<span class="ini__y"> Het gaat in rust en komt na een paar flinke buien vanzelf terug.</span> Sproeien? Doe het twee keer per week grondig<span class="ini__x"> in plaats van elke avond een beetje</span>, dan groeien de wortels dieper.</p>
</article>
</div>
</div>/* Initiaal voor artikelen · NedDev · eigen werk. */
.ini{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:safe center;gap:8px;padding:12px 18px;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;background:#fff;text-align:left;overflow:hidden}
.ini__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ini__opts{display:flex;gap:6px;margin:0;padding:0;border:0;min-width:0}
.ini__opt{position:relative;display:inline-flex}
.ini__r{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ini__opt span{display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border:1px solid rgba(10,10,10,.2);border-radius:4px;font-size:12.5px;font-weight:500;color:#3a3a3a;transition:background-color .15s,color .15s,border-color .15s}
.ini__r:checked+span{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.ini__r:hover+span{border-color:#0a0a0a}
.ini__r:focus-visible+span{outline:2px solid #F5480F;outline-offset:2px}
.ini__art{min-width:0}
.ini{container-type:inline-size}
@container (max-width:380px){.ini__x{display:none}}
@container (max-width:330px){.ini__y{display:none}}
.ini__h{margin:0 0 5px;font-size:15px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.ini__p{margin:0;font-size:13px;line-height:1.5;color:#2b2b2b}
.ini__p::first-letter{float:left;font-weight:800;color:#F5480F;font-size:3.55em;line-height:.82;margin:.05em .1em 0 0}
@supports (initial-letter:3) or (-webkit-initial-letter:3){.ini__p::first-letter{float:none;font-size:inherit;line-height:inherit;margin:0 .14em 0 0;-webkit-initial-letter:3;initial-letter:3}}
.ini:has(.ini__r[value="verhoogd"]:checked) .ini__p::first-letter{float:none;font-size:2.6em;line-height:1;margin:0 .04em 0 0;-webkit-initial-letter:normal;initial-letter:normal}
@supports (initial-letter:3 1) or (-webkit-initial-letter:3 1){.ini:has(.ini__r[value="verhoogd"]:checked) .ini__p::first-letter{font-size:inherit;-webkit-initial-letter:3 1;initial-letter:3 1;margin:0 .06em 0 0}}
.ini:has(.ini__r[value="kader"]:checked) .ini__p::first-letter{float:left;-webkit-initial-letter:normal;initial-letter:normal;font-size:2.7em;line-height:1;padding:.06em .18em .1em;margin:.12em .16em 0 0;background:#0a0a0a;color:#fff;border-radius:4px}
@media (prefers-reduced-motion:reduce){.ini__opt span{transition:none}}Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →