Edge

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

Add icing 🧁 on the edge.

Just pick an edge and place your element there. No need to overthink or dive into CSS positioning complexities.

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

It might get too sweet if you include too much icing!

Top Left 🧁

Top 🧁

Top Right 🧁

Left 🧁

Right 🧁

Btm Left 🧁

Btm 🧁

Btm Right 🧁

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

Basic Usage

edge lets you place elements on the edges of a container. Two conditions must be present for edge to work flawlessly:

edge must be used in a stack or relative container.
When used in a stack, the stack-ing element must not have paddings.

<div class="stack">
  <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>

<div class="relative">
  <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>

<div class="relative">
  <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>

<div class="relative">
  <div class="edge-left">...</div>
  <div class="edge-leftfull">...</div>
</div>

Right edges

There are two 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>

<div class="relative">
  <div class="edge-righttop">...</div>
  <div class="edge-right">...</div>
  <div class="edge-rightbottom">...</div>
  <div class="edge-rightfull">...</div>
</div>

Manipulating Edge Positions

You can finetune the edge positions with:

--tx: changes position on the x-axis
--ty: changes position on the y-axis

Here are a few things to note when manipulating edges:

Elements on the corner edges have both --tx and ty values set to -50%.
Elements on the top, bottom, left, and right edges have either --tx or --ty set to -50%.
Positive values push the element towards the center of the container
Negative values push the element away from center the container.

--tx

-50%

--ty

-50%

Top Left

Top Right

Bottom Left

Bottom Right

Convenient utilities for finer edge control

You can use start and end keywords to control the position of the element on the main axis.

Here, start and end function like logical properties — so start moves the element to the left while end moves the element to the right.

Top Edges

<div class="stack">
  <div class="edge-topleft-start">Topleft start</div>
  <div class="edge-topleft-end">Topleft end</div>
  <div class="edge-topright-start">Topright start</div>
  <div class="edge-topright-end">Topright end</div>
</div>

<div class="relative">
  <div class="edge-topleft-start">Topleft start</div>
  <div class="edge-topleft-end">Topleft end</div>
  <div class="edge-topright-start">Topright start</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-end">Topleft end</div>
  <div class="edge-bottomright-start">Bottomright start</div>
  <div class="edge-bottomright-end">Bottomright end</div>
</div>

<div class="relative">
  <div class="edge-topleft-start">Topleft start</div>
  <div class="edge-topleft-end">Topleft end</div>
  <div class="edge-bottomright-start">Bottomright start</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-end">Lefttop end</div>
  <div class="edge-leftbottom-start">Leftbottom start</div>
  <div class="edge-leftbottom-end">Leftbottom end</div>
</div>

<div class="relative">
  <div class="edge-lefttop-start">Lefttop start</div>
  <div class="edge-lefttop-end">Lefttop end</div>
  <div class="edge-leftbottom-start">Leftbottom start</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-end">Righttop end</div>
  <div class="edge-rightbottom-start">Rightbottom start</div>
  <div class="edge-rightbottom-end">Rightbottom end</div>
</div>

<div class="relative">
  <div class="edge-righttop-start">Righttop start</div>
  <div class="edge-righttop-end">Righttop end</div>
  <div class="edge-rightbottom-start">Rightbottom start</div>
  <div class="edge-rightbottom-end">Rightbottom end</div>
</div>

Please purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.

The CSS for edge is really complex. Forgive me for not pasting it here.

But the general gist is similar to that of pos

Please purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.

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`	Shifts the element to 50% more to the start on its main axis
`edge-<position>-end`	Shifts the element to 50% more to the end on its main axis

CSS Variables

Variable	Default	Description
`--tx`	`-50%`	Amount to translate on the x-axis towards the center of the container
`--ty`	`-50%`	Amount to translate on the y-axis towards the center of the container

Please purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.