Skip to main content

Text & Titles

StageRoutine provides typography components for stage presentations: Title for headings, Text for body copy, and Kicker for category micro-labels.

Title​

The Title component formats slide headlines.

import { Title } from "stageroutine";

const title = Title("Title", {
  position: [80, 45],
  origin: "center",
});

Variants​

Title supports three visual variants via variant:

  • "title" (default): Bold display heading.
  • "hero": Larger display font for title slides.
  • "serif": Italic serif style.
const hero = Title("Hero heading", { variant: "hero" });
const serif = Title("Editorial style", { variant: "serif" });

Alignment​

Typography components default to left alignment (align: "left"). Use align to change text alignment:

const centered = Title("System Status", { align: "center" });
const rightNote = Text("Confidential", { align: "right" });

Text​

The Text component formats body copy paragraphs.

import { Text } from "stageroutine";

const text = Text("Body text", {
  position: [80, 45],
  origin: "center",
});

Kicker​

The Kicker component renders small uppercase section labels.

import { Kicker } from "stageroutine";

const kicker = Kicker("KICKER", {
  position: [80, 45],
  origin: "center",
});

API Reference​

Change text​

Assign element.text on Text, Title, or Kicker. The change is discrete and restored by backward navigation. A Title keeps its kicker.