Photonix

Heading

Typography component for titles and headlines.

Preview

Workspace overview

Usage
"use client";

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

export default function HeadingPreviewExample() {
    return <Heading as="h2" size="headline-md" color="primary">Workspace overview</Heading>;
}

Component API

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

Variants

Sizes

Headings use the design system's typography scale.

Display LG

Headline MD

Title MD

Sizes
"use client";

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

export default function HeadingSizesExample() {
    return (
        <Flex direction="column" gap="md">
            <Heading size="display-lg">Display LG</Heading>
            <Heading size="headline-md">Headline MD</Heading>
            <Heading size="title-md">Title MD</Heading>
        </Flex>
    );
}

On this page

Preview
Component API
Variants
Sizes
Photonix UI - React Components, Templates & Figma Design System