Typography
Typography
Component demo
Interactive example
<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
.
|
|
|
---|---|---|
|
If |
|
|
If |
|
|
If |
|
|
The number of lines to display before truncating the text, only used for the 'body' variant. |
|
|
If |
|
|
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. |
|
|
If |
|
|
The ICDS typography style to use. |
|
If |
If |
If |
The number of lines to display before truncating the text, only used for the 'body' variant. |
If |
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. |
If |
The ICDS typography style to use. |
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
<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
<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
<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
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-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
<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>