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 rad-2 bo-1" id="area"></div> <div class="p-a bo-0 l-0 d-f d-12 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 rad-2 bo-1" id="area"></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;
|
ix-1 | left: 0.25rem;
|
ix-2 | left: 0.5rem;
|
ix-3 | left: 0.75rem;
|
ix-4 | left: 1rem;
|
ix-5 | left: 1.25rem;
|
ix-6 | left: 1.5rem;
|
ix-7 | left: 1.75rem;
|
ix-8 | left: 2rem;
|
ix-9 | left: 2.25rem;
|
ix-10 | left: 2.5rem;
|
ix-11 | left: 2.75rem;
|
ix-12 | left: 3rem;
|
ix-13 | left: 3.25rem;
|
ix-14 | left: 3.5rem;
|
ix-15 | left: 3.75rem;
|
ix-16 | left: 4rem;
|
ix-full | left: 100%;
|
ix-half | left: 50%;
|
<div class="p-r d-18 rad-2 sm:d-32 tc-white"> <div class="p-a i-0 rad-2 bo-1" id="area"></div> <div class="p-a t-0 ix-0 d-f h-12 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;
|
iy-1 | top: 0.25rem;
|
iy-2 | top: 0.5rem;
|
iy-3 | top: 0.75rem;
|
iy-4 | top: 1rem;
|
iy-5 | top: 1.25rem;
|
iy-6 | top: 1.5rem;
|
iy-7 | top: 1.75rem;
|
iy-8 | top: 2rem;
|
iy-9 | top: 2.25rem;
|
iy-10 | top: 2.5rem;
|
iy-11 | top: 2.75rem;
|
iy-12 | top: 3rem;
|
iy-13 | top: 3.25rem;
|
iy-14 | top: 3.5rem;
|
iy-15 | top: 3.75rem;
|
iy-16 | top: 4rem;
|
iy-full | top: 100%;
|
iy-half | top: 50%;
|
<div class="p-r d-18 rad-2 sm:d-32 tc-white"> <div class="p-a i-0 rad-2 bo-1" id="area"></div> <div class="p-a iy-0 l-0 d-f w-12 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 rad-2 bo-1" id="area"></div> <div class="p-a t-0 l-0 d-f d-12 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 rad-2 bo-1" id="area"></div> <div class="p-a bo-0 r-0 d-f d-12 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 rad-2 bo-1" id="area"></div> <div class="p-a t-0 r-0 d-f d-12 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.
Media modifier
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>
Hover modifier
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>