Stroke
Controls the color of SVG elements.
| Class | Style |
|---|---|
| s-red-1 | stroke: #f9e0e0;
|
| s-red-2 | stroke: #f3c5c5;
|
| s-red-3 | stroke: #edaaaa;
|
| s-red-4 | stroke: #e88e8e;
|
| s-red-5 | stroke: #e27373;
|
| s-red-6 | stroke: #dd5858;
|
| s-red | stroke: #d73d3d;
|
| s-red-7 | stroke: #b93434;
|
| s-red-8 | stroke: #9b2c2c;
|
| s-red-9 | stroke: #7d2323;
|
| s-red-10 | stroke: #5f1b1b;
|
| s-red-11 | stroke: #411212;
|
| s-red-12 | stroke: #220a0a;
|
| s-orange-1 | stroke: #fae7d9;
|
| s-orange-2 | stroke: #f6d2b9;
|
| s-orange-3 | stroke: #f1bd98;
|
| s-orange-4 | stroke: #eda777;
|
| s-orange-5 | stroke: #e99256;
|
| s-orange-6 | stroke: #e47d35;
|
| s-orange | stroke: #e06814;
|
| s-orange-7 | stroke: #c15911;
|
| s-orange-8 | stroke: #a14b0e;
|
| s-orange-9 | stroke: #823c0c;
|
| s-orange-10 | stroke: #632e09;
|
| s-orange-11 | stroke: #431f06;
|
| s-orange-12 | stroke: #241103;
|
| s-yellow-1 | stroke: #f8f0d7;
|
| s-yellow-2 | stroke: #f2e3b5;
|
| s-yellow-3 | stroke: #ecd692;
|
| s-yellow-4 | stroke: #e5c86f;
|
| s-yellow-5 | stroke: #dfbb4c;
|
| s-yellow-6 | stroke: #d9ae2a;
|
| s-yellow | stroke: #d3a107;
|
| s-yellow-7 | stroke: #b58a06;
|
| s-yellow-8 | stroke: #987405;
|
| s-yellow-9 | stroke: #7a5d04;
|
| s-yellow-10 | stroke: #5d4703;
|
| s-yellow-11 | stroke: #3f3002;
|
| s-yellow-12 | stroke: #221a01;
|
| s-green-1 | stroke: #dbf3e4;
|
| s-green-2 | stroke: #bce8cc;
|
| s-green-3 | stroke: #9cddb4;
|
| s-green-4 | stroke: #7dd29c;
|
| s-green-5 | stroke: #5ec785;
|
| s-green-6 | stroke: #3ebc6d;
|
| s-green | stroke: #1fb155;
|
| s-green-7 | stroke: #1b9849;
|
| s-green-8 | stroke: #167f3d;
|
| s-green-9 | stroke: #126731;
|
| s-green-10 | stroke: #0e4e25;
|
| s-green-11 | stroke: #09351a;
|
| s-green-12 | stroke: #051c0e;
|
| s-teal-1 | stroke: #d9f1ee;
|
| s-teal-2 | stroke: #b8e4df;
|
| s-teal-3 | stroke: #97d8d0;
|
| s-teal-4 | stroke: #76cbc2;
|
| s-teal-5 | stroke: #54bfb3;
|
| s-teal-6 | stroke: #33b2a4;
|
| s-teal | stroke: #12a695;
|
| s-teal-7 | stroke: #0f8f80;
|
| s-teal-8 | stroke: #0d786b;
|
| s-teal-9 | stroke: #0a6056;
|
| s-teal-10 | stroke: #084942;
|
| s-teal-11 | stroke: #05322d;
|
| s-teal-12 | stroke: #031b18;
|
| s-cyan-1 | stroke: #d7f0f5;
|
| s-cyan-2 | stroke: #b4e4ec;
|
| s-cyan-3 | stroke: #91d7e3;
|
| s-cyan-4 | stroke: #6ecada;
|
| s-cyan-5 | stroke: #4bbdd1;
|
| s-cyan-6 | stroke: #28b1c8;
|
| s-cyan | stroke: #05a4bf;
|
| s-cyan-7 | stroke: #048da4;
|
| s-cyan-8 | stroke: #04768a;
|
| s-cyan-9 | stroke: #035f6f;
|
| s-cyan-10 | stroke: #024854;
|
| s-cyan-11 | stroke: #023139;
|
| s-cyan-12 | stroke: #011a1f;
|
| s-blue-1 | stroke: #dfe9fa;
|
| s-blue-2 | stroke: #c2d6f5;
|
| s-blue-3 | stroke: #a6c2f0;
|
| s-blue-4 | stroke: #8aafeb;
|
| s-blue-5 | stroke: #6e9ce7;
|
| s-blue-6 | stroke: #5188e2;
|
| s-blue | stroke: #3575dd;
|
| s-blue-7 | stroke: #2e65be;
|
| s-blue-8 | stroke: #26549f;
|
| s-blue-9 | stroke: #1f4480;
|
| s-blue-10 | stroke: #173361;
|
| s-blue-11 | stroke: #102342;
|
| s-blue-12 | stroke: #081323;
|
| s-indigo-1 | stroke: #e4e5f9;
|
| s-indigo-2 | stroke: #cdcef4;
|
| s-indigo-3 | stroke: #b6b7ee;
|
| s-indigo-4 | stroke: #9fa0e9;
|
| s-indigo-5 | stroke: #878ae4;
|
| s-indigo-6 | stroke: #7073de;
|
| s-indigo | stroke: #595cd9;
|
| s-indigo-7 | stroke: #4d4fbb;
|
| s-indigo-8 | stroke: #40429c;
|
| s-indigo-9 | stroke: #34357e;
|
| s-indigo-10 | stroke: #27285f;
|
| s-indigo-11 | stroke: #1b1c41;
|
| s-indigo-12 | stroke: #0e0f23;
|
| s-violet-1 | stroke: #eae3fa;
|
| s-violet-2 | stroke: #d8cbf5;
|
| s-violet-3 | stroke: #c6b3f0;
|
| s-violet-4 | stroke: #b49beb;
|
| s-violet-5 | stroke: #a183e7;
|
| s-violet-6 | stroke: #8f6be2;
|
| s-violet | stroke: #7d53dd;
|
| s-violet-7 | stroke: #6c47be;
|
| s-violet-8 | stroke: #5a3c9f;
|
| s-violet-9 | stroke: #493080;
|
| s-violet-10 | stroke: #372561;
|
| s-violet-11 | stroke: #261942;
|
| s-violet-12 | stroke: #140d23;
|
| s-pink-1 | stroke: #f8e1ec;
|
| s-pink-2 | stroke: #f2c6dc;
|
| s-pink-3 | stroke: #ecabcc;
|
| s-pink-4 | stroke: #e691bb;
|
| s-pink-5 | stroke: #e076ab;
|
| s-pink-6 | stroke: #da5c9a;
|
| s-pink | stroke: #d4418a;
|
| s-pink-7 | stroke: #b63877;
|
| s-pink-8 | stroke: #992f63;
|
| s-pink-9 | stroke: #7b2650;
|
| s-pink-10 | stroke: #5d1d3d;
|
| s-pink-11 | stroke: #401429;
|
| s-pink-12 | stroke: #220a16;
|
| s-slate-1 | stroke: #e0e0e3;
|
| s-slate-2 | stroke: #c5c5ca;
|
| s-slate-3 | stroke: #ababb1;
|
| s-slate-4 | stroke: #909098;
|
| s-slate-5 | stroke: #757580;
|
| s-slate-6 | stroke: #5a5a67;
|
| s-slate | stroke: #3f3f4e;
|
| s-slate-7 | stroke: #363643;
|
| s-slate-8 | stroke: #2d2d38;
|
| s-slate-9 | stroke: #25252d;
|
| s-slate-10 | stroke: #1c1c22;
|
| s-slate-11 | stroke: #131317;
|
| s-slate-12 | stroke: #0a0a0c;
|
| s-gray-1 | stroke: #e6e7e9;
|
| s-gray-2 | stroke: #cfd1d5;
|
| s-gray-3 | stroke: #b9bcc1;
|
| s-gray-4 | stroke: #a3a7ae;
|
| s-gray-5 | stroke: #8d929a;
|
| s-gray-6 | stroke: #767c87;
|
| s-gray | stroke: #606773;
|
| s-gray-7 | stroke: #535963;
|
| s-gray-8 | stroke: #454a53;
|
| s-gray-9 | stroke: #383c43;
|
| s-gray-10 | stroke: #2a2d33;
|
| s-gray-11 | stroke: #1d1f23;
|
| s-gray-12 | stroke: #0f1012;
|
| s-silver-1 | stroke: #f5f5f6;
|
| s-silver-2 | stroke: #ecedee;
|
| s-silver-3 | stroke: #e3e4e6;
|
| s-silver-4 | stroke: #dadcdf;
|
| s-silver-5 | stroke: #d1d3d7;
|
| s-silver-6 | stroke: #c8cbcf;
|
| s-silver | stroke: #bfc2c7;
|
| s-silver-7 | stroke: #a4a7ab;
|
| s-silver-8 | stroke: #8a8c8f;
|
| s-silver-9 | stroke: #6f7173;
|
| s-silver-10 | stroke: #545558;
|
| s-silver-11 | stroke: #393a3c;
|
| s-silver-12 | stroke: #1f1f20;
|
| s-black | stroke: black;
|
| s-white | stroke: white;
|
| s-transparent | stroke: transparent;
|
| s-current | stroke: currentColor;
|
This example showcases various stroke-color utilities using the indigo colors from the default color palette.
- The s-indigo-4 stroke utility applies a lighter indigo color to an SVG element.
- The s-indigo stroke utility applies the base indigo color to an SVG element.
- The s-indigo-8 stroke utility applies a darker indigo color to an SVG element.
<div class="d-g g-16 gtc-1 sm:gtc-3"> <div> <svg class="d-16 s-indigo-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3-9-7.56c0-1.25.5-2.4 1-3.44 0 0-1.89-6.42-.5-7 1.39-.58 4.72.23 6.5 2.23A9.04 9.04 0 0 1 12 5Z"/><path d="M8 14v.5"/><path d="M16 14v.5"/><path d="M11.25 16.25h1.5L12 17l-.75-.75Z"/></svg> </div> <div> <svg class="d-16 s-indigo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3-9-7.56c0-1.25.5-2.4 1-3.44 0 0-1.89-6.42-.5-7 1.39-.58 4.72.23 6.5 2.23A9.04 9.04 0 0 1 12 5Z"/><path d="M8 14v.5"/><path d="M16 14v.5"/><path d="M11.25 16.25h1.5L12 17l-.75-.75Z"/></svg> </div> <div> <svg class="d-16 s-indigo-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3-9-7.56c0-1.25.5-2.4 1-3.44 0 0-1.89-6.42-.5-7 1.39-.58 4.72.23 6.5 2.23A9.04 9.04 0 0 1 12 5Z"/><path d="M8 14v.5"/><path d="M16 14v.5"/><path d="M11.25 16.25h1.5L12 17l-.75-.75Z"/></svg> </div></div>Conditional styles
Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.
Breakpoint variant
You can combine responsive breakpoints like sm:s-*,md:s-*, lg:s-*, and xxl:s-* allows targeting specific utilities in different viewports.
<div class="s-slate md:s-indigo ..."></div>Hover variant
Alternatively, you can apply :hover by using h:s-* utility to override elements and change their values when hovering over them.
<div class="s-slate h:s-indigo ..."></div>