Skip to page content

Show navigation section

Component demo

Interactive example

H1

H2

H3

H4

Body

Subtitle large

Subtitle small

Label

Label uppercase

Caption

Caption uppercase

Code large

Code small

Code extra small

Web component

React

Show full code

<ic-typographyvariant="h1">
<h1>H1</h1>
</ic-typography>
<ic-typographyvariant="h2">
<h2>H2</h2>
</ic-typography>
<ic-typographyvariant="h3">
<h3>H3</h3>
</ic-typography>
<ic-typographyvariant="h4">
<h4>H4</h4>
</ic-typography>
<ic-typography>Body</ic-typography>
<ic-typographyvariant="subtitle-large">Subtitle large</ic-typography>
<ic-typographyvariant="subtitle-small">Subtitle small</ic-typography>
<ic-typographyvariant="label">Label</ic-typography>
<ic-typographyvariant="label-uppercase">Label uppercase</ic-typography>
<ic-typographyvariant="caption">Caption</ic-typography>
<ic-typographyvariant="caption-uppercase">Caption uppercase</ic-typography>
<ic-typographyvariant="code-large">Code large</ic-typography>
<ic-typographyvariant="code-small">Code small</ic-typography>
<ic-typographyvariant="code-extra-small">Code extra small</ic-typography>

<IcTypographyvariant="h1">
<h1>H1</h1>
</IcTypography>
<IcTypographyvariant="h2">
<h2>H2</h2>
</IcTypography>
<IcTypographyvariant="h3">
<h3>H3</h3>
</IcTypography>
<IcTypographyvariant="h4">
<h4>H4</h4>
</IcTypography>
<IcTypography>Body</IcTypography>
<IcTypographyvariant="subtitle-large">Subtitle large</IcTypography>
<IcTypographyvariant="subtitle-small">Subtitle small</IcTypography>
<IcTypographyvariant="label">Label</IcTypography>
<IcTypographyvariant="label-uppercase">Label uppercase</IcTypography>
<IcTypographyvariant="caption">Caption</IcTypography>
<IcTypographyvariant="caption-uppercase">Caption uppercase</IcTypography>
<IcTypographyvariant="code-large">Code large</IcTypography>
<IcTypographyvariant="code-small">Code small</IcTypography>
<IcTypographyvariant="code-extra-small">Code extra small</IcTypography>

Typography details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property applyVerticalMargins Attribute apply-vertical-margins	If`true` , appropriate top and bottom margins will be applied to the typography. type: boolean - boolean \| undefined	false
Property bold Attribute bold	If`true` , the typography will have a bold font weight. Note: This will have no impact on variants that already use an equivalent or higher font weight (h1, h2, and subtitle-large). type: boolean - boolean \| undefined	false
Property italic Attribute italic	If`true` , the typography will have an italic font style. type: boolean - boolean \| undefined	false
Property maxLines Attribute max-lines	The number of lines to display before truncating the text, only used for the 'body' variant. type: number - number \| undefined
Property strikethrough Attribute strikethrough	If`true` , the typography will have a line through it. type: boolean - boolean \| undefined	false
Property theme Attribute theme	Sets the text color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light" \| undefined	"inherit"
Property underline Attribute underline	If`true` , the typography will have a line under it. type: boolean - boolean \| undefined	false
Property variant Attribute variant	The ICDS typography style to use. type: IcTypographyVariants - "badge" \| "badge-small" \| "body" \| "caption" \| "caption-uppercase" \| "code-extra-small" \| "code-large" \| "code-small" \| "h1" \| "h2" \| "h3" \| "h4" \| "label" \| "label-uppercase" \| "subtitle-large" \| "subtitle-small" \| undefined	"body"

Property

applyVerticalMargins

Attribute

apply-vertical-margins

Iftrue , appropriate top and bottom margins will be applied to the typography.

type: boolean - boolean | undefined

Default: false

Property

bold

Attribute

bold

Iftrue , the typography will have a bold font weight. Note: This will have no impact on variants that already use an equivalent or higher font weight (h1, h2, and subtitle-large).

type: boolean - boolean | undefined

Default: false

Property

italic

Attribute

italic

Iftrue , the typography will have an italic font style.

type: boolean - boolean | undefined

Default: false

Property

maxLines

Attribute

max-lines

The number of lines to display before truncating the text, only used for the 'body' variant.

type: number - number | undefined

Property

strikethrough

Attribute

strikethrough

Iftrue , the typography will have a line through it.

type: boolean - boolean | undefined

Default: false

Property

theme

Attribute

theme

Sets the text color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined

Default: "inherit"

Property

underline

Attribute

underline

Iftrue , the typography will have a line under it.

type: boolean - boolean | undefined

Default: false

Property

variant

Attribute

variant

The ICDS typography style to use.

Default: "body"

Variants

Re-styled typography

Add a variant to the typography element to change its style. This does not change the semantic level of the typography element.

Interactive example

H5 with H2 styling

Web component

React

Show full code

<ic-typographyvariant="h2">
<h5>H5 with H2 styling</h5>
</ic-typography>

<IcTypographyvariant="h2">
<h5>H5 with H2 styling</h5>
</IcTypography>

Vertical margins applied

Interactive example

H5 with margins applied

Web component

React

Show full code

<ic-typographyapply-vertical-margins>
<h5>H5 with margins applied</h5>
</ic-typography>

<IcTypographyapplyVerticalMargins>
<h5>H5 with margins applied</h5>
</IcTypography>

Vertical margins applied on re-styled typography

Interactive example

H5 with H2 styling and margins applied

Web component

React

Show full code

<ic-typographyvariant="h2"apply-vertical-margins>
<h5>H5 with H2 styling and margins applied</h5>
</ic-typography>

<IcTypographyvariant="h2"applyVerticalMargins>
<h5>H5 with H2 styling and margins applied</h5>
</IcTypography>

Truncation

Text can be truncated to a maximum number of lines when usingvariant="body" .

Interactive example

Body of text that is truncated to three lines. Click the 'See more' link to expand the text, then click 'See less' to truncate the text once more!
Dripper caramelization java saucer grounds galão, mocha, and robusta kopi-luwak, percolator, instant, qui saucer latte in brewed café au lait. Con panna, cup, cream, body americano affogato cup espresso, rich milk seasonal saucer grinder spoon that cultivar strong redeye frappuccino barista extraction redeye mazagran. Grounds, french press dripper organic and foam id saucer, crema, black rich dark, grounds breve coffee steamed caramelization percolator.

Web component

React

Show full code

<ic-typographymax-lines="3"variant="body">
  Body of text that is truncated to three lines. Click the 'See more' link
  to expand the text, then click 'See less' to truncate the text once
  more!
<br/>
  Dripper caramelization java saucer grounds galão, mocha, and robusta
  kopi-luwak, percolator, instant, qui saucer latte in brewed café au
  lait. Con panna, cup, cream, body americano affogato cup espresso, rich
  milk seasonal saucer grinder spoon that cultivar strong redeye
  frappuccino barista extraction redeye mazagran. Grounds, french press
  dripper organic and foam id saucer, crema, black rich dark, grounds
  breve coffee steamed caramelization percolator.
</ic-typography>

<IcTypographymaxLines="3"variant="body">
  Body of text that is truncated to three lines. Click the 'See more' link
  to expand the text, then click 'See less' to truncate the text once
  more!
<br/>
  Dripper caramelization java saucer grounds galão, mocha, and robusta
  kopi-luwak, percolator, instant, qui saucer latte in brewed café au
  lait. Con panna, cup, cream, body americano affogato cup espresso, rich
  milk seasonal saucer grinder spoon that cultivar strong redeye
  frappuccino barista extraction redeye mazagran. Grounds, french press
  dripper organic and foam id saucer, crema, black rich dark, grounds
  breve coffee steamed caramelization percolator.
</IcTypography>

Additional styling

Interactive example

Bold

Italic

Underline

Strikethrough

Web component

React

Show full code

<ic-typographyvariant="h4"bold>
<h4>Bold</h4>
</ic-typography>
<ic-typographyvariant="h4"italic>
<h4>Italic</h4>
</ic-typography>
<ic-typographyvariant="h4"underline>
<h4>Underline</h4>
</ic-typography>
<ic-typographyvariant="h4"strikethrough>
<h4>Strikethrough</h4>
</ic-typography>

<IcTypographyvariant="h4"bold>
<h4>Bold</h4>
</IcTypography>
<IcTypographyvariant="h4"italic>
<h4>Italic</h4>
</IcTypography>
<IcTypographyvariant="h4"underline>
<h4>Underline</h4>
</IcTypography>
<IcTypographyvariant="h4"strikethrough>
<h4>Strikethrough</h4>
</IcTypography>

Last reviewed 31 May 2024 .