Fonts
We use utility CSS classes to style text. Theme changes will apply to texts automatically (e.g. change color).
Usage
label-lg
<IxTypography format="label-lg" />
label
<IxTypography format="label" />
label-sm
<IxTypography format="label-sm" />
label-xs
<IxTypography format="label-xs" />
body-lg
<IxTypography format="body-lg" />
body
<IxTypography format="body" />
body-sm
<IxTypography format="body-sm" />
body-xs
<IxTypography format="body-xs" />
display-xxl
<IxTypography format="display-xxl" />
display-xl
<IxTypography format="display-xl" />
display-lg
<IxTypography format="display-lg" />
display
<IxTypography format="display" />
display-sm
<IxTypography format="display-sm" />
display-xs
<IxTypography format="display-xs" />
h1
<IxTypography format="h1" />
h2
<IxTypography format="h2" />
h3
<IxTypography format="h3" />
h4
<IxTypography format="h4" />
h5
<IxTypography format="h5" />
h6
<IxTypography format="h6" />
code-lg
<IxTypography format="code-lg" />
code
<IxTypography format="code" />
code-sm
<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>