Top / Right / Bottom / Left

Bottom

Controls the bottom placement of positioned elements.

Class	Style
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%;

A

<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.

Class	Style
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%;

A

<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.

Class	Style
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%;

A

<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.

Class	Style
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%;

A

<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.

Class	Style
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%;

A

<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.

Class	Style
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%;

A

<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.

Class	Style
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%;

A

<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.

Breakpoint variant

You can combine responsive breakpoints like sm:l-*,md:l-*, lg:l-*, and xxl:l-* to allow targeting specific utilities in different viewports.

<div class="l-0 md:r-0 ..."></div>

Hover variant

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>