Image Stroke

Outline a vector or transparent raster image so it stays legible on a shaded background. Set the stroke width and color with the image stroke utilities.

#

Usage

The Image Stroke system includes preset size modifiers that allow you to quickly apply different stroke widths to your images. The default stroke is 1.5px white, with additional options for base (1.5px, equivalent to default), small (1px), medium (2px), large (2.5px), and extra large (3px). The image-stroke--base modifier explicitly sets the default stroke width and is useful for responsive layouts.

No Stroke
Small
Base
Default
Medium
Large
Extra Large
Image Stroke Preset Sizes 
<img src="/images/trmnl--glyph-black.svg">
<img class="image-stroke image-stroke--small" src="/images/trmnl--glyph-black.svg">
<img class="image-stroke image-stroke--base" src="/images/trmnl--glyph-black.svg">
<img class="image-stroke" src="/images/trmnl--glyph-black.svg">
<img class="image-stroke image-stroke--medium" src="/images/trmnl--glyph-black.svg">
<img class="image-stroke image-stroke--large" src="/images/trmnl--glyph-black.svg">
<img class="image-stroke image-stroke--xlarge" src="/images/trmnl--glyph-black.svg">
#

Stroke Colors

Use the black modifier for images on dark backgrounds.

No Stroke
Small
Base
Default
Medium
Large
Extra Large
Image Stroke Color Variants 
<img src="/images/trmnl--glyph-white.svg">
<img class="image-stroke image-stroke--black image-stroke--small" src="/images/trmnl--glyph-white.svg">
<img class="image-stroke image-stroke--black image-stroke--base" src="/images/trmnl--glyph-white.svg">
<img class="image-stroke image-stroke--black" src="/images/trmnl--glyph-white.svg">
<img class="image-stroke image-stroke--black image-stroke--medium" src="/images/trmnl--glyph-white.svg">
<img class="image-stroke image-stroke--black image-stroke--large" src="/images/trmnl--glyph-white.svg">
<img class="image-stroke image-stroke--black image-stroke--xlarge" src="/images/trmnl--glyph-white.svg">