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