Component

SemanticLottery

It asks the user to choose whether the child should be an article briefing, a ledger row or an aside. The selected option changes the actual HTML structure, typography and layout rather than only tinting the same box.

Possible use

It could let an editor classify a handoff note as a briefing, ledger item or side note, or let a presenter give an agenda label a structural identity before showing it.

Reasonable alternative

A reasonable local alternative is choosing the correct element at the call site. A lottery that decides whether content is an article, definition or aside is semantic theater.

01 / Preview

Try it yourself.

One piece of content awaits an unnecessarily official noun.

Choose a wrapperBriefingan article with a headlineLedgera definition rowAsidea side note

Mechanism

1: Start with one child and no semantic verdict.
2: Choose Briefing, Ledger or Aside from the radio cards.
3: The child moves into a different real HTML structure and layout.
4: Return to plain content when the lottery has chosen enough meaning.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function OfficialNotice() {
  return <SemanticLottery><span>Needs a noun</span></SemanticLottery>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content assigned one of three semantic presentations.