Skip to main content

​
Overview

The Typography component provides a consistent way to render text throughout your application using predefined variants that match your design system.

​
Basic Usage

import { NSTypography } from '@newtonschool/grauity';

function MyComponent() {
  return (
    <NSTypography variant="paragraph-md-p1">
      The quick brown fox jumps over the lazy dog!
    </NSTypography>
  );
}

​
Props

​
variant
TypographyVariantType
required
Variant of the Typography element that defines its visual style.Available variants:
  • Display: display-bd-d1, display-bd-d2, display-bd-d3
  • Heading: heading-sb-h1 through heading-sb-h6
  • Paragraph Semibold: paragraph-sb-p1 through paragraph-sb-p4, paragraph-sb-l1, paragraph-sb-l2
  • Paragraph Medium: paragraph-md-p1 through paragraph-md-p4, paragraph-md-c1, paragraph-md-l1, paragraph-md-l2
  • Overline: overline-sb-ol1, overline-sb-ol2
  • Action: action-sb-p1, action-sb-p2, action-sb-lk1
​
as
string
default:"auto"
Determines the HTML element to render. When set to auto, it automatically selects the appropriate tag based on the variant.Available choices: h1, h2, h3, h4, h5, h6, p, span, div, label, caption, code, auto
​
color
string
default:"var(--text-emphasis-primary-default, #16191d)"
Color of the text element.
​
textAlign
string
Text alignment of the typography element.
​
textTransform
string
Text transformation (e.g., uppercase, lowercase, capitalize).
​
fontSize
string
Custom font size override.
​
className
string
default:""
Additional CSS class name for styling.
​
title
string
Native HTML title attribute (shows tooltip on hover).
​
children
React.ReactNode
required
Content to be displayed.

​
Display Variants

Large display text for hero sections and prominent headlines. 
<NSTypography variant="display-bd-d1">Display D1 - 76px</NSTypography>
<NSTypography variant="display-bd-d2">Display D2 - 64px</NSTypography>
<NSTypography variant="display-bd-d3">Display D3 - 52px</NSTypography>

​
Heading Variants

Semibold headings for section titles and content hierarchy. 
<NSTypography variant="heading-sb-h1">Heading H1 - 40px</NSTypography>
<NSTypography variant="heading-sb-h2">Heading H2 - 36px</NSTypography>
<NSTypography variant="heading-sb-h3">Heading H3 - 28px</NSTypography>
<NSTypography variant="heading-sb-h4">Heading H4 - 24px</NSTypography>
<NSTypography variant="heading-sb-h5">Heading H5 - 20px</NSTypography>
<NSTypography variant="heading-sb-h6">Heading H6 - 16px</NSTypography>

​
Paragraph Variants

​
Semibold Paragraphs

<NSTypography variant="paragraph-sb-p1">Paragraph SB P1 - 18px</NSTypography>
<NSTypography variant="paragraph-sb-p2">Paragraph SB P2 - 16px</NSTypography>
<NSTypography variant="paragraph-sb-p3">Paragraph SB P3 - 14px</NSTypography>
<NSTypography variant="paragraph-sb-p4">Paragraph SB P4 - 12px</NSTypography>

​
Medium Weight Paragraphs

<NSTypography variant="paragraph-md-p1">Paragraph MD P1 - 18px</NSTypography>
<NSTypography variant="paragraph-md-p2">Paragraph MD P2 - 16px</NSTypography>
<NSTypography variant="paragraph-md-p3">Paragraph MD P3 - 14px</NSTypography>
<NSTypography variant="paragraph-md-p4">Paragraph MD P4 - 12px</NSTypography>

​
Code Variant

<NSTypography variant="paragraph-md-c1">Code text with monospace font</NSTypography>

​
Label Variants

<NSTypography variant="paragraph-sb-l1">Semibold Label - 14px</NSTypography>
<NSTypography variant="paragraph-sb-l2">Semibold Label - 12px</NSTypography>
<NSTypography variant="paragraph-md-l1">Medium Label - 14px</NSTypography>
<NSTypography variant="paragraph-md-l2">Medium Label - 12px</NSTypography>

​
Overline Variants

Uppercase text for labels and categories. 
<NSTypography variant="overline-sb-ol1">OVERLINE 1</NSTypography>
<NSTypography variant="overline-sb-ol2">OVERLINE 2</NSTypography>

​
Action Variants

For interactive text elements like buttons and links. 
<NSTypography variant="action-sb-p1">Action P1 - 16px</NSTypography>
<NSTypography variant="action-sb-p2">Action P2 - 14px</NSTypography>
<NSTypography variant="action-sb-lk1">ACTION LINK</NSTypography>

​
Custom Element Type

<NSTypography variant="paragraph-md-p1" as="span">
  This renders as a span element
</NSTypography>

<NSTypography variant="paragraph-md-p1" as="div">
  This renders as a div element
</NSTypography>

​
Custom Color

<NSTypography 
  variant="heading-sb-h1" 
  color="var(--text-emphasis-brand-default)"
>
  Branded Heading
</NSTypography>

​
Constants

import { 
  TYPOGRAPHY_VARIANTS_ENUM,
  TYPOGRAPHY_AS_ENUM,
  TYPOGRAPHY_VARIANT_AS_MAPPING 
} from '@newtonschool/grauity';

// Usage
<NSTypography variant={TYPOGRAPHY_VARIANTS_ENUM.HEADING_SB_H1} />

Build docs developers (and LLMs) love

Get started for freeTalk to us