advanced

Typography

Text styling components.

Preview

A preview of the Typography component with interactive controls.

Preview Code

The Joke Tax Chronicles Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. The King's Plan The king thought it was a brilliant idea to tax jokes. "After all," he said, "everyone enjoys a good joke, so why not profit from it?" He decreed that every joke told would be taxed at a rate of: const tax = 0.1 gold coins. "After all," he said, "everyone enjoys a good joke, so it's only fair that the kingdom benefits too." The Consequences The people were not happy. Comedians went underground, jesters fled the kingdom, and laughter became a rare commodity.

Note: This is a fictional story.•Last updated: 3 days ago

Interactive

Installation

Add the Typography component to your project.

Bash

ng g @ng-cn/core:c typography

Usage

Import and use the Typography component in your Angular application.

Template TypeScript

template.html

<div class="space-y-6">
  <TypographyH1>The Joke Tax Chronicles</TypographyH1>
  <TypographyLead>
    Once upon a time, in a far-off land, there was a very lazy king.
  </TypographyLead>
  <TypographyH2>The King's Plan</TypographyH2>
  <TypographyP>
    The king thought it was a brilliant idea to tax jokes.
    <TypographyInlineCode>const tax = 0.1</TypographyInlineCode>
  </TypographyP>
  <TypographyBlockquote>
    "After all," he said, "everyone enjoys a good joke, so it's only fair."
  </TypographyBlockquote>
  <TypographyH3>The Consequences</TypographyH3>
  <TypographySmall>Note: This is a fictional story.</TypographySmall>
  <TypographyMuted>Last updated: 3 days ago</TypographyMuted>
</div>

Examples

Explore different variations and use cases for the Typography component.

Basic

Preview Code

Interactive

API Reference

Props

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes.