Component

StackingAppeal

Children begin as a slightly overlapping stack. Clicking or focusing a card raises it to the front and pushes the previous leader down, changing the actual stacking order and preserving the appeal until Restore stack is pressed.

Possible use

It could let a reviewer bring the most urgent handoff field to the front, or let a presenter give one agenda item temporary physical priority. A real priority value would be clearer than litigating z-index by clicking cards.

Reasonable alternative

A reasonable local alternative is an ordered list with an explicit priority field. Stacking depth should not be mistaken for importance when normal flow can state the order.

01 / Preview

Try it yourself.

Request

front of appeal

Evidence

depth 1

Deadline

depth 2

Mechanism

1: Start with three notes sharing one slightly crowded stack.
2: Click or focus a card to appeal its depth.
3: The chosen card rises to the real front layer.
4: Restore the stack when z-index has made its argument.

02 / Usage

Put it somewhere.

example.tsxTSX

import { StackingAppeal } from "gra-ui";
import "gra-ui/styles.css";

export function AppealableNotes() {
  return (
    <StackingAppeal>
      <span>Request</span>
      <span>Evidence</span>
      <span>Deadline</span>
    </StackingAppeal>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe cards that compete for the top layer of the stack.