Edge

Edge lets you place elements on the edge of a container.

Add icing 🧊 on the edge. Any edge

Just pick an edge and you’ll have your element on the edge. It might get cold with too much ice though.

<div class="Stack">
  <div class="Edge-topleft"> Top left </div>
  <!-- ... other positions ... -->
</div>

TopLeft 🧊

Top 🧊

TopRight 🧊

Left 🧊

Right 🧊

BtmLeft 🧊

Btm 🧊

BtmRight 🧊

Text rotation not included. Rotate text with Writing

Full-width and full-height edges supported

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

<div class="Stack">
  <div class="Edge-topfull"> Top full </div>
  <!-- ... other positions ... -->
</div>

Top full

Bottom full

Left Full

Right Full

Micro Edge Control

Each edge corner has start, center and end modifiers that let you control edge position with extra precision

<div class="Stack [--radius]">
  <div class="Edge-topleft-center"> ... </div>
  <div class="Edge-bottomright-center"> ... </div>
  <!-- ... other edges ... -->
</div>

TopLeft Center

BtmRight Center

Basic Usage

Edge lets you place elements on the edge of a container. It must be used in a Stack or Relative container. If you use Tailwind, relative works too.

To use Edge, just choose one of the directional classes and apply it to the element.

<div class="Stack">
  <div class="Edge-topright">...</div>
</div>

<div class="Relative">
  <div class="Edge-topright">...</div>
</div>

<div class="relative">
  <div class="Edge-topright">...</div>
</div>

Edges

Top edges

There are four top edges.

Edge-topleft: Place content at the top left edge
Edge-top: Place content at the top edge
Edge-topright: Place content at the top right edge
Edge-topfull: Place content at the top edge, spanning the full width

<div class="Stack">
  <div class="Edge-topleft">...</div>
  <div class="Edge-top">...</div>
  <div class="Edge-topright">...</div>
  <div class="Edge-topfull">...</div>
</div>

Bottom edges

There are four bottom edges.

Edge-bottomleft: Place content at the bottom left edge
Edge-bottom: Place content at the bottom edge
Edge-bottomright: Place content at the bottom right edge
Edge-bottomfull: Place content at the bottom edge, spanning the full width

<div class="Stack">
  <div class="Edge-bottomleft">...</div>
  <div class="Edge-bottom">...</div>
  <div class="Edge-bottomright">...</div>
  <div class="Edge-bottomfull">...</div>
</div>

Left edges

There are four left edges.

Edge-lefttop: Place content at the left top edge
Edge-left: Place content at the left edge
Edge-leftbottom: Place content at the left bottom edge
Edge-leftfull: Place content at the left edge, spanning the full height

<div class="Stack">
  <div class="Edge-left">...</div>
  <div class="Edge-leftfull">...</div>
</div>

Left top

Left

Left bottom

Left full

Note

We don’t rotate text when you use Edge-left. Rotation here is done with the Writing style and is used purely for aesthetic purposes.

Right edges

There are four right edges.

Edge-righttop: Place content at the right top edge
Edge-right: Place content at the right edge
Edge-rightbottom: Place content at the right bottom edge
Edge-rightfull: Place content at the right edge, spanning the full height

<div class="Stack">
  <div class="Edge-righttop">...</div>
  <div class="Edge-right">...</div>
  <div class="Edge-rightbottom">...</div>
  <div class="Edge-rightfull">...</div>
</div>

Right top

Right

Right bottom

Right full

Note

We don’t rotate text when you use Edge-right. Rotation here is done with the Writing style and is used purely for aesthetic purposes.

Micro Edge Control

You can use start, center and end keywords to further the control the position of the element on the edge.

For top and bottom edges, start moves the element to the 50% to the left while end moves the element 50% to the right
For left and right edges, start moves the element to the 50% to the top while end moves the element 50% to the bottom

Top Edges

<div class="Stack">
  <div class="Edge-topleft-start">Topleft start</div>
  <div class="Edge-topleft-center">Topleft center<div>
  <div class="Edge-topleft-end">Topleft end</div>
  <div class="Edge-topright-start">Topright start</div>
  <div class="Edge-topright-center">Topright center<div>
  <div class="Edge-topright-end">Topright end</div>
</div>

Bottom Edges

<div class="Stack">
  <div class="Edge-topleft-start">Topleft start</div>
  <div class="Edge-topleft-center">Topleft center<div>
  <div class="Edge-topleft-end">Topleft end</div>
  <div class="Edge-bottomright-start">Bottomright start</div>
  <div class="Edge-bottomright-center">Bottomright center<div>
  <div class="Edge-bottomright-end">Bottomright end</div>
</div>

Left Edges

<div class="Stack">
  <div class="Edge-lefttop-start">Lefttop start</div>
  <div class="Edge-lefttop-center">Lefttop center<div>
  <div class="Edge-lefttop-end">Lefttop end</div>
  <div class="Edge-leftbottom-start">Leftbottom start</div>
  <div class="Edge-leftbottom-center">Leftbottom center<div>
  <div class="Edge-leftbottom-end">Leftbottom end</div>
</div>

Right Edges

<div class="Stack">
  <div class="Edge-righttop-start">Righttop start</div>
  <div class="Edge-righttop-center">Righttop center<div>
  <div class="Edge-righttop-end">Righttop end</div>
  <div class="Edge-rightbottom-start">Rightbottom start</div>
  <div class="Edge-rightbottom-center">Rightbottom center<div>
  <div class="Edge-rightbottom-end">Rightbottom end</div>
</div>

Nano Edge Control

I’m kidding about the “nano”, but you can further control the edge position with --tx and --ty. Micro Edge Control simply manipulates these properties.

<div class="Stack">
  <div class="Edge-topleft [--tx:-25%] [--ty:-25%]">...</div>
</div>

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

The CSS for Edge can be pretty complex because we supported both Stack and Relative for many positions.

[class*='Edge'] {
  transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
}

:where(.Stack > [class*='Edge']) {
  box-sizing: content-box;
}

:where(.relative > [class*='Edge']),
:where(.Relative > [class*='Edge']) {
  position: absolute;
}

// prettier-ignore
:where([class*='Edge-top']) {
  --ty: -50%;
  &:where(.Edge-topleft-start) { --tx: -100%; }
  &:where(.Edge-topleft-center) { --tx: -50%; }
  &:where(.Edge-topleft-end) { --tx: 0%; }
  &:where(.Edge-topright-start) { --tx: 0%; }
  &:where(.Edge-topright-center) { --tx: 50%; }
  &:where(.Edge-topright-end) { --tx: 100%; }
}

// prettier-ignore
[class*='Edge-bottom'] {
  --ty: 50%;
  &:where(.Edge-bottomleft-start) { --tx: -100%; }
  &:where(.Edge-bottomleft-center) { --tx: -50%; }
  &:where(.Edge-bottomleft-end) { --tx: 0%; }
  &:where(.Edge-bottomright-start) { --tx: 0%; }
  &:where(.Edge-bottomright-center) { --tx: 50%; }
  &:where(.Edge-bottomright-end) { --tx: 100%; }
}

// prettier-ignore
[class*='Edge-left'] {
  --tx: -50%;
  &:where(.Edge-lefttop-start) { --ty: -100%; }
  &:where(.Edge-lefttop-center) { --ty: -50%; }
  &:where(.Edge-lefttop-end) { --ty: 0%; }
  &:where(.Edge-leftbottom-start) { --ty: 0%; }
  &:where(.Edge-leftbottom-center) { --ty: 50%; }
  &:where(.Edge-leftbottom-end) { --ty: 100%; }
}

// prettier-ignore
[class*='Edge-right'] {
  --tx: 50%;
  &:where(.Edge-righttop-start) { --ty: -100%; }
  &:where(.Edge-righttop-center) { --ty: -50%; }
  &:where(.Edge-righttop-end) { --ty: 0%; }
  &:where(.Edge-rightbottom-start) { --ty: 0%; }
  &:where(.Edge-rightbottom-center) { --ty: 50%; }
  &:where(.Edge-rightbottom-end) { --ty: 100%; }
}

// prettier-ignore
:where(.Stack) {
  // Top
  [class*='Edge-top'] { place-self: start center; }
  [class*='Edge-topleft'] { justify-self: start; }
  [class*='Edge-topright'] { justify-self: end; }
  [class*='Edge-topfull'] { justify-self: stretch; }

  // Bottom
  [class*='Edge-bottom'] { place-self: end center; }
  [class*='Edge-bottomleft'] { justify-self: start; }
  [class*='Edge-bottomright'] { justify-self: end; }
  [class*='Edge-bottomfull'] { justify-self: stretch; }

  // Left
  [class*='Edge-left'] { place-self: center start; }
  [class*='Edge-lefttop'] { align-self: start; }
  [class*='Edge-leftbottom'] { align-self: end; }
  [class*='Edge-leftfull'] { align-self: stretch; }

  // Right
  [class*='Edge-right'] { place-self: center end; }
  [class*='Edge-righttop'] { align-self: start; }
  [class*='Edge-rightbottom'] { align-self: end; }
  [class*='Edge-rightfull'] { align-self: stretch; }
}

// prettier-ignore
:where(.relative) {
  // Top
  [class*='Edge-top'] { inset-block-start: 0; }
  [class*='Edge-topleft'] { inset-inline-start: 0; }
  [class*='Edge-topright'] { inset-inline-end: 0; }
  [class*='Edge-topfull'] { inset-inline: 0 }

  // Bottom
  [class*='Edge-bottom'] { inset-block-end: 0; }
  [class*='Edge-bottomleft'] { inset-inline-start: 0; }
  [class*='Edge-bottomright'] { inset-inline-end: 0; }
  [class*='Edge-bottomfull'] { inset-inline: 0 }

  // Left
  [class*='Edge-left'] { inset-inline-start: 0; }
  [class*='Edge-lefttop'] { inset-block-start: 0; }
  [class*='Edge-leftbottom'] { inset-block-end: 0; }
  [class*='Edge-leftfull'] { inset-block: 0; }

  // Right
  [class*='Edge-right'] { inset-inline-end: 0; }
  [class*='Edge-righttop'] { inset-block-start: 0; }
  [class*='Edge-rightbottom'] { inset-block-end: 0; }
  [class*='Edge-rightfull'] { inset-block: 0; }
}

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Edge

Edge Modifiers

Class	Description
`Edge-topleft`	Place content at the top left edge
`Edge-top`	Place content at the top edge
`Edge-topright`	Place content at the top right edge
`Edge-topfull`	Place content at the top edge, spanning the full width
`Edge-lefttop`	Place content at the left top edge
`Edge-left`	Place content at the left edge
`Edge-leftbottom`	Place content at the left bottom edge
`Edge-leftfull`	Place content at the left edge, spanning the full height
`Edge-righttop`	Place content at the right top edge
`Edge-right`	Place content at the right edge
`Edge-rightbottom`	Place content at the right bottom edge
`Edge-rightfull`	Place content at the right edge, spanning the full height
`Edge-bottomleft`	Place content at the bottom left edge
`Edge-bottom`	Place content at the bottom edge
`Edge-bottomright`	Place content at the bottom right edge
`Edge-bottomfull`	Place content at the bottom edge, spanning the full width

Micro Modifiers

Class	Description
`Edge-<position>-start`	Micro movement of element to the start edge on the opposite axis
`Edge-<position>-center`	Micro movement of element to center edge on the opposite axis
`Edge-<position>-end`	Micro movement of element by end edge on the opposite axis

CSS Variables

Variable	Default	Description
`--tx`	`0`	Amount to shift element on the inline axis
`--ty`	`0`	Amount to shift element on the block axis

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.