Component

MaskBallot

It gives a piece of content a physical masking ballot. Choosing Round, Ticket or Slit changes the actual clipping geometry of the rendered content, so the result is not merely a selected color or label.

Possible use

It could be used to let a reviewer choose whether a warning is seen through a round, perforated or narrow opening, or to give a presenter three ceremonial ways to reveal one agenda label.

Reasonable alternative

A reasonable local alternative is one intentional CSS mask chosen by the page. Publishing a ballot for clipping is difficult to defend because the content did not ask for a perforation policy.

01 / Preview

Try it yourself.

Review me

Mechanism

1: Begin with content that has no stencil.
2: Choose Round, Ticket or Slit.
3: The selected mask clips the actual content into a materially different opening.
4: Remove the stencil to hold another unnecessary ballot.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function StenciledNotice() {
  return <MaskBallot><span>Review me</span></MaskBallot>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content covered by the selected physical stencil.