diff --git a/templates/patterns/navigation_list/navigation_list.ui_patterns.yml b/templates/patterns/navigation_list/navigation_list.ui_patterns.yml
index eec2a6a73..28d138003 100644
--- a/templates/patterns/navigation_list/navigation_list.ui_patterns.yml
+++ b/templates/patterns/navigation_list/navigation_list.ui_patterns.yml
@@ -8,6 +8,9 @@ navigation_list:
     illustration:
       label: "Illustration"
       description: "Displays the image in the top right corner."
+    image_as_illustration:
+      label: "Image as illustration"
+      description: "Displays the image in the top right corner without a background."
   fields:
     title:
       type: "text"
diff --git a/templates/patterns/navigation_list/pattern-navigation-list.html.twig b/templates/patterns/navigation_list/pattern-navigation-list.html.twig
index fb66a878b..2f202a5d3 100644
--- a/templates/patterns/navigation_list/pattern-navigation-list.html.twig
+++ b/templates/patterns/navigation_list/pattern-navigation-list.html.twig
@@ -62,6 +62,7 @@
 {% endif %}
 
 {% set _variant = (variant == 'illustration') ? 'illustration' : '' %}
+{% set _variant = variant|replace({'_':'-'})|default('') %}
 {% include '@ecl-twig/navigation-list/navigation-list-item.html.twig' with {
   'variant': _variant,
   'title': title|default({}),
diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml
index 4bea8dcb9..7d0d39ada 100644
--- a/tests/src/Kernel/fixtures/rendering.yml
+++ b/tests/src/Kernel/fixtures/rendering.yml
@@ -2951,8 +2951,30 @@
     count:
       'article.ecl-navigation-list__item.ecl-navigation-list__item--illustration': 1
       '.ecl-content-block.ecl-navigation-list__content-block': 1
-      "img.ecl-navigation-list__image[src=\"https://placeimg.com/1000/500/arch\"]": 1
-      'img.ecl-navigation-list__image[alt="Alternative text for image"]': 1
+      "picture.ecl-navigation-list__picture  img.ecl-navigation-list__image[src=\"https://placeimg.com/1000/500/arch\"]": 1
+      'picture.ecl-navigation-list__picture  img.ecl-navigation-list__image[alt="Alternative text for image"]': 1
+    equals:
+      'div.ecl-content-block__title a.ecl-link--standalone.ecl-link[href="http://example.com"]': 'Navigation list title'
+      'div.ecl-content-block__description': 'Navigation list description'
+- array:
+    '#type': pattern
+    '#id': navigation_list
+    '#fields':
+      variant: 'image_as_illustration'
+      title: 'Navigation list title'
+      title_url: 'http://example.com'
+      description: 'Navigation list description'
+      border: true
+      image:
+        src: "https://placeimg.com/1000/500/arch"
+        alt: "Alternative text for image"
+  assertions:
+    count:
+      'article.ecl-navigation-list__item.ecl-navigation-list__item--illustration': 0
+      'article.ecl-navigation-list__item.ecl-navigation-list__item--image-as-illustration': 1
+      '.ecl-content-block.ecl-navigation-list__content-block': 1
+      "picture.ecl-navigation-list__picture img.ecl-navigation-list__image[src=\"https://placeimg.com/1000/500/arch\"]": 1
+      'picture.ecl-navigation-list__picture  img.ecl-navigation-list__image[alt="Alternative text for image"]': 1
     equals:
       'div.ecl-content-block__title a.ecl-link--standalone.ecl-link[href="http://example.com"]': 'Navigation list title'
       'div.ecl-content-block__description': 'Navigation list description'