Typography

The sj-typography component is used to display text in various semantic HTML elements.

Props

Prop	Type	Options	Default
variant	'h1'│'h2'│'h3'│'h4'│'h5'│'h6'│'p'│'span'│'strong'│'small'│'pre'│'body'	h1, h2, h3, h4, h5, h6, p, span, strong, small, pre, body	'p'
sj	SjStyle │ SjStyle[]	-	undefined

Examples

Single

<sj-typography variant="h4" [sj]="{ color: 'dark' }">Typography h4</sj-typography>

All Variants

<div style="display:flex; flex-direction:column; gap:8px">
  <sj-typography variant="h1">Heading 1</sj-typography>
  <sj-typography variant="h2">Heading 2</sj-typography>
  <sj-typography variant="h3">Heading 3</sj-typography>
  <sj-typography variant="h4">Heading 4</sj-typography>
  <sj-typography variant="h5">Heading 5</sj-typography>
  <sj-typography variant="h6">Heading 6</sj-typography>
  <sj-typography variant="p">Paragraph text</sj-typography>
  <sj-typography variant="span">Span text</sj-typography>
  <sj-typography variant="strong">Strong text</sj-typography>
  <sj-typography variant="small">Small text</sj-typography>
  <sj-typography variant="pre">preformatted</sj-typography>
</div>

Live Example

If the embed doesn’t load, open it directly: Open on StackBlitz.