overlap

Puts its later children on top of its first one, at a corner, an edge or the middle: a Sale badge on a picture, a count on an icon, a label over a card. The first child sets the size.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props

inset

Props

attop-left · top · top-right · left · center · right · bottom-left · bottom · bottom-rightWhere the children on top sit: top-left, top, top-right, left, center, right, bottom-left, bottom or bottom-right.top-right

insetnumberHow far in from the edges they sit, in pixels (default 8).8

ifconditionShow only when this expression is true, e.g. if=done or if={count>0}. Every element takes it.—

tipstringA short explanation shown on hover, keyboard focus or a tap, e.g. tip="Orders not yet shipped": for a term or a number some people won't know, instead of more words on screen. It makes the element a Tab stop if it isn't one. Every element takes it.—

Children: any elements.

For your model

The exact guide entry a model gets for overlap, generated from the same definition.

  overlap  — Puts its later children on top of its first one, at a corner, an edge or the middle: a Sale badge on a picture, a count on an icon, a label over a card. The first child sets the size.
    at=<top-left|top|top-right|left|center|right|bottom-left|bottom|bottom-right>  Where the children on top sit: top-left, top, top-right, left, center, right, bottom-left, bottom or bottom-right.
    inset=<number>  How far in from the edges they sit, in pixels (default 8).
    children: any elements
    example:
      overlap at=top-right
        card
          text "Trail runner socks" weight=semibold
          text "Three pairs" tone=muted
        badge "Sale" tone=bad

More layout

column row grid card list list-item accordion divider spacer each timeline step carousel scroll

All layout elements on one page →