Photonix UI - React Components, Templates & Figma Design System

Heading

Typography component for titles and headlines.

Usage

import { Heading } from '@photonix/ultimate';

<Heading size="display-sm">Page Title</Heading>

Prop	Type	Default	Description
as	`HeadingLevel`	`'h2'`	Semantic heading level (h1-h6)
size	`HeadingSize`	`-`	Visual size (can differ from semantic level for styling)
color	`"primary" \| "secondary" \| "brand" \| "primary-inverse"`	`-`	Text color
align	`"right" \| "left" \| "center"`	`-`	Text alignment
truncate	`boolean`	`-`	Truncate with ellipsis
children	`React.ReactNode`	`-`	Children

Headings use the design system's typography scale.

Sizes

<Heading size="display-lg">Display LG</Heading>
<Heading size="headline-md">Headline MD</Heading>
<Heading size="title-md">Title MD</Heading>