Skip to content
Tattva

HeroHeading

Stable

A big centered headline that types itself out once, then stays still.

Also known as hero, headline, welcome heading

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

Typed

The default. The text types out when the page opens and whenever the text changes.

UsageCodeDesignAccessibility

When to use it

The big greeting on an empty chat. It types itself out once and then stays still, so the empty screen feels alive without moving forever.

Use it for

  • The opening line of an empty chat.
  • A greeting on a start page: turn typing off if people see it on every visit.

Not for

  • Naming a group of items in a list: use SectionLabel.
  • Titles inside cards or sections.

Do and avoid

Do. One big greeting welcomes people to an empty chat.

3 paid, 1 waiting

Avoid. A huge greeting used as a card title drowns out the content.

Do

  • Use it once per screen, as the opening line of an empty chat.
  • Keep it to one short sentence so it fits on two lines on a phone.
  • Turn typing off when it would replay on every visit.
  • Speak to the person in a single sentence.

Avoid

  • Do not use it for section titles or inside cards.
  • Do not change the text quickly. Each change types out again.
  • Do not add another moving element next to it.
  • Do not make screen readers announce it again. They already get the full sentence.

On a phone

  • The heading is centred and balanced, and it is smaller below the sm breakpoint so it wraps on a phone.
  • Text is typed in letter by letter, and only the typed part is drawn, so on a narrow screen the heading grows taller line by line as it types. Reserve space for it if the content below should not move.
  • Under reduced motion it shows all at once.

Build your next AI screen with Tattva.

Free and open, with the code. Start in one line.

Get started