Spacing Between
Controls the spacing of child elements.
Spacing X
Controls the left and right X-axis margins of child elements.
| Class | Properties |
|---|---|
| s-x-0 | margin-left: 0rem;
margin-right: 0rem; |
| s-x-1 | margin-left: 0.25rem;
margin-right: 0.25rem; |
| s-x-2 | margin-left: 0.5rem;
margin-right: 0.5rem; |
| s-x-3 | margin-left: 0.75rem;
margin-right: 0.75rem; |
| s-x-4 | margin-left: 1rem;
margin-right: 1rem; |
| s-x-5 | margin-left: 1.25rem;
margin-right: 1.25rem; |
| s-x-6 | margin-left: 1.5rem;
margin-right: 1.5rem; |
| s-x-7 | margin-left: 1.75rem;
margin-right: 1.75rem; |
| s-x-8 | margin-left: 2rem;
margin-right: 2rem; |
| s-x-9 | margin-left: 2.25rem;
margin-right: 2.25rem; |
| s-x-10 | margin-left: 2.5rem;
margin-right: 2.5rem; |
| s-x-11 | margin-left: 2.75rem;
margin-right: 2.75rem; |
| s-x-12 | margin-left: 3rem;
margin-right: 3rem; |
| s-x-13 | margin-left: 3.25rem;
margin-right: 3.25rem; |
| s-x-14 | margin-left: 3.5rem;
margin-right: 3.5rem; |
| s-x-15 | margin-left: 3.75rem;
margin-right: 3.75rem; |
| s-x-16 | margin-left: 4rem;
margin-right: 4rem; |
| s-x-17 | margin-left: 4.25rem;
margin-right: 4.25rem; |
| s-x-18 | margin-left: 4.5rem;
margin-right: 4.5rem; |
| s-x-19 | margin-left: 4.75rem;
margin-right: 4.75rem; |
| s-x-20 | margin-left: 5rem;
margin-right: 5rem; |
| s-x-21 | margin-left: 5.25rem;
margin-right: 5.25rem; |
| s-x-22 | margin-left: 5.5rem;
margin-right: 5.5rem; |
| s-x-23 | margin-left: 5.75rem;
margin-right: 5.75rem; |
| s-x-24 | margin-left: 6rem;
margin-right: 6rem; |
| s-x-25 | margin-left: 6.25rem;
margin-right: 6.25rem; |
| s-x-26 | margin-left: 6.5rem;
margin-right: 6.5rem; |
| s-x-27 | margin-left: 6.75rem;
margin-right: 6.75rem; |
| s-x-28 | margin-left: 7rem;
margin-right: 7rem; |
| s-x-29 | margin-left: 7.25rem;
margin-right: 7.25rem; |
| s-x-30 | margin-left: 7.5rem;
margin-right: 7.5rem; |
| s-x-31 | margin-left: 7.75rem;
margin-right: 7.75rem; |
| s-x-32 | margin-left: 8rem;
margin-right: 8rem; |
| s-x-33 | margin-left: 8.25rem;
margin-right: 8.25rem; |
| s-x-34 | margin-left: 8.5rem;
margin-right: 8.5rem; |
| s-x-35 | margin-left: 8.75rem;
margin-right: 8.75rem; |
| s-x-36 | margin-left: 9rem;
margin-right: 9rem; |
| s-x-37 | margin-left: 9.25rem;
margin-right: 9.25rem; |
| s-x-38 | margin-left: 9.5rem;
margin-right: 9.5rem; |
| s-x-39 | margin-left: 9.75rem;
margin-right: 9.75rem; |
| s-x-40 | margin-left: 10rem;
margin-right: 10rem; |
| s-x-41 | margin-left: 10.25rem;
margin-right: 10.25rem; |
| s-x-42 | margin-left: 10.5rem;
margin-right: 10.5rem; |
| s-x-43 | margin-left: 10.75rem;
margin-right: 10.75rem; |
| s-x-44 | margin-left: 11rem;
margin-right: 11rem; |
| s-x-45 | margin-left: 11.25rem;
margin-right: 11.25rem; |
| s-x-46 | margin-left: 11.5rem;
margin-right: 11.5rem; |
| s-x-47 | margin-left: 11.75rem;
margin-right: 11.75rem; |
| s-x-48 | margin-left: 12rem;
margin-right: 12rem; |
| s-x-49 | margin-left: 12.25rem;
margin-right: 12.25rem; |
| s-x-50 | margin-left: 12.5rem;
margin-right: 12.5rem; |
| s-x-51 | margin-left: 12.75rem;
margin-right: 12.75rem; |
| s-x-52 | margin-left: 13rem;
margin-right: 13rem; |
| s-x-53 | margin-left: 13.25rem;
margin-right: 13.25rem; |
| s-x-54 | margin-left: 13.5rem;
margin-right: 13.5rem; |
| s-x-55 | margin-left: 13.75rem;
margin-right: 13.75rem; |
| s-x-56 | margin-left: 14rem;
margin-right: 14rem; |
| s-x-57 | margin-left: 14.25rem;
margin-right: 14.25rem; |
| s-x-58 | margin-left: 14.5rem;
margin-right: 14.5rem; |
| s-x-59 | margin-left: 14.75rem;
margin-right: 14.75rem; |
| s-x-60 | margin-left: 15rem;
margin-right: 15rem; |
| s-x-61 | margin-left: 15.25rem;
margin-right: 15.25rem; |
| s-x-62 | margin-left: 15.5rem;
margin-right: 15.5rem; |
| s-x-63 | margin-left: 15.75rem;
margin-right: 15.75rem; |
| s-x-64 | margin-left: 16rem;
margin-right: 16rem; |
| s-x-65 | margin-left: 16.25rem;
margin-right: 16.25rem; |
| s-x-66 | margin-left: 16.5rem;
margin-right: 16.5rem; |
| s-x-67 | margin-left: 16.75rem;
margin-right: 16.75rem; |
| s-x-68 | margin-left: 17rem;
margin-right: 17rem; |
| s-x-69 | margin-left: 17.25rem;
margin-right: 17.25rem; |
| s-x-70 | margin-left: 17.5rem;
margin-right: 17.5rem; |
| s-x-71 | margin-left: 17.75rem;
margin-right: 17.75rem; |
| s-x-72 | margin-left: 18rem;
margin-right: 18rem; |
| s-x-73 | margin-left: 18.25rem;
margin-right: 18.25rem; |
| s-x-74 | margin-left: 18.5rem;
margin-right: 18.5rem; |
| s-x-75 | margin-left: 18.75rem;
margin-right: 18.75rem; |
| s-x-76 | margin-left: 19rem;
margin-right: 19rem; |
| s-x-77 | margin-left: 19.25rem;
margin-right: 19.25rem; |
| s-x-78 | margin-left: 19.5rem;
margin-right: 19.5rem; |
| s-x-79 | margin-left: 19.75rem;
margin-right: 19.75rem; |
| s-x-80 | margin-left: 20rem;
margin-right: 20rem; |
| s-x-81 | margin-left: 20.25rem;
margin-right: 20.25rem; |
| s-x-82 | margin-left: 20.5rem;
margin-right: 20.5rem; |
| s-x-83 | margin-left: 20.75rem;
margin-right: 20.75rem; |
| s-x-84 | margin-left: 21rem;
margin-right: 21rem; |
| s-x-85 | margin-left: 21.25rem;
margin-right: 21.25rem; |
| s-x-86 | margin-left: 21.5rem;
margin-right: 21.5rem; |
| s-x-87 | margin-left: 21.75rem;
margin-right: 21.75rem; |
| s-x-88 | margin-left: 22rem;
margin-right: 22rem; |
| s-x-89 | margin-left: 22.25rem;
margin-right: 22.25rem; |
| s-x-90 | margin-left: 22.5rem;
margin-right: 22.5rem; |
| s-x-91 | margin-left: 22.75rem;
margin-right: 22.75rem; |
| s-x-92 | margin-left: 23rem;
margin-right: 23rem; |
| s-x-93 | margin-left: 23.25rem;
margin-right: 23.25rem; |
| s-x-94 | margin-left: 23.5rem;
margin-right: 23.5rem; |
| s-x-95 | margin-left: 23.75rem;
margin-right: 23.75rem; |
| s-x-96 | margin-left: 24rem;
margin-right: 24rem; |
| s-x-97 | margin-left: 24.25rem;
margin-right: 24.25rem; |
| s-x-98 | margin-left: 24.5rem;
margin-right: 24.5rem; |
| s-x-99 | margin-left: 24.75rem;
margin-right: 24.75rem; |
| s-x-100 | margin-left: 25rem;
margin-right: 25rem; |
This example sets the left and right margins of child elements to 2rem. The left margin is calculated as calc(2rem * (1 - 0)), resulting in 2rem, while the right margin is calculated as calc(2rem * 0), resulting in 0. This results in a uniform spacing of 2rem between child elements.
<div class="d-if fd-r stripes s-x-8 tc-white"> <div class="ai-c bg-indigo d-f dim-16 jc-c rad-1">A</div> <div class="ai-c bg-indigo d-f dim-16 jc-c rad-1">B</div> <div class="ai-c bg-indigo d-f dim-16 jc-c rad-1">C</div></div>Spacing Y
Controls the bottom and top Y-axis margins of child elements.
| Class | Properties |
|---|---|
| s-y-0 | margin-bottom: 0rem;
margin-top: 0rem; |
| s-y-1 | margin-bottom: 0.25rem;
margin-top: 0.25rem; |
| s-y-2 | margin-bottom: 0.5rem;
margin-top: 0.5rem; |
| s-y-3 | margin-bottom: 0.75rem;
margin-top: 0.75rem; |
| s-y-4 | margin-bottom: 1rem;
margin-top: 1rem; |
| s-y-5 | margin-bottom: 1.25rem;
margin-top: 1.25rem; |
| s-y-6 | margin-bottom: 1.5rem;
margin-top: 1.5rem; |
| s-y-7 | margin-bottom: 1.75rem;
margin-top: 1.75rem; |
| s-y-8 | margin-bottom: 2rem;
margin-top: 2rem; |
| s-y-9 | margin-bottom: 2.25rem;
margin-top: 2.25rem; |
| s-y-10 | margin-bottom: 2.5rem;
margin-top: 2.5rem; |
| s-y-11 | margin-bottom: 2.75rem;
margin-top: 2.75rem; |
| s-y-12 | margin-bottom: 3rem;
margin-top: 3rem; |
| s-y-13 | margin-bottom: 3.25rem;
margin-top: 3.25rem; |
| s-y-14 | margin-bottom: 3.5rem;
margin-top: 3.5rem; |
| s-y-15 | margin-bottom: 3.75rem;
margin-top: 3.75rem; |
| s-y-16 | margin-bottom: 4rem;
margin-top: 4rem; |
| s-y-17 | margin-bottom: 4.25rem;
margin-top: 4.25rem; |
| s-y-18 | margin-bottom: 4.5rem;
margin-top: 4.5rem; |
| s-y-19 | margin-bottom: 4.75rem;
margin-top: 4.75rem; |
| s-y-20 | margin-bottom: 5rem;
margin-top: 5rem; |
| s-y-21 | margin-bottom: 5.25rem;
margin-top: 5.25rem; |
| s-y-22 | margin-bottom: 5.5rem;
margin-top: 5.5rem; |
| s-y-23 | margin-bottom: 5.75rem;
margin-top: 5.75rem; |
| s-y-24 | margin-bottom: 6rem;
margin-top: 6rem; |
| s-y-25 | margin-bottom: 6.25rem;
margin-top: 6.25rem; |
| s-y-26 | margin-bottom: 6.5rem;
margin-top: 6.5rem; |
| s-y-27 | margin-bottom: 6.75rem;
margin-top: 6.75rem; |
| s-y-28 | margin-bottom: 7rem;
margin-top: 7rem; |
| s-y-29 | margin-bottom: 7.25rem;
margin-top: 7.25rem; |
| s-y-30 | margin-bottom: 7.5rem;
margin-top: 7.5rem; |
| s-y-31 | margin-bottom: 7.75rem;
margin-top: 7.75rem; |
| s-y-32 | margin-bottom: 8rem;
margin-top: 8rem; |
| s-y-33 | margin-bottom: 8.25rem;
margin-top: 8.25rem; |
| s-y-34 | margin-bottom: 8.5rem;
margin-top: 8.5rem; |
| s-y-35 | margin-bottom: 8.75rem;
margin-top: 8.75rem; |
| s-y-36 | margin-bottom: 9rem;
margin-top: 9rem; |
| s-y-37 | margin-bottom: 9.25rem;
margin-top: 9.25rem; |
| s-y-38 | margin-bottom: 9.5rem;
margin-top: 9.5rem; |
| s-y-39 | margin-bottom: 9.75rem;
margin-top: 9.75rem; |
| s-y-40 | margin-bottom: 10rem;
margin-top: 10rem; |
| s-y-41 | margin-bottom: 10.25rem;
margin-top: 10.25rem; |
| s-y-42 | margin-bottom: 10.5rem;
margin-top: 10.5rem; |
| s-y-43 | margin-bottom: 10.75rem;
margin-top: 10.75rem; |
| s-y-44 | margin-bottom: 11rem;
margin-top: 11rem; |
| s-y-45 | margin-bottom: 11.25rem;
margin-top: 11.25rem; |
| s-y-46 | margin-bottom: 11.5rem;
margin-top: 11.5rem; |
| s-y-47 | margin-bottom: 11.75rem;
margin-top: 11.75rem; |
| s-y-48 | margin-bottom: 12rem;
margin-top: 12rem; |
| s-y-49 | margin-bottom: 12.25rem;
margin-top: 12.25rem; |
| s-y-50 | margin-bottom: 12.5rem;
margin-top: 12.5rem; |
| s-y-51 | margin-bottom: 12.75rem;
margin-top: 12.75rem; |
| s-y-52 | margin-bottom: 13rem;
margin-top: 13rem; |
| s-y-53 | margin-bottom: 13.25rem;
margin-top: 13.25rem; |
| s-y-54 | margin-bottom: 13.5rem;
margin-top: 13.5rem; |
| s-y-55 | margin-bottom: 13.75rem;
margin-top: 13.75rem; |
| s-y-56 | margin-bottom: 14rem;
margin-top: 14rem; |
| s-y-57 | margin-bottom: 14.25rem;
margin-top: 14.25rem; |
| s-y-58 | margin-bottom: 14.5rem;
margin-top: 14.5rem; |
| s-y-59 | margin-bottom: 14.75rem;
margin-top: 14.75rem; |
| s-y-60 | margin-bottom: 15rem;
margin-top: 15rem; |
| s-y-61 | margin-bottom: 15.25rem;
margin-top: 15.25rem; |
| s-y-62 | margin-bottom: 15.5rem;
margin-top: 15.5rem; |
| s-y-63 | margin-bottom: 15.75rem;
margin-top: 15.75rem; |
| s-y-64 | margin-bottom: 16rem;
margin-top: 16rem; |
| s-y-65 | margin-bottom: 16.25rem;
margin-top: 16.25rem; |
| s-y-66 | margin-bottom: 16.5rem;
margin-top: 16.5rem; |
| s-y-67 | margin-bottom: 16.75rem;
margin-top: 16.75rem; |
| s-y-68 | margin-bottom: 17rem;
margin-top: 17rem; |
| s-y-69 | margin-bottom: 17.25rem;
margin-top: 17.25rem; |
| s-y-70 | margin-bottom: 17.5rem;
margin-top: 17.5rem; |
| s-y-71 | margin-bottom: 17.75rem;
margin-top: 17.75rem; |
| s-y-72 | margin-bottom: 18rem;
margin-top: 18rem; |
| s-y-73 | margin-bottom: 18.25rem;
margin-top: 18.25rem; |
| s-y-74 | margin-bottom: 18.5rem;
margin-top: 18.5rem; |
| s-y-75 | margin-bottom: 18.75rem;
margin-top: 18.75rem; |
| s-y-76 | margin-bottom: 19rem;
margin-top: 19rem; |
| s-y-77 | margin-bottom: 19.25rem;
margin-top: 19.25rem; |
| s-y-78 | margin-bottom: 19.5rem;
margin-top: 19.5rem; |
| s-y-79 | margin-bottom: 19.75rem;
margin-top: 19.75rem; |
| s-y-80 | margin-bottom: 20rem;
margin-top: 20rem; |
| s-y-81 | margin-bottom: 20.25rem;
margin-top: 20.25rem; |
| s-y-82 | margin-bottom: 20.5rem;
margin-top: 20.5rem; |
| s-y-83 | margin-bottom: 20.75rem;
margin-top: 20.75rem; |
| s-y-84 | margin-bottom: 21rem;
margin-top: 21rem; |
| s-y-85 | margin-bottom: 21.25rem;
margin-top: 21.25rem; |
| s-y-86 | margin-bottom: 21.5rem;
margin-top: 21.5rem; |
| s-y-87 | margin-bottom: 21.75rem;
margin-top: 21.75rem; |
| s-y-88 | margin-bottom: 22rem;
margin-top: 22rem; |
| s-y-89 | margin-bottom: 22.25rem;
margin-top: 22.25rem; |
| s-y-90 | margin-bottom: 22.5rem;
margin-top: 22.5rem; |
| s-y-91 | margin-bottom: 22.75rem;
margin-top: 22.75rem; |
| s-y-92 | margin-bottom: 23rem;
margin-top: 23rem; |
| s-y-93 | margin-bottom: 23.25rem;
margin-top: 23.25rem; |
| s-y-94 | margin-bottom: 23.5rem;
margin-top: 23.5rem; |
| s-y-95 | margin-bottom: 23.75rem;
margin-top: 23.75rem; |
| s-y-96 | margin-bottom: 24rem;
margin-top: 24rem; |
| s-y-97 | margin-bottom: 24.25rem;
margin-top: 24.25rem; |
| s-y-98 | margin-bottom: 24.5rem;
margin-top: 24.5rem; |
| s-y-99 | margin-bottom: 24.75rem;
margin-top: 24.75rem; |
| s-y-100 | margin-bottom: 25rem;
margin-top: 25rem; |
This example sets the bottom and top margins of child elements to 2rem. The bottom margin is calculated as calc(2rem * 0), resulting in 0, while the top margin is calculated as calc(2rem * (1 - 0)), resulting in 2rem. This creates a uniform spacing of 2rem between child elements.
<div class="d-if fd-c stripes s-y-8 tc-white"> <div class="ai-c bg-indigo d-f dim-16 jc-c rad-1">A</div> <div class="ai-c bg-indigo d-f dim-16 jc-c rad-1">B</div> <div class="ai-c bg-indigo d-f dim-16 jc-c rad-1">C</div></div>Utilizing utilities conditionally
Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.
Responsive breakpoints
You can combine responsive breakpoints like sm:s-x-*,md:s-x-*, lg:s-x-*, and xxl:s-x-* allows targeting specific utilities in
different viewports.
<div class="s-x-1 md:s-x-2 ..."></div>Utilizing utilities conditionally
Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.
Hover states
Alternatively, you can apply :hover by using h:s-x-* utility to override elements
and change their values when hovering over them.
<div class="s-x-1 h:s-x-2 ..."></div>