Slab Serif Swash
Italic slab-serif labels on warm-cream stock. The active tab gets a deep-emerald swash underline — a curved SVG stroke beneath the word, like a calligrapher's flourish on letterpress vellum.
Slab Serif Swash the 27th of 32 designs in the 32 CSS Tab Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="tt15">
<nav class="tt15n">
<input type="radio" name="tt15" id="tt15-r1" checked />
<label class="tt15b" for="tt15-r1">
Manifesto
<svg class="tt15s" viewBox="0 0 80 12" aria-hidden="true">
<path
d="M 2 8 Q 20 2 40 6 T 78 8"
fill="none"
stroke="#0f4f3d"
stroke-width="1.6"
stroke-linecap="round"
/>
</svg>
</label>
<input type="radio" name="tt15" id="tt15-r2" />
<label class="tt15b" for="tt15-r2">
Colophon
<svg class="tt15s" viewBox="0 0 80 12" aria-hidden="true">
<path
d="M 2 8 Q 20 2 40 6 T 78 8"
fill="none"
stroke="#0f4f3d"
stroke-width="1.6"
stroke-linecap="round"
/>
</svg>
</label>
<input type="radio" name="tt15" id="tt15-r3" />
<label class="tt15b" for="tt15-r3">
Errata
<svg class="tt15s" viewBox="0 0 80 12" aria-hidden="true">
<path
d="M 2 8 Q 20 2 40 6 T 78 8"
fill="none"
stroke="#0f4f3d"
stroke-width="1.6"
stroke-linecap="round"
/>
</svg>
</label>
</nav>
<div class="tt15p">The founding statement of intent.</div>
<div class="tt15p">The closing inscription, type & paper notes.</div>
<div class="tt15p">Corrections issued after the first printing.</div>
</div> .tt15 {
background: #fdf4d6;
padding: 22px 22px 26px;
font-family: ui-serif, "Times New Roman", serif;
width: 100%;
}
.tt15n {
display: flex;
gap: 28px;
align-items: flex-end;
}
.tt15n input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.tt15b {
position: relative;
border: 0;
background: transparent;
padding: 0 0 4px;
font:
italic 700 18px/1 ui-serif,
"Times New Roman",
serif;
color: rgba(15, 79, 61, 0.55);
cursor: pointer;
transition: color 0.25s;
}
.tt15b:hover {
color: rgba(15, 79, 61, 0.9);
}
.tt15n input:checked + .tt15b {
color: #0f4f3d;
}
.tt15s {
position: absolute;
bottom: -8px;
left: 0;
right: 0;
width: 100%;
height: 12px;
opacity: 0;
stroke-dasharray: 100;
stroke-dashoffset: 100;
transition:
opacity 0.2s,
stroke-dashoffset 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.tt15n input:checked + .tt15b .tt15s {
opacity: 1;
stroke-dashoffset: 0;
}
.tt15p {
display: none;
padding-top: 18px;
font:
italic 12px/1.6 ui-serif,
Georgia;
color: #3a3a42;
}
.tt15:has(#tt15-r1:checked) .tt15p:nth-of-type(1),
.tt15:has(#tt15-r2:checked) .tt15p:nth-of-type(2),
.tt15:has(#tt15-r3:checked) .tt15p:nth-of-type(3) {
display: block;
}