Typography

Skip to page content

BETA

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

<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</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	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	false
Property italic Attribute italic	If`true` , the typography will have an italic font style. type: boolean	false
Property maxLines Attribute max-lines	The number of lines to display before truncating the text, only used for the 'body' variant. type: number
Property strikethrough Attribute strikethrough	If`true` , the typography will have a line through it. type: boolean	false
Property underline Attribute underline	If`true` , the typography will have a line under it. type: boolean	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"	"body"

Property

applyVerticalMargins

Attribute

apply-vertical-margins

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

type: boolean

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

Default: false

Property

italic

Attribute

italic

Iftrue , the typography will have an italic font style.

type: boolean

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

Property

strikethrough

Attribute

strikethrough

Iftrue , the typography will have a line through it.

type: boolean

Default: false

Property

underline

Attribute

underline

Iftrue , the typography will have a line under it.

type: boolean

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

<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

<ic-typographyapply-vertical-margins="true">
<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

<ic-typographyvariant="h2"apply-vertical-margins="true">
<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

<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

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

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

Last reviewed 31 May 2024 .