# Typography - Code

> import Api from '@site/docs/autogenerated/api/ix-typography/api.mdx';

import Api from '@site/docs/autogenerated/api/ix-typography/api.mdx';

# Typography - Code

## Typography component

We use utility CSS classes to style text. Theme changes will apply to texts automatically (e.g. change color). The `ix-typography` component allows consistent formatting with easy to adapt properties.

## API for ix-typography

### Properties

| Name | Description | Attribute | Type | Default |
| --- | --- | --- | --- | --- |
| bold | { "Display text bold" } | bold | boolean | false |
| format | { "Text format" } | format | "body" \| "body-lg" \| "body-sm" \| "body-xs" \| "code" \| "code-lg" \| "code-sm" \| "display" \| "display-lg" \| "display-sm" \| "display-xl" \| "display-xs" \| "display-xxl" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "label" \| "label-lg" \| "label-sm" \| "label-xs" \| undefined |  |
| textColor | { "Text color based on theme variables" } | text-color | "alarm" \| "alarm-contrast" \| "contrast" \| "critical-contrast" \| "info-contrast" \| "inv-contrast" \| "inv-soft" \| "inv-std" \| "inv-weak" \| "neutral-contrast" \| "primary-contrast" \| "soft" \| "std" \| "success-contrast" \| "warning-contrast" \| "weak" \| undefined |  |
| textDecoration | { "Text decoration" } | text-decoration | "line-through" \| "none" \| "underline" | 'none' |

### Slot

| Name | Description |
| --- | --- |
| default | { "Text content." } |

## Mixins

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

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

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

```html

  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.

<!-- 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>
```