Typography (Heading, Text, Link, Code, Prose) for Angular

import { AuiHeading, AuiText, AuiLink, AuiLineClamp } from '@absoluteui/angular/typography';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Typography (Heading, Text, Link, Code, Prose) page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { typography: { ... } } }) (see Configuration).

Example

import { Component, input } from '@angular/core';
import { AUI_TYPOGRAPHY } from '@absoluteui/angular/typography';

@Component({
  selector: 'app-help',
  imports: [...AUI_TYPOGRAPHY],
  template: `
    <h2 auiHeading size="4">Need help?</h2>
    <p auiText tone="muted" [auiLineClamp]="2">We answer within one business day.</p>
    <a auiLink [href]="supportUrl()" external>Contact support</a>`,
})
export class HelpComponent {
  readonly supportUrl = input('https://example.com/support');
}

`h1[auiHeading], h2[auiHeading], h3[auiHeading], h4[auiHeading], h5[auiHeading], h6[auiHeading]`

Class AuiHeading; template reference #ref="auiHeading".

<h2 auiHeading size="4">: the level comes from the tag, size (1 largest to 6) sets the visual size.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
`size`	`HeadingLevel`		Heading: visual size, default the level. Text: font size, default md.

`[auiText]`

Class AuiText; template reference #ref="auiText".

<p auiText tone="muted" size="sm">, <span auiText strong>.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
`tone`	`TextTone`	`'default'`	Text: muted uses color-text-muted.
`size`	`TextSize`		Heading: visual size, default the level. Text: font size, default md.
`strong`	`boolean`	`false`	Text: semibold weight.

`a[auiLink]`

Class AuiLink; template reference #ref="auiLink".

<a auiLink href="https://example.com" external>Docs</a> or with routerLink. The href is validated like Link.create (http(s) or relative); external opens a new tab and says so to assistive technology in the scope’s locale.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
`external`	`boolean`	`false`	Link: target=_blank, rel=“noopener noreferrer”, and a visually hidden localized “(opens in a new tab)”.
`muted`	`boolean`	`false`	Link: muted color; the underline remains.

`[auiLineClamp]`

Class AuiLineClamp; template reference #ref="auiLineClamp".

<p auiText [auiLineClamp]="3">: clamp to 1..20 lines with an ellipsis.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
`auiLineClamp`	`number`		Required. setLineClamp: integer 1..20, written to –aui-lines.