BLOCKS / LAYOUT
Absolute box block
An absolutely positioned container that overlays content on top of its parent. Place badges, labels, decorative elements, or floating UI anywhere with pixel-precise control.
Corner positioning
top, right, bottom, left offsets — combine any two adjacent sides to pin a badge to a corner. The parent grid-item-block always has position: relative.
NEW
top + left
SALE
top + right
PRO
bottom + left
LIVE
bottom + right
Overflowing the parent
Negative offsets push the box outside its parent’s bounds — useful for badges that hang off a card’s edge. The parent must NOT have borderRadius set (it would add overflow-hidden and clip the badge).
3
Cart icon with count
-30%
Discount badge on a card
Step 2 of 3
Bottom-center pill (posUnit: %)
Z-index & layering
Stack multiple absolute boxes on top of each other. Higher z-index sits in front — here a background panel (z: 0), a content panel (z: 1), and a badge (z: 10).
Background panel (z-index: 0)
Content panel (z-index: 1)
Badge (z-index: 10)
Mobile behavior
absoluteOnMobile controls whether the box stays absolute on small screens (default: false — it becomes relative and stacks in the normal flow instead of overlapping).
DEFAULT — absoluteOnMobile: false
Badge
Mobile: badge stacks below normally (position: relative). Tablet+: badge overlays the corner (position: absolute).
OVERRIDE — absoluteOnMobile: true
Badge
Badge always overlays the corner, on every breakpoint including mobile.
Real-world example
A text card breaks out of the grid and overlaps the image’s corner. Good for hero-like feature sections where the image is the star and text is secondary context.
HIGHLIGHT
Text card overlapping the image
Breaks the rigid grid feel. Good for hero-like feature sections where the image is the star and text is secondary context.