Typography

Overview

A single Typography component that handles all your text needs with consistent sizing, weights, colors, and spacing through simple props.

Installation

ignix add component typography

Preview

Preview

Heading 1 - Page Title

Heading 2 - Section

Heading 3 - Subsection

Heading 4 - Minor Heading

Heading 5 - Small Heading

Heading 6 - Smallest Heading

Code

import { Typography } from './components/ui';

function MyComponent() {
  return (
        <div>
            <Typography variant="h1">Heading 1 - Page Title</Typography>
            <Typography variant="h2">Heading 2 - Section</Typography>
            <Typography variant="h3">Heading 3 - Subsection</Typography>
            <Typography variant="h4">Heading 4 - Minor Heading</Typography>
            <Typography variant="h5">Heading 5 - Small Heading</Typography>
            <Typography variant="h6">Heading 6 - Smallest Heading</Typography>
        </div>
  );
}

Usage

Basic Usage

Preview

Main Title

Section Heading

Large body text perfect for introductory paragraphs or lead content.

This is the main content of your page. It provides detailed information and supports the main points.

Small body text for secondary information, notes, or less important content.

Additional information label

Code

import { Typography } from '@mindfiredigital/ignix-ui';

function BasicTypography() {
return (
    <div>
        <Typography variant="h1">Main Title</Typography>
        <Typography variant="h2">Section Heading</Typography>
        <Typography variant="body-large">
            Large body text perfect for introductory paragraphs or lead content.
        </Typography>
        <Typography variant="body">
            This is the main content of your page. It provides detailed 
            information and supports the main points.
        </Typography>
        <Typography variant="body-small">
            Small body text for secondary information, notes, or less important content.
        </Typography>
        <Typography variant="label">Additional information label</Typography>
    </div>
);
}

Colors

Preview

Success message

Error message

Warning message

Code

<div> 
    <Typography color="success">Success message</Typography> 
    <Typography color="error">Error message</Typography> 
    <Typography color="warning">Warning message</Typography> 
</div> 

Font Weights

Preview

Light weight

Normal weight

Bold weight

Code

<div> 
    <Typography weight="light">Light weight</Typography> 
    <Typography weight="normal">Normal weight</Typography> 
    <Typography weight="bold">Bold weight</Typography> 
</div> 

Text Alignment

Preview

Left aligned text

Centered text

Right aligned text

Code

<div> 
    <Typography align="left">Left aligned text</Typography> 
    <Typography align="center">Centered text</Typography> 
    <Typography align="right">Right aligned text</Typography> 
</div> 

Text Decorations

Preview

Overlined text

Underlined text

Strikethrough text

Code

<div> 
    <Typography decoration="overline">Overlined text</Typography>
    <Typography decoration="underline">Underlined text</Typography> 
    <Typography decoration="line-through">Strikethrough text</Typography> 
</div> 

Text Transforms

Preview

Uppercase text

Lowercase text

Capitalized text

Code

<div> 
    <Typography transform="uppercase">Uppercase text</Typography> 
    <Typography transform="lowercase">Lowercase text</Typography> 
    <Typography transform="capitalize">Capitalized text</Typography> 
</div> 

Interactive Features

Interactive Features

Preview

Hover Effects

Hover to underline this text

Hover to change color

Hover to scale

Special Features

This text is highlighted with mark

This is a very long text that will be truncated with an ellipsis when it exceeds the container width

This looks like a clickable link

Code

// Interactive Features Example
<div>
  <Typography hover="underline" className="cursor-pointer">
    Hover to underline this text
  </Typography>
  <Typography hover="color" className="cursor-pointer">
    Hover to change color
  </Typography>
  <Typography hover="scale" className="cursor-pointer">
    Hover to scale
  </Typography>
  <Typography mark>
    This text is highlighted with mark
  </Typography>
  <Typography truncate className="max-w-xs">
    This is a very long text that will be truncated with an ellipsis...
  </Typography>
  <Typography variant="link">
    This looks like a clickable link
  </Typography>
</div>

Props

Prop	Type	Default	Description
variant	'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body-large' | 'body' | 'body-small' | 'lead' | 'large' | 'small' | 'label' | 'caption' | 'muted' | 'link' | 'code' | 'blockquote' | 'list'	'body'	The typography variant/style
color	'default' | 'primary' | 'secondary' | 'muted' | 'error' | 'success' | 'warning' | 'inherit'	'default'	Text color variant
weight	'light' | 'normal' | 'medium' | 'semibold' | 'bold'	'normal'	Font weight
align	'left' | 'center' | 'right' | 'justify'	'left'	Text alignment
decoration	'none' | 'underline' | 'line-through' | 'overline'	'none'	Text decoration
transform	'normal' | 'uppercase' | 'lowercase' | 'capitalize'	'normal'	Text transformation
hover	'none' | 'underline' | 'color' | 'scale'	'none'	Hover effect style
mark	boolean	false	Whether to highlight text with mark tag
truncate	boolean	false	Whether to truncate text with ellipsis
asChild	boolean	false	Merge props onto child element
as	React.ElementType	-	Custom HTML element to render
className	string	-	Additional CSS classes to apply