TsaiTitle¶

TsaiTitle combines a page heading with optional supporting text. It uses the canonical headingExtraLarge and bodyMedium typography tokens, primary and secondary content colors, and spacing.space4 between the two lines. Each line uses an ellipsis when its text exceeds the available width.

Live example

const TsaiTitle(
  'Portfolio',
  subtitle: 'Main account',
)

The subtitle is omitted when subtitle is null. TsaiTitle does not add horizontal padding; page and container insets belong to the surrounding layout.

PageWithTopBar¶

PageWithTopBar uses the same expanded title treatment. Its subtitle is removed while the primary heading transitions into the pinned top bar.

PageWithTopBar(
  heading: 'Portfolio',
  subtitle: 'Main account',
  body: const PortfolioContents(),
)