Splendid Labz

Place elements on cardinal points easily

Just pick a position and place your element. No need to overthink or dive into CSS positioning complexities.

<div class="stack">
  <div class="pos-topleft"> Top left </div>
  <!-- ... other positions ... -->
</div>

TopLeft

Top

TopRight

Left

Center

Right

BottomLeft

Bottom

BottomRight

Just add full to the pos class and you’ll get it.

Top full

Bottom full

Left Full

Right Full

pos lets you nudge an element towards the center. While nudging, pos can also calculate the perfect border radius without work on your part!

<div class="stack [--radius:1rem]">
  <div class="pos-topleft [--nudge:0.5em]"> Top left </div>
  <!-- ... other positions ... -->
</div>

Purrfect border radius!