Skip to main content

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"
format
Text format
Attribute:
format
Type:
TypographyFormatLabel | TypographyFormatBody | TypographyFormatDisplay | TypographyFormatHeading | TypographyFormatCode
textColor
Text color based on theme variables
Attribute:
text-color
Type:
"alarm" | "contrast" | "inv-contrast" | "inv-soft" | "inv-std" | "inv-weak" | "soft" | "std" | "weak"
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>