diff --git a/example/content/landingpage.md b/example/content/landingpage.md
index aa21114..d51982a 100644
--- a/example/content/landingpage.md
+++ b/example/content/landingpage.md
@@ -415,7 +415,7 @@ sections:
   - mode: default
     spaceBefore: default
     width: default
-    background: default
+    background: dark
     headline:
       level: h2
       align: center
@@ -431,12 +431,13 @@ sections:
           amet.
         link:
           label: Lorem Ipsum
-          variant: solid
+          variant: outline_inverted
           size: medium
           href: https://example.com
           type: link-button
         image: https://picsum.photos/seed/kdsteaserbox/500/300
         ratio: VALUE_16_9
+        darkStyle: true
       - type: teaser-box
         topic: Lorem Ipsum
         text: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ispum
@@ -444,12 +445,13 @@ sections:
           amet.
         link:
           label: Lorem Ipsum
-          variant: solid
+          variant: outline_inverted
           size: medium
           href: https://example.com
           type: link-button
         image: https://picsum.photos/seed/kdsteaserbox/500/300
         ratio: VALUE_16_9
+        darkStyle: true
       - type: teaser-box
         topic: Lorem Ipsum
         text: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ispum
@@ -457,12 +459,13 @@ sections:
           amet.
         link:
           label: Lorem Ipsum
-          variant: solid
+          variant: outline_inverted
           size: medium
           href: https://example.com
           type: link-button
         image: https://picsum.photos/seed/kdsteaserbox/500/300
         ratio: VALUE_16_9
+        darkStyle: true
     type: sections
     gutter: default
 type: page
diff --git a/gatsby-theme-kickstartds/src/components/KickstartDSPageComponent.tsx b/gatsby-theme-kickstartds/src/components/KickstartDSPageComponent.tsx
index c614e36..a3191cc 100644
--- a/gatsby-theme-kickstartds/src/components/KickstartDSPageComponent.tsx
+++ b/gatsby-theme-kickstartds/src/components/KickstartDSPageComponent.tsx
@@ -44,7 +44,12 @@ const cleanObjectKeys = (obj) => {
         }
       } else if (obj[property]) {
         if (obj[property] !== null) {
-          cleanedObject[cleanFieldName(property)] = obj[property];
+          // TODO re-simplify this... only needed because of inconsistent handling of `-` vs `_` in schema enum values
+          if (cleanFieldName(property) === 'variant') {
+            cleanedObject[cleanFieldName(property)] = obj[property].replace('_', '-');
+          } else {
+            cleanedObject[cleanFieldName(property)] = obj[property];
+          }
         }
       }
     }
@@ -54,7 +59,6 @@ const cleanObjectKeys = (obj) => {
 };
 
 const getComponent = (element, isSection = false) => {
-  console.log(element['type'], element);
   const componentType = isSection ? 'section' : element['type'];
 
   componentCounter[componentType] = componentCounter[componentType]+1 || 1;