@kickstartds/ds-agency-premium 1.6.71 → 1.6.72--canary.43.2476.0

package/dist/components/split-weighted/split-weighted.schema.json

@@ -0,0 +1,254 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/split-weighted.schema.json",
+  "title": "Split Weighted",
+  "type": "object",
+  "properties": {
+    "verticalGutter": {
+      "title": "Vertical Gutter",
+      "description": "Sets the vertical space between the content of the split layout",
+      "type": "string",
+      "enum": ["large", "default", "small", "none"],
+      "default": "default"
+    },
+    "horizontalGutter": {
+      "title": "Horizontal Gutter",
+      "description": "Sets the horizontal space between the content of the split layout",
+      "type": "string",
+      "enum": ["large", "default", "small", "none"],
+      "default": "default"
+    },
+    "verticalAlign": {
+      "title": "Vertical Alignment",
+      "type": "string",
+      "description": "Aligns the content vertically within the sections",
+      "enum": ["top", "center", "bottom", "sticky"],
+      "default": "top"
+    },
+    "mainLayout": {
+      "title": "Main Layout",
+      "type": "object",
+      "properties": {
+        "gutter": {
+          "title": "Content Gutter",
+          "description": "Sets the space between the content of the split layout",
+          "type": "string",
+          "enum": ["large", "default", "small", "none"],
+          "default": "default"
+        },
+        "minWidth": {
+          "title": "Minimum Width",
+          "description": "Sets the minimum width of the main section",
+          "type": "string",
+          "enum": ["narrow", "default", "wide"],
+          "default": "wide"
+        }
+      }
+    },
+    "asideLayout": {
+      "title": "Aside Layout",
+      "description": "Layout settings for the aside section of the split layout",
+      "type": "object",
+      "properties": {
+        "gutter": {
+          "type": "string",
+          "title": "Gutter",
+          "description": "Size of gutter to use",
+          "enum": ["large", "default", "small", "none"],
+          "default": "default"
+        },
+        "minWidth": {
+          "title": "Minimum Width",
+          "description": "Sets the minimum width of the main section",
+          "type": "string",
+          "enum": ["narrow", "default", "wide"],
+          "default": "default"
+        }
+      }
+    },
+    "order": {
+      "type": "object",
+      "title": "Order",
+      "description": "Sets the order of the main and aside sections in the split layout",
+      "properties": {
+        "mobile": {
+          "title": "Mobile Order",
+          "type": "string",
+          "enum": ["mainFirst", "asideFirst"],
+          "default": "mainFirst",
+          "description": "Determines the order of sections on mobile devices"
+        },
+        "desktop": {
+          "title": "Desktop Order",
+          "type": "string",
+          "enum": ["mainFirst", "asideFirst"],
+          "default": "mainFirst",
+          "description": "Determines the order of sections on desktop devices"
+        }
+      }
+    },
+    "mainComponents": {
+      "type": "array",
+      "title": "Main",
+      "description": "Allowed components for the main half of the split layout",
+      "items": {
+        "anyOf": [
+          {
+            "$ref": "http://schema.mydesignsystem.com/blog-teaser.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/business-card.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/contact.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/content-nav.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/cta.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/divider.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/downloads.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/event-latest-teaser.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/event-list-teaser.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/faq.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/features.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/gallery.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/hero.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/html.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/image-story.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/image-text.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/logos.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/mosaic.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/slider.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/stats.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/teaser-card.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/testimonials.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/text.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/video-curtain.schema.json"
+          }
+        ]
+      }
+    },
+    "asideComponents": {
+      "type": "array",
+      "title": "Aside",
+      "description": "Allowed components for the aside half of the split layout",
+      "items": {
+        "anyOf": [
+          {
+            "$ref": "http://schema.mydesignsystem.com/blog-teaser.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/business-card.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/contact.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/content-nav.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/cta.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/divider.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/downloads.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/event-latest-teaser.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/event-list-teaser.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/faq.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/features.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/gallery.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/hero.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/html.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/image-story.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/image-text.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/logos.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/mosaic.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/slider.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/stats.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/teaser-card.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/testimonials.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/text.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/video-curtain.schema.json"
+          }
+        ]
+      }
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/stat/index.js

@@ -1,6 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, createContext, useContext } from 'react';
 import { CountUp } from '@kickstartds/content/lib/count-up';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+
+const defaults = {};
 
 const StatContextDefault = forwardRef(({ number, title, description, icon, ...rest }, ref) => {
     const parts = number ? number.toString().split(/(\d+)/).filter(Boolean) : [];
@@ -17,7 +20,7 @@ const StatContextDefault = forwardRef(({ number, title, description, icon, ...re
 const StatContext = createContext(StatContextDefault);
 const Stat = forwardRef((props, ref) => {
     const Component = useContext(StatContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Stat.displayName = "Stat";
 

package/dist/components/stat/stat.schema.dereffed.json

@@ -45,9 +45,6 @@
         "home",
         "map"
       ]
-    },
-    "type": {
-      "const": "stat"
     }
   },
   "additionalProperties": false,

package/dist/components/stats/index.js

@@ -2,15 +2,20 @@ import "./stats.css";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, createElement, createContext, useContext } from 'react';
 import { Stat } from '../stat/index.js';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 import '@kickstartds/content/lib/count-up';
 
+const defaults = {
+    "stat": []
+};
+
 const StatsContextDefault = forwardRef(({ stat: stats = [], ...rest }, ref) => {
     return (jsx("div", { ...rest, ref: ref, className: "dsa-stats", children: stats.map((item, index) => (createElement(Stat, { ...item, key: index }))) }));
 });
 const StatsContext = createContext(StatsContextDefault);
 const Stats = forwardRef((props, ref) => {
     const Component = useContext(StatsContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Stats.displayName = "Stats";
 

package/dist/components/stats/stats.css

@@ -9,6 +9,7 @@
   --dsa-stats__number--background: var(--dsa-typo--highlight);
   --dsa-stats__topic__font: var(--ks-font-interface-xl);
   --dsa-stats__topic--color: var(--ks-text-color-display);
+  --dsa-stats__topic__font-weight: var(--dsa-topic--font-weight);
   --dsa-stats__copy--font: var(--ks-font-copy-s);
   --dsa-stats__copy--color: var(--ks-text-color-default);
 }
@@ -50,6 +51,7 @@
 .dsa-stats .c-count-up__topic {
   color: var(--dsa-stats__topic--color, var(--ks-text-color-display));
   font: var(--dsa-stats__topic__font, var(--ks-font-interface-xl));
+  font-weight: var(--dsa-stats__topic__font-weight, var(--dsa-topic--font-weight));
   text-align: center;
 }
 .dsa-stats .c-count-up__text {

package/dist/components/stats/stats.schema.dereffed.json

@@ -56,9 +56,6 @@
               "home",
               "map"
             ]
-          },
-          "type": {
-            "const": "stat"
           }
         },
         "additionalProperties": false,
@@ -87,9 +84,6 @@
       },
       "minItems": 1,
       "maxItems": 4
-    },
-    "type": {
-      "const": "stats"
     }
   },
   "additionalProperties": false,

package/dist/components/teaser-card/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { TeaserCardProps } from "../../TeaserCardProps-b9c28e78.js";
+import { TeaserCardProps } from "../../TeaserCardProps-d069476f.js";
 declare const TeaserCardContextDefault: import("react").ForwardRefExoticComponent<TeaserCardProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const TeaserCardContext: import("react").Context<import("react").ForwardRefExoticComponent<TeaserCardProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const TeaserCard: import("react").ForwardRefExoticComponent<TeaserCardProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/teaser-card/index.js

@@ -5,20 +5,31 @@ import classnames from 'classnames';
 import { TeaserBoxContextDefault, TeaserBoxContext } from '@kickstartds/base/lib/teaser-box';
 import { Container } from '@kickstartds/core/lib/container';
 import { compiler } from 'markdown-to-jsx';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 
-const TeaserCardContextDefault = forwardRef(({ headline, text, button, target, image, imageRatio = "wide", label, layout = "stack", ...rest }, ref) => (jsx(Container, { name: "teaser-card", children: jsx(TeaserBoxContextDefault, { ...rest, className: classnames(`dsa-teaser-card`, label && `dsa-teaser-card--label`, `dsa-teaser-card--${layout}`, `dsa-teaser-card--${imageRatio}`), topic: headline, text: text, 
-        // @ts-expect-error
-        renderTopic: () => (jsxs(Fragment, { children: [label ? (jsx("span", { className: "dsa-teaser-card__label", children: label })) : (""), compiler(headline)] })), link: {
-            hidden: button?.hidden,
-            label: button.label,
-            variant: "secondary",
-            target: target,
-            icon: button?.chevron ? "chevron-right" : undefined,
-        }, image: image, ref: ref }) })));
+const defaults = {
+    "layout": "stack",
+    "centered": false,
+    "button": {
+        "chevron": false,
+        "hidden": false
+    },
+    "imageRatio": "wide"
+};
+
+const TeaserCardContextDefault = forwardRef(({ headline, text, button, url, image, imageRatio = "wide", label, layout = "stack", centered = false, ...rest }, ref) => (jsx(Container, { name: "teaser-card", children: jsxs("div", { className: classnames(`dsa-teaser-card`, `dsa-teaser-card--${layout}`, `dsa-teaser-card--${imageRatio}`, centered && `dsa-teaser-card--centered`, !image && "dsa-teaser-card--no-image"), children: [label && jsx("span", { className: "dsa-teaser-card__label", children: label }), jsx(TeaserBoxContextDefault, { ...rest, topic: headline, text: text, 
+                // @ts-expect-error
+                renderTopic: () => jsx(Fragment, { children: compiler(headline) }), link: {
+                    hidden: button?.hidden,
+                    label: button.label,
+                    variant: "primary",
+                    url: url,
+                    icon: button?.chevron ? "chevron-right" : undefined,
+                }, image: image, ref: ref })] }) })));
 const TeaserCardContext = createContext(TeaserCardContextDefault);
 const TeaserCard = forwardRef((props, ref) => {
     const Component = useContext(TeaserCardContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 TeaserCard.displayName = "TeaserCard";
 const TeaserBoxProvider = (props) => (jsx(TeaserBoxContext.Provider, { ...props, value: TeaserCard }));

package/dist/components/teaser-card/teaser-card.css

@@ -8,39 +8,49 @@
   --dsa-teaser-card--border-width: var(--ks-border-width-default);
   --dsa-teaser-card--border-color: var(--ks-border-color-card-interactive);
   --dsa-teaser-card--border-color_hover: var(--ks-border-color-card-interactive-hover);
-  --dsa-teaser-card--border-radius: var(--ks-border-radius-card);
-  --dsa-teaser-card--shadow: var(--ks-box-shadow-card);
-  --dsa-teaser-card--shadow_hover: var(--ks-box-shadow-card-hover);
-  --dsa-teaser-card__label--font: var(--ks-font-interface-m);
+  --dsa-teaser-card--border-radius: var(--ks-border-radius-card) var(--ks-border-radius-card)
+    var(--ks-border-radius-card) calc(var(--ks-border-radius-card) * 2);
+  --dsa-teaser-card--shadow: none;
+  --dsa-teaser-card--shadow_hover: none;
+  --dsa-teaser-card__image--transform_hover: scale(1.05);
+  --dsa-teaser-card__image--transition: transform var(--ks-transition-hover);
+  --dsa-teaser-card__body--gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-m);
+  --dsa-teaser-card__topic--color: var(--dsa-topic--color);
+  --dsa-teaser-card__label--font: var(--ks-font-interface-s);
   --dsa-teaser-card__label--font-weight: var(--ks-font-weight-semi-bold);
-  --dsa-teaser-card__label--color: var(--dsa-text-color-on-primary);
-  --dsa-teaser-card__label--background-color: var(--ks-background-color-primary);
+  --dsa-teaser-card__label--color: var(--ks-text-color-primary);
+  --dsa-teaser-card__label--background-color: var(--ks-background-color-bold);
   --dsa-teaser-card__label--padding: 0.5em 1em;
   --dsa-teaser-card__label--border-radius: var(--ks-border-radius-pill);
-  --dsa-teaser-card__label--border: 0;
-  --dsa-teaser-card__topic--font: var(--ks-font-display-l);
+  --dsa-teaser-card__label--border: 1px solid var(--ks-border-color-interface);
+  --dsa-teaser-card__button--font: var(--ks-font-interface-m);
+  --dsa-teaser-card--padding: var(--ks-spacing-inset-m);
+  --dsa-teaser-card__topic--font: var(--ks-font-display-m);
   --dsa-teaser-card__topic--font-weight: var(--dsa-topic--font-weight);
-  --dsa-teaser-card__copy--font: var(--dsa-rich-text--font);
+  --dsa-teaser-card__copy--font: var(--ks-font-copy-s);
   --dsa-teaser-card__copy--color: var(--ks-text-color-default);
-  --dsa-teaser-card--padding: var(--ks-spacing-inset-l);
+  --dsa-teaser-card__copy--margin-top: 0.5em;
+  --dsa-teaser-card__button--font: var(--ks-font-interface-s);
+}
+@container teaser-card (min-width: 400px) {
+  .dsa-teaser-card {
+    --dsa-teaser-card--padding: var(--ks-spacing-inset-l);
+    --dsa-teaser-card__topic--font: var(--ks-font-display-l);
+    --dsa-teaser-card__copy--font: var(--ks-font-copy-m);
+    --dsa-teaser-card__button--font: var(--ks-font-interface-m);
+  }
 }
 @media (min-width: 48em) {
   .dsa-teaser-card {
-    --dsa-teaser-card__topic--font: var(--ks-font-display-s);
+    --dsa-teaser-card__topic--font: var(--ks-font-display-m);
     --dsa-teaser-card__copy--font: var(--ks-font-copy-s);
-    --dsa-teaser-card--padding: var(--ks-spacing-inset-s);
+    --dsa-teaser-card--padding: var(--ks-spacing-inset-m);
+    --dsa-teaser-card__button--font: var(--ks-font-interface-s);
   }
-  @container teaser-card (min-width: 300px) {
+  @container teaser-card (min-width: 400px) {
     .dsa-teaser-card {
       --dsa-teaser-card__copy--font: var(--ks-font-copy-m);
-      --dsa-teaser-card__topic--font: var(--ks-font-display-m);
-    }
-  }
-  @container teaser-card (min-width: 820px) {
-    .dsa-teaser-card {
-      --dsa-teaser-card__topic--font: var(--ks-font-display-l);
-      --dsa-teaser-card__copy--font: var(--ks-font-copy-l);
-      --dsa-teaser-card--padding: var(--ks-spacing-inset-l);
+      --dsa-teaser-card__button--font: var(--ks-font-interface-m);
     }
   }
 }
@@ -54,7 +64,16 @@
   display: flex;
 }
 
-.c-teaser.dsa-teaser-card {
+.dsa-teaser-card {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.dsa-teaser-card--centered .c-teaser {
+  text-align: center;
+}
+.dsa-teaser-card .c-teaser {
   --c-teaser--padding: var(--dsa-teaser-card--padding, var(--ks-spacing-inset-l));
   --c-teaser--background: var(--dsa-teaser-card--background, var(--ks-background-color-card-interactive));
   --c-teaser--color: var(--dsa-teaser-card__copy--color, var(--ks-text-color-default));
@@ -62,69 +81,103 @@
     var(--dsa-teaser-card--border-width) solid;
   --c-teaser--border-radius: var(--dsa-teaser-card--border-radius, var(--ks-border-radius-card));
   --c-teaser--shadow-hover: var(--dsa-teaser-card--shadow_hover, var(--ks-box-shadow-card-hover));
+  --c-teaser_text--spacing: var(--dsa-teaser-card__copy--margin-top, 0.5em);
   position: relative;
-  overflow: visible;
   transition-property: border-color, background-color, box-shadow;
   box-shadow: var(--dsa-teaser-card--shadow, var(--ks-box-shadow-card));
 }
-.c-teaser.dsa-teaser-card > :first-child:not(.c-teaser__body) {
+.dsa-teaser-card .c-teaser > :first-child:not(.c-teaser__body) {
   overflow: hidden;
-  border-radius: var(--dsa-teaser-card--border-radius) var(--dsa-teaser-card--border-radius) 0 0;
 }
-.c-teaser.dsa-teaser-card:hover {
+.dsa-teaser-card .c-teaser:hover {
   --c-teaser--border: var(--dsa-teaser-card--border-color_hover, var(--ks-background-color-card-interactive))
     var(--dsa-teaser-card--border-width) solid;
 }
-.c-teaser.dsa-teaser-card img {
+.dsa-teaser-card .c-teaser:hover .c-teaser__image {
+  transform: var(--dsa-teaser-card__image--transform_hover, scale(1.05));
+}
+.dsa-teaser-card .c-teaser .c-teaser__image {
   object-fit: cover;
+  transition: var(--dsa-teaser-card__image--transition, transform var(--ks-transition-hover));
 }
-.c-teaser.dsa-teaser-card--wide img {
+.dsa-teaser-card .c-teaser .c-teaser__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsa-teaser__body--gap, var(--ks-spacing-stack-s) var(--ks-spacing-inline-s));
+}
+.dsa-teaser-card--wide .c-teaser__image {
   aspect-ratio: 4/3;
 }
-.c-teaser.dsa-teaser-card--landscape img {
+.dsa-teaser-card--landscape .c-teaser__image {
   aspect-ratio: 16/9;
 }
-.c-teaser.dsa-teaser-card--square img {
+.dsa-teaser-card--square .c-teaser__image {
   aspect-ratio: 1/1;
 }
-.c-teaser.dsa-teaser-card .c-rich-text {
-  font: var(--dsa-teaser-card__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
+.dsa-teaser-card .c-rich-text {
+  font: var(--dsa-teaser-card__copy--font, var(--ks-font-copy-m));
 }
-.c-teaser.dsa-teaser-card .c-teaser__topic {
+.dsa-teaser-card .c-teaser__topic {
+  color: var(--dsa-teaser-card__topic--color, var(--dsa-topic--color));
   font: var(--dsa-teaser-card__topic--font, var(--dsa-topic--font));
   font-weight: var(--dsa-teaser-card__topic--font-weight, var(--dsa-topic--font-weight));
 }
+.dsa-teaser-card .dsa-teaser-card__label {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  border-radius: var(--dsa-teaser-card__label--border-radius);
+  border: var(--dsa-teaser-card__label--border, 0);
+  pointer-events: initial;
+  padding: var(--dsa-teaser-card__label--padding);
+  transform: translate(0.5em, -50%);
+  font: var(--dsa-teaser-card__label--font);
+  text-align: center;
+  font-weight: var(--dsa-teaser-card__label--font-weight);
+  color: var(--dsa-teaser-card__label--color);
+  background-color: var(--dsa-teaser-card__label--background-color);
+}
+.dsa-teaser-card .c-teaser__link {
+  margin-top: 0;
+}
+.dsa-teaser-card .c-teaser__link .dsa-button {
+  font: var(--dsa-teaser-card__button--font, var(--dsa-button_medium--font));
+  font-weight: var(--dsa-button--font-weight);
+  padding: var(--dsa-teaser-card__button--padding, var(--dsa-button--padding));
+}
 @container teaser-card (min-width: 640px) {
-  .c-teaser.dsa-teaser-card--unset img {
+  .dsa-teaser-card--unset .c-teaser__image {
     height: 100%;
   }
-  .c-teaser.dsa-teaser-card--row {
+  .dsa-teaser-card--row.dsa-teaser-card--no-image .c-teaser {
+    align-items: center;
+  }
+  .dsa-teaser-card--row.dsa-teaser-card--no-image .c-teaser .c-teaser__body {
     flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    height: fit-content;
+    justify-content: space-between;
   }
-  .c-teaser.dsa-teaser-card--row .c-teaser__body {
+  .dsa-teaser-card--row.dsa-teaser-card--no-image .c-teaser .c-teaser__body .c-teaser__text {
+    flex-grow: 1;
+    flex-basis: var(--dsa-tile--width_large);
+  }
+  .dsa-teaser-card--row.dsa-teaser-card--no-image .c-teaser .c-teaser__body .c-teaser__link {
+    height: fit-content;
+  }
+  .dsa-teaser-card--row .c-teaser {
+    flex-direction: row;
+  }
+  .dsa-teaser-card--row .c-teaser .c-teaser__body {
     justify-content: center;
     flex-basis: 50%;
   }
-  .c-teaser.dsa-teaser-card--row .c-teaser__body .c-teaser__text {
+  .dsa-teaser-card--row .c-teaser .c-teaser__body .c-teaser__text {
     flex: 0;
   }
-  .c-teaser.dsa-teaser-card--row > :first-child:not(.c-teaser__body) {
+  .dsa-teaser-card--row .c-teaser > :first-child:not(.c-teaser__body) {
     flex: 50%;
-    border-radius: var(--dsa-teaser-card--border-radius) 0 0 var(--dsa-teaser-card--border-radius);
   }
-}
-.c-teaser.dsa-teaser-card--label .dsa-teaser-card__label {
-  border-radius: var(--dsa-teaser-card__label--border-radius);
-  border: var(--dsa-teaser-card__label--border, 0);
-  pointer-events: initial;
-  padding: var(--dsa-teaser-card__label--padding);
-  transform: translate(0.5em, -50%);
-  font: var(--dsa-teaser-card__label--font);
-  text-align: center;
-  font-weight: var(--dsa-teaser-card__label--font-weight);
-  color: var(--dsa-teaser-card__label--color);
-  position: absolute;
-  background-color: var(--dsa-teaser-card__label--background-color);
-  top: 0;
-  right: 0;
 }

package/dist/components/teaser-card/teaser-card.schema.dereffed.json

@@ -31,10 +31,16 @@
       "description": "Layout for the Teaser Card",
       "default": "stack"
     },
-    "target": {
+    "centered": {
+      "type": "boolean",
+      "title": "Centered",
+      "description": "Whether the Teaser Card is centered",
+      "default": false
+    },
+    "url": {
       "type": "string",
-      "title": "Target",
-      "description": "Target that should be linked",
+      "title": "Url",
+      "description": "Url that should be linked",
       "format": "uri"
     },
     "button": {
@@ -79,14 +85,11 @@
       ],
       "description": "Aspect ratio of the image",
       "default": "wide"
-    },
-    "type": {
-      "const": "teaser-card"
     }
   },
   "additionalProperties": false,
   "required": [
     "topic",
-    "target"
+    "url"
   ]
 }