diff --git a/packages/web-twig/src/Resources/components/Heading/Heading.stories.twig b/packages/web-twig/src/Resources/components/Heading/Heading.stories.twig
index a0b32b032e..d2b6b29257 100644
--- a/packages/web-twig/src/Resources/components/Heading/Heading.stories.twig
+++ b/packages/web-twig/src/Resources/components/Heading/Heading.stories.twig
@@ -10,4 +10,8 @@
{% include '@components/Heading/stories/HeadingSizes.twig' %}
+
+ {% include '@components/Heading/stories/HeadingEmphasis.twig' %}
+
+
{% endblock %}
diff --git a/packages/web-twig/src/Resources/components/Heading/Heading.twig b/packages/web-twig/src/Resources/components/Heading/Heading.twig
index ea82df3b71..08b96f1fd5 100644
--- a/packages/web-twig/src/Resources/components/Heading/Heading.twig
+++ b/packages/web-twig/src/Resources/components/Heading/Heading.twig
@@ -1,10 +1,11 @@
{# API #}
{%- set props = props | default([]) -%}
+{%- set _emphasis = props.emphasis | default('bold') -%}
{%- set _size = props.size | default('medium') -%}
{%- set _elementType = props.elementType | default('div') -%}
{# Class names #}
-{%- set _rootClassName = _spiritClassPrefix ~ 'typography-heading-' ~ _size ~ '-text' -%}
+{%- set _rootClassName = _spiritClassPrefix ~ 'typography-headline-' ~ _size ~ '-' ~ _emphasis -%}
{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
diff --git a/packages/web-twig/src/Resources/components/Heading/README.md b/packages/web-twig/src/Resources/components/Heading/README.md
index ff8e44f289..c6ff8f6a21 100644
--- a/packages/web-twig/src/Resources/components/Heading/README.md
+++ b/packages/web-twig/src/Resources/components/Heading/README.md
@@ -11,7 +11,7 @@ Basic example usage:
Advanced example usage:
```twig
-Text content
+Text content
```
Without lexer:
@@ -26,18 +26,30 @@ Without lexer:
{% endembed %}
```
+## Emphasis
+
+Use the `emphasis` prop to set the emphasis of the text.
+
+```twig
+Semibold heading
+```
+
+See [API](#api) for all available options.
+
## API
| Name | Type | Default | Required | Description |
| ------------- | ------------------------------------------- | -------- | -------- | -------------------------------------------------------------- |
| `size` | [Size Extended dictionary][dictionary-size] | `medium` | ✕ | Size of the text |
| `elementType` | `string` | `div` | ✕ | HTML tag to render |
-| `translate` | [`yes` \| `no` \| `''`] | `null` | ✕ | Set to `no` to disable machine translation of the text content |
+| `emphasis` | [Emphasis dictionary][dictionary-emphasis] | `bold` | ✕ | Emphasis of the text |
+| `translate` | \[`yes` \| `no` \| `''`] | `null` | ✕ | Set to `no` to disable machine translation of the text content |
On top of the API options, the components accept [additional attributes][readme-additional-attributes].
If you need more control over the styling of a component, you can use [style props][readme-style-props]
and [escape hatches][readme-escape-hatches].
+[dictionary-emphasis]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#emphasis
[dictionary-size]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#size
[heading]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/src/components/Heading
[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes
diff --git a/packages/web-twig/src/Resources/components/Heading/__tests__/__fixtures__/headingDefault.twig b/packages/web-twig/src/Resources/components/Heading/__tests__/__fixtures__/headingDefault.twig
index 748d3cf9cb..ad949c40bc 100644
--- a/packages/web-twig/src/Resources/components/Heading/__tests__/__fixtures__/headingDefault.twig
+++ b/packages/web-twig/src/Resources/components/Heading/__tests__/__fixtures__/headingDefault.twig
@@ -1,9 +1,23 @@
Example heading
+
+
Example heading
-
+
+
+
+ Example heading
+
+
+
+
Example heading
diff --git a/packages/web-twig/src/Resources/components/Heading/__tests__/__snapshots__/headingDefault.twig.snap.html b/packages/web-twig/src/Resources/components/Heading/__tests__/__snapshots__/headingDefault.twig.snap.html
index ef9892fb10..7676b9d030 100644
--- a/packages/web-twig/src/Resources/components/Heading/__tests__/__snapshots__/headingDefault.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/Heading/__tests__/__snapshots__/headingDefault.twig.snap.html
@@ -5,16 +5,23 @@
-
+
Example heading
+
-
+
Example heading
+
-
+
Example heading
+
+
+
+ Example heading
+