Component

LineHeightTribute

Pay one line at a time to increase the content's actual line height through four stages. The notice becomes visibly taller and Reclaim spacing returns it to its original rhythm.

Possible use

It could let a reviewer make a handoff note look more deliberate before a meeting, or let a presenter give one agenda sentence progressively more room on a slide. Neither use makes extra whitespace evidence of importance.

Reasonable alternative

A reasonable local alternative is one readable line-height value in CSS, adjusted for the surrounding layout. A notice should not negotiate its breathing room through a payment ceremony.

01 / Preview

Try it yourself.

The notice must pay for every line

One small notice now has four vertical budgets to spend before it can rest.

Mechanism

1: Start with a compact notice in its normal rhythm.
2: Pay one line to increase the actual line height.
3: Repeat until four payments give the wording an absurd amount of air.
4: Reclaim spacing when the tribute has made its point.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function SpacedNotice() {
  return (
    <LineHeightTribute>
      <span>A small notice that has somehow earned four vertical budgets.</span>
    </LineHeightTribute>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe notice whose actual line height increases one payment at a time.