Typography
Text Stroke
Utilities for set text with outer stroke width.
Variant
Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited
API
| class | css | |
|---|---|---|
| text-stroke-1 | -webkit-text-stroke: 1px | text |
| text-stroke-2 | -webkit-text-stroke: 2px | text |
| text-stroke-3 | -webkit-text-stroke: 3px | text |
| text-stroke-4 | -webkit-text-stroke: 4px | text |
| text-stroke-5 | -webkit-text-stroke: 5px | text |
| text-stroke-6 | -webkit-text-stroke: 6px | text |
| text-stroke-7 | -webkit-text-stroke: 7px | text |
| text-stroke-8 | -webkit-text-stroke: 8px | text |
| text-stroke-9 | -webkit-text-stroke: 9px | text |
| text-stroke-10 | -webkit-text-stroke: 10px | text |
| text-stroke-12 | -webkit-text-stroke: 12px | text |
| text-stroke-14 | -webkit-text-stroke: 14px | text |
| text-stroke-16 | -webkit-text-stroke: 16px | text |
| text-stroke-18 | -webkit-text-stroke: 18px | text |
| text-stroke-20 | -webkit-text-stroke: 20px | text |
| text-stroke-24 | -webkit-text-stroke: 24px | text |
| text-stroke-28 | -webkit-text-stroke: 28px | text |
| text-stroke-32 | -webkit-text-stroke: 32px | text |
| text-stroke-36 | -webkit-text-stroke: 36px | text |
| text-stroke-40 | -webkit-text-stroke: 40px | text |
Usage
TEXT
<div class="text-white text-xl-8 text-stroke-4 ... text-stroke-tint-granite-5">
...
</div>
HTML
.dummy {
@extend
.text-white,
.text-xl-8,
.text-stroke-4,
.text-stroke-tint-granite-5;
}
SCSS