Component

MarkupPromotion

It promotes the same notice from a plain block into a section, article, aside and blockquote. The DOM and the visual treatment both change, as though semantic weight could be earned by clicking.

Possible use

It could let a reviewer promote a handoff note until its HTML structure looks authoritative, or let a presenter raise an agenda line through five ranks before giving it the floor. Neither use makes semantics more true.

Reasonable alternative

A reasonable local alternative is choosing the correct element at authoring time and adding one status if needed. A promotion ladder turns document structure into a reward track.

01 / Preview

Try it yourself.

Ready for another review

The notice has not earned a more official container.

Mechanism

1: Promote the notice one actual HTML container at a time.
2: Watch the document structure and visual treatment change together.
3: Demote it back to plain when markup has had enough authority.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function PromotedNotice() {
  return <MarkupPromotion><span>Ready for another review</span></MarkupPromotion>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe notice promoted through five increasingly official containers.