Bottom / Left / Right / Top
Controls placement of positioned elements.
Bottom
Controls the bottom placement of positioned elements.
Utility | Properties |
---|---|
bo-0 | bottom: 0rem; |
bo-1 | bottom: 0.25rem; |
bo-2 | bottom: 0.5rem; |
bo-3 | bottom: 0.75rem; |
bo-4 | bottom: 1rem; |
bo-5 | bottom: 1.25rem; |
bo-6 | bottom: 1.5rem; |
bo-7 | bottom: 1.75rem; |
bo-8 | bottom: 2rem; |
bo-9 | bottom: 2.25rem; |
bo-10 | bottom: 2.5rem; |
bo-11 | bottom: 2.75rem; |
bo-12 | bottom: 3rem; |
bo-13 | bottom: 3.25rem; |
bo-14 | bottom: 3.5rem; |
bo-15 | bottom: 3.75rem; |
bo-16 | bottom: 4rem; |
bo-full | bottom: 100%; |
bo-half | bottom: 50%; |
<div class="p-r d-18 rad-2 sm:d-32 tc-white"> <div class="p-a i-0 stripes rad-2 bo-1"></div> <div class="p-a bo-0 l-0 d-f d-16 ai-c jc-c rad-2 bg-indigo p-4">A</div></div>
Inset
Controls the placement of positioned elements in all directions.
Utility | Properties |
---|---|
i-0 | inset: 0rem; |
i-1 | inset: 0.25rem; |
i-2 | inset: 0.5rem; |
i-3 | inset: 0.75rem; |
i-4 | inset: 1rem; |
i-5 | inset: 1.25rem; |
i-6 | inset: 1.5rem; |
i-7 | inset: 1.75rem; |
i-8 | inset: 2rem; |
i-9 | inset: 2.25rem; |
i-10 | inset: 2.5rem; |
i-11 | inset: 2.75rem; |
i-12 | inset: 3rem; |
i-13 | inset: 3.25rem; |
i-14 | inset: 3.5rem; |
i-15 | inset: 3.75rem; |
i-16 | inset: 4rem; |
i-full | inset: 100%; |
i-half | inset: 50%; |
<div class="p-r d-18 rad-2 sm:d-32 tc-white"> <div class="p-a i-0 stripes rad-2 bo-1"></div> <div class="p-a i-0 d-f ai-c jc-c rad-2 bg-indigo p-4">A</div></div>
Inset X
Controls the placement of positioned elements in the horizontal direction.
Utility | Properties |
---|---|
ix-0 | left: 0rem; right: 0rem; |
ix-1 | left: 0.25rem; right: 0.25rem; |
ix-2 | left: 0.5rem; right: 0.5rem; |
ix-3 | left: 0.75rem; right: 0.75rem; |
ix-4 | left: 1rem; right: 1rem; |
ix-5 | left: 1.25rem; right: 1.25rem; |
ix-6 | left: 1.5rem; right: 1.5rem; |
ix-7 | left: 1.75rem; right: 1.75rem; |
ix-8 | left: 2rem; right: 2rem; |
ix-9 | left: 2.25rem; right: 2.25rem; |
ix-10 | left: 2.5rem; right: 2.5rem; |
ix-11 | left: 2.75rem; right: 2.75rem; |
ix-12 | left: 3rem; right: 3rem; |
ix-13 | left: 3.25rem; right: 3.25rem; |
ix-14 | left: 3.5rem; right: 3.5rem; |
ix-15 | left: 3.75rem; right: 3.75rem; |
ix-16 | left: 4rem; right: 4rem; |
ix-full | left: 100%; right: 100%; |
ix-half | left: 50%; right: 50%; |
<div class="p-r d-18 rad-2 sm:d-32 tc-white"> <div class="p-a i-0 stripes rad-2 bo-1"></div> <div class="p-a t-0 ix-0 d-f h-16 ai-c jc-c rad-2 bg-indigo p-4">A</div></div>
Inset Y
Controls the placement of positioned elements in the vertical direction.
Utility | Properties |
---|---|
iy-0 | top: 0rem; bottom: 0rem; |
iy-1 | top: 0.25rem; bottom: 0.25rem; |
iy-2 | top: 0.5rem; bottom: 0.5rem; |
iy-3 | top: 0.75rem; bottom: 0.75rem; |
iy-4 | top: 1rem; bottom: 1rem; |
iy-5 | top: 1.25rem; bottom: 1.25rem; |
iy-6 | top: 1.5rem; bottom: 1.5rem; |
iy-7 | top: 1.75rem; bottom: 1.75rem; |
iy-8 | top: 2rem; bottom: 2rem; |
iy-9 | top: 2.25rem; bottom: 2.25rem; |
iy-10 | top: 2.5rem; bottom: 2.5rem; |
iy-11 | top: 2.75rem; bottom: 2.75rem; |
iy-12 | top: 3rem; bottom: 3rem; |
iy-13 | top: 3.25rem; bottom: 3.25rem; |
iy-14 | top: 3.5rem; bottom: 3.5rem; |
iy-15 | top: 3.75rem; bottom: 3.75rem; |
iy-16 | top: 4rem; bottom: 4rem; |
iy-full | top: 100%; bottom: 100%; |
iy-half | top: 50%; bottom: 50%; |
<div class="p-r d-18 rad-2 sm:d-32 tc-white"> <div class="p-a i-0 stripes rad-2 bo-1"></div> <div class="p-a iy-0 l-0 d-f w-16 ai-c jc-c rad-2 bg-indigo p-4">A</div></div>
Left
Controls the left placement of positioned elements.
Utility | Properties |
---|---|
l-0 | left: 0rem; |
l-1 | left: 0.25rem; |
l-2 | left: 0.5rem; |
l-3 | left: 0.75rem; |
l-4 | left: 1rem; |
l-5 | left: 1.25rem; |
l-6 | left: 1.5rem; |
l-7 | left: 1.75rem; |
l-8 | left: 2rem; |
l-9 | left: 2.25rem; |
l-10 | left: 2.5rem; |
l-11 | left: 2.75rem; |
l-12 | left: 3rem; |
l-13 | left: 3.25rem; |
l-14 | left: 3.5rem; |
l-15 | left: 3.75rem; |
l-16 | left: 4rem; |
l-full | left: 100%; |
l-half | left: 50%; |
<div class="p-r d-18 rad-2 sm:d-32 tc-white"> <div class="p-a i-0 stripes rad-2 bo-1"></div> <div class="p-a t-0 l-0 d-f d-16 ai-c jc-c rad-2 bg-indigo p-4">A</div></div>
Right
Controls the right placement of positioned elements.
Utility | Properties |
---|---|
r-0 | right: 0rem; |
r-1 | right: 0.25rem; |
r-2 | right: 0.5rem; |
r-3 | right: 0.75rem; |
r-4 | right: 1rem; |
r-5 | right: 1.25rem; |
r-6 | right: 1.5rem; |
r-7 | right: 1.75rem; |
r-8 | right: 2rem; |
r-9 | right: 2.25rem; |
r-10 | right: 2.5rem; |
r-11 | right: 2.75rem; |
r-12 | right: 3rem; |
r-13 | right: 3.25rem; |
r-14 | right: 3.5rem; |
r-15 | right: 3.75rem; |
r-16 | right: 4rem; |
r-full | right: 100%; |
r-half | right: 50%; |
<div class="p-r d-18 rad-2 sm:d-32 tc-white"> <div class="p-a i-0 stripes rad-2 bo-1"></div> <div class="p-a bo-0 r-0 d-f d-16 ai-c jc-c rad-2 bg-indigo p-4">A</div></div>
Top
Controls the top placement of positioned elements.
Utility | Properties |
---|---|
t-0 | top: 0rem; |
t-1 | top: 0.25rem; |
t-2 | top: 0.5rem; |
t-3 | top: 0.75rem; |
t-4 | top: 1rem; |
t-5 | top: 1.25rem; |
t-6 | top: 1.5rem; |
t-7 | top: 1.75rem; |
t-8 | top: 2rem; |
t-9 | top: 2.25rem; |
t-10 | top: 2.5rem; |
t-11 | top: 2.75rem; |
t-12 | top: 3rem; |
t-13 | top: 3.25rem; |
t-14 | top: 3.5rem; |
t-15 | top: 3.75rem; |
t-16 | top: 4rem; |
t-full | top: 100%; |
t-half | top: 50%; |
<div class="p-r d-18 rad-2 sm:d-32 tc-white"> <div class="p-a i-0 stripes rad-2 bo-1"></div> <div class="p-a t-0 r-0 d-f d-16 ai-c jc-c rad-2 bg-indigo p-4">A</div></div>
Conditional styles
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
You can combine responsive breakpoints like sm:l-*
,md:l-*
, lg:l-*
, and xxl:l-*
allows targeting specific utilities in different viewports.
<div class="l-0 md:r-0 ..."></div>
Alternatively, you can apply :hover
by using h:l-*
utility to override elements and change their values when hovering over them.
<div class="l-0 h:r-0 ..."></div>