Fonts

We use utility CSS classes to style text. Theme changes will apply to texts automatically (e.g. change color).

Usage

React / VueAngular / Web ComponentsCSS

NamePreviewCode

label-lg

Lorem ipsum dolor sit amet consectetur. Diam metus integer in ultrices est a. Nulla sed mattis bibendum integer imperdiet sapien at imperdiet hendrerit. Est volutpat morbi cursus morbi urna in vestibulum auctor quis.

<IxTypography format="label-lg" />

label

Lorem ipsum dolor sit amet consectetur. Diam metus integer in ultrices est a. Nulla sed mattis bibendum integer imperdiet sapien at imperdiet hendrerit. Est volutpat morbi cursus morbi urna in vestibulum auctor quis.

<IxTypography format="label" />

label-sm

Lorem ipsum dolor sit amet consectetur. Diam metus integer in ultrices est a. Nulla sed mattis bibendum integer imperdiet sapien at imperdiet hendrerit. Est volutpat morbi cursus morbi urna in vestibulum auctor quis.

<IxTypography format="label-sm" />

label-xs

Lorem ipsum dolor sit amet consectetur. Diam metus integer in ultrices est a. Nulla sed mattis bibendum integer imperdiet sapien at imperdiet hendrerit. Est volutpat morbi cursus morbi urna in vestibulum auctor quis.

<IxTypography format="label-xs" />

body-lg

Lorem ipsum dolor sit amet consectetur. Diam metus integer in ultrices est a. Nulla sed mattis bibendum integer imperdiet sapien at imperdiet hendrerit. Est volutpat morbi cursus morbi urna in vestibulum auctor quis.

<IxTypography format="body-lg" />

body

Lorem ipsum dolor sit amet consectetur. Diam metus integer in ultrices est a. Nulla sed mattis bibendum integer imperdiet sapien at imperdiet hendrerit. Est volutpat morbi cursus morbi urna in vestibulum auctor quis.

<IxTypography format="body" />

body-sm

Lorem ipsum dolor sit amet consectetur. Diam metus integer in ultrices est a. Nulla sed mattis bibendum integer imperdiet sapien at imperdiet hendrerit. Est volutpat morbi cursus morbi urna in vestibulum auctor quis.

<IxTypography format="body-sm" />

body-xs

Lorem ipsum dolor sit amet consectetur. Diam metus integer in ultrices est a. Nulla sed mattis bibendum integer imperdiet sapien at imperdiet hendrerit. Est volutpat morbi cursus morbi urna in vestibulum auctor quis.

<IxTypography format="body-xs" />

display-xxl

12345.678 87654.321

<IxTypography format="display-xxl" />

display-xl

12345.678 87654.321

<IxTypography format="display-xl" />

display-lg

12345.678 87654.321

<IxTypography format="display-lg" />

display

12345.678 87654.321

<IxTypography format="display" />

display-sm

12345.678 87654.321

<IxTypography format="display-sm" />

display-xs

12345.678 87654.321

<IxTypography format="display-xs" />

h1

Lorem ipsum dolor sit amet consectetur.

<IxTypography format="h1" />

h2

Lorem ipsum dolor sit amet consectetur.

<IxTypography format="h2" />

h3

Lorem ipsum dolor sit amet consectetur.

<IxTypography format="h3" />

h4

Lorem ipsum dolor sit amet consectetur.

<IxTypography format="h4" />

h5

Lorem ipsum dolor sit amet consectetur.

<IxTypography format="h5" />

h6

Lorem ipsum dolor sit amet consectetur.

<IxTypography format="h6" />

code-lg

Lorem ipsum dolor sit amet consectetur.

<IxTypography format="code-lg" />

code

Lorem ipsum dolor sit amet consectetur.

<IxTypography format="code" />

code-sm

Lorem ipsum dolor sit amet consectetur.

<IxTypography format="code-sm" />

ix-typography

Name

Description and specifications

bold

Display text bold

Attribute:

bold

Type:

boolean

Default:

false

color

Deprecated

since 2.1.0 use property `text-color`

Text color based on theme variables

Attribute:

color

Type:

"alarm" ｜ "contrast" ｜ "inv-contrast" ｜ "inv-soft" ｜ "inv-std" ｜ "inv-weak" ｜ "soft" ｜ "std" ｜ "weak" ｜ undefined

format

Text format

Attribute:

format

Type:

TypographyFormat ｜ undefined

textColor

Text color based on theme variables

Attribute:

text-color

Type:

"alarm" ｜ "contrast" ｜ "inv-contrast" ｜ "inv-soft" ｜ "inv-std" ｜ "inv-weak" ｜ "soft" ｜ "std" ｜ "weak" ｜ undefined

textDecoration

Text decoration

Attribute:

text-decoration

Type:

"line-through" ｜ "none" ｜ "underline"

Default:

'none'

Mixins

We provide additional SCSS mixins which can be used to create valid custom typography classes.

@import '@siemens/ix/scss/mixins/font';

.my-class-name {
  @include typography-h3;
}

<span class="my-class-name">
  Lorem ipsum dolor sit amet consectetur. Et pulvinar arcu placerat
  tristique. Velit ipsum donec pulvinar erat donec turpis ultrices.
  Scelerisque pharetra sed sapien diam lorem. Risus quis in faucibus
  tempor. Hendrerit at cursus suspendisse neque adipiscing at at eu.
</span>

<!-- Same result as: -->
<ix-typography format="h3">
  Lorem ipsum dolor sit amet consectetur. Et pulvinar arcu placerat
  tristique. Velit ipsum donec pulvinar erat donec turpis ultrices.
  Scelerisque pharetra sed sapien diam lorem. Risus quis in faucibus
  tempor. Hendrerit at cursus suspendisse neque adipiscing at at eu.
</ix-typography>