@kickstartds/ds-agency-premium 1.4.16 → 1.4.17--canary.15.838.0

package/dist/{BlogAsideProps-e1cbd5d3.d.ts → BlogAsideProps-b06e0358.d.ts}

@@ -12,17 +12,25 @@ type Name = string;
  */
 type Byline = string;
 /**
- * The image URL of the author
+ * URL of the image to display
  */
-type Image = string;
+type ImageSource = string;
 /**
- * The Twitter name of the author
+ * Alt text of the image
  */
-type Twitter = string;
+type AltText = string;
 /**
- * The Email of the author
+ * Image uses all the horizontal space vailable
  */
-type Email = string;
+type FullWidth = boolean;
+/**
+ * Aspect Ratio of the Images
+ */
+type AspectRatio = "wide" | "square" | "vertical";
+/**
+ * Open link in new Tab
+ */
+type OpenLinkInNewTab = boolean;
 /**
  * The icon name for the social link
  */
@@ -67,8 +75,17 @@ interface BlogAsideProps {
 interface Author {
     name: Name;
     byline?: Byline;
-    image?: Image;
-    twitter?: Twitter;
-    email?: Email;
+    image?: {
+        src?: ImageSource;
+        alt?: AltText;
+        fullWidth?: FullWidth;
+        aspectRatio?: AspectRatio;
+    };
+    links?: {
+        icon?: string;
+        label?: string;
+        href?: string;
+        newTab?: OpenLinkInNewTab;
+    }[];
 }
-export { Name, Byline, Image, Twitter, Email, Icon, Href, Title, SocialSharing, ReadingTime, PublishedDate, BlogAsideProps, Author };
+export { Name, Byline, ImageSource, AltText, FullWidth, AspectRatio, OpenLinkInNewTab, Icon, Href, Title, SocialSharing, ReadingTime, PublishedDate, BlogAsideProps, Author };

package/dist/BlogPostProps-6b3cff22.d.ts

@@ -4,7 +4,7 @@
  * and run json-schema-to-typescript to regenerate this file.
  */
 import { BlogHeadProps } from "./BlogHeadProps-3f6e4072.js";
-import { BlogAsideProps } from "./BlogAsideProps-e1cbd5d3.js";
+import { BlogAsideProps } from "./BlogAsideProps-b06e0358.js";
 import { SectionProps } from "./SectionProps-83d399b4.js";
 import { CtaProps } from "./CtaProps-93230a76.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";

package/dist/components/blog-aside/blog-aside.css

@@ -1,37 +1,71 @@
+.l-container--blog-aside {
+  /* stylelint-disable-next-line property-no-unknown */
+  container-name: blog-aside;
+}
+
 .dsa-blog-aside {
-  --dsa-blog-aside__title--color: var(--dsa-headline--color);
-  --dsa-blog-aside__title--font: var(--dsa-headline_h3--font);
-  --dsa-blog-aside__copy--color: var(--dsa-rich-text--color);
-  --dsa-blog-aside__copy--font: var(--dsa-rich-text--font);
-  --dsa-blog-aside__links--color: var(--dsa-link--color);
-  --dsa-blog-aside__divider--color: var(--ks-border-color-accent);
+  --dsa-blog-aside--gap: var(--ks-spacing-stack-xs);
+  --dsa-blog-aside__author__title--font: var(--ks-font-copy-m);
+  --dsa-blog-aside__author__subtitle--font: var(--ks-font-copy-s);
+  --dsa-blog-aside__author__image--flex-basis: 120px;
+  --dsa-blog-aside__author__link--font: var(--ks-font-interface-s);
+  --dsa-blog-aside__meta__item--font: var(--ks-font-interface-s);
+  --dsa-blog-aside__meta__item--color: var(--ks-text-color-interface);
+  --dsa-blog-aside__meta__item__icon--size: 1.2em;
+  --dsa-blog-aside__share-bar__icon--size: 1.75em;
+  --dsa-blog-aside__sharebar__link--color: var(--dsa-link--color);
+  --dsa-blog-aside__sharebar__link--color_hover: var(--dsa-link--color_hover);
+}
+@container blog-aside (min-width: 640px) {
+  .dsa-blog-aside {
+    --dsa-blog-aside__author__title--font: var(--ks-font-copy-l);
+    --dsa-blog-aside__author__subtitle--font: var(--ks-font-copy-m);
+    --dsa-blog-aside__author__link--font: var(--ks-font-interface-m);
+    --dsa-blog-aside__meta__item--font: var(--ks-font-interface-m);
+    --dsa-blog-aside__share-bar__icon--size: 2em;
+  }
+}
+
+.l-container--blog-aside {
+  /* stylelint-disable-next-line property-no-unknown */
+  container-name: blog-aside;
 }
 
 .dsa-blog-aside {
-  --c-post-aside--gap: var(--ks-spacing-stack-s);
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsa-blog-aside--gap);
+}
+.dsa-blog-aside .dsa-contact {
+  --dsa-contact--gap-vertical: var(--dsa-blog-asde__author--gap-vertical, var(--ks-spacing-stack-xs));
+  --dsa-contact--gap-horizontal: var(--dsa-blog-asde__author--gap-horizontal, var(--ks-spacing-inline-xs));
+  --dsa-contact__image--flex-basis: var(--dsa-blog-aside__author__image--flex-basis, 200px);
+  --dsa-contact__title--font: var(--dsa-blog-aside__author__title--font, var(--ks-font-copy-m));
+  --dsa-contact__subtitle--font: var(--dsa-blog-aside__author__subtitle--font, var(--ks-font-copy-s));
+  --dsa-contact__link--font: var(--dsa-blog-aside__author__link--font, var(--ks-font-interface-s));
 }
 .dsa-blog-aside .c-post-meta {
-  --c-post-meta--gap: var(--ks-spacing-m);
-  --c-post-meta_item--gap: var(--ks-spacing-xs);
-  --c-post-meta_item--font: var(--dsa-post-aside__meta__item--font, var(--ks-font-interface-s));
-  --c-post-meta_item--color: var(--dsa-post-aside__meta__item--color, var(--ks-text-color-interface));
-  --c-post-meta_item--icon-size: var(--dsa-post-aside__meta__item__icon--size, 1.2em);
+  --c-post-meta--gap: 0.25em var(--ks-spacing-inline-s);
+  --c-post-meta_item--gap: 0.5em;
+  --c-post-meta_item--font: var(--dsa-blog-aside__meta__item--font, var(--ks-font-interface-s));
+  --c-post-meta_item--color: var(--dsa-blog-aside__meta__item--color, var(--ks-text-color-interface));
+  --c-post-meta_item--icon-size: var(--dsa-blog-aside__meta__item__icon--size, 1.2em);
+}
+.dsa-blog-aside .c-post-share-bar {
+  --c-post-share-bar_link--icon-size: var(--dsa-blog-aside__share-bar__icon--size, 1.5rem);
 }
-.dsa-blog-aside .c-contact__copy {
-  --c-rich-text-font: var(--dsa-post-aside__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
-  --c-rich-text-color: var(--dsa-post-aside__copy--color, var(--dsa-rich-text--color, var(--ks-text-color-default)));
+.dsa-blog-aside .c-post-share-bar .c-post-share-bar__link {
+  color: var(--dsa-blog-aside__sharebar__link--color, var(--dsa-link--color));
 }
-.dsa-blog-aside .dsa-headline .dsa-headline__headline {
-  font: var(--dsa-post-aside__title--font, var(--dsa-headline_h3--font, var(--ks-font-display-l)));
-  font-weight: var(--dsa-headline--font-weight);
-  color: var(--dsa-post-aside__title--color, var(--dsa-headline--color, var(--ks-text-color-display)));
+.dsa-blog-aside .c-post-share-bar .c-post-share-bar__link:hover {
+  color: var(--dsa-blog-aside__sharebar__link--color_hover, var(--dsa-link--color_hover));
 }
 .dsa-blog-aside .c-contact__links {
-  color: var(--dsa-post-aside__links--color, var(--dsa-link--color));
+  color: var(--dsa-blog-aside__links--color, var(--dsa-link--color));
 }
 .dsa-blog-aside .c-contact__links .icon {
   color: inherit;
 }
 .dsa-blog-aside .c-divider {
-  --c-divider--background: var(--dsa-post-aside__divider--color, var(--ks-border-color-accent));
+  --c-divider--background: var(--dsa-blog-aside__divider--color, var(--ks-border-color-accent));
 }

package/dist/components/blog-aside/blog-aside.schema.dereffed.json

@@ -27,29 +27,82 @@
           ]
         },
         "image": {
-          "title": "Image",
-          "description": "The image URL of the author",
-          "type": "string",
-          "format": "image",
-          "examples": [
-            "img/people/author-emily.png"
-          ]
-        },
-        "twitter": {
-          "title": "Twitter",
-          "description": "The Twitter name of the author",
-          "type": "string",
-          "examples": [
-            "johndoe"
-          ]
+          "type": "object",
+          "properties": {
+            "src": {
+              "type": "string",
+              "format": "image",
+              "title": "Image Source",
+              "description": "URL of the image to display",
+              "examples": [
+                "img/people/author-emily.png"
+              ]
+            },
+            "alt": {
+              "type": "string",
+              "title": "Alt Text",
+              "description": "Alt text of the image",
+              "examples": [
+                "Picture of Jane Smith"
+              ]
+            },
+            "fullWidth": {
+              "type": "boolean",
+              "title": "Full Width",
+              "description": "Image uses all the horizontal space vailable",
+              "default": false
+            },
+            "aspectRatio": {
+              "type": "string",
+              "title": "aspectRatio",
+              "description": "Aspect Ratio of the Images",
+              "enum": [
+                "wide",
+                "square",
+                "vertical"
+              ],
+              "default": "square"
+            }
+          },
+          "additionalProperties": false
         },
-        "email": {
-          "title": "Email",
-          "description": "The Email of the author",
-          "type": "string",
-          "pattern": "^[A-Za-z0-9_!#$%&'*+/=?`{|}~^.-]+@[A-Za-z0-9.-]+$",
+        "links": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "icon": {
+                "type": "string"
+              },
+              "label": {
+                "type": "string"
+              },
+              "href": {
+                "type": "string",
+                "format": "uri"
+              },
+              "newTab": {
+                "title": "Open link in new Tab",
+                "description": "Open link in new Tab",
+                "type": "boolean",
+                "default": false
+              }
+            },
+            "additionalProperties": false
+          },
           "examples": [
-            "johndoe@example.com"
+            [
+              {
+                "icon": "phone",
+                "label": "0228 / 688 966 20",
+                "href": "tel:+4922868896620"
+              },
+              {
+                "icon": "email",
+                "label": "mail@example.com",
+                "href": "mailto:mail@example.com"
+              }
+            ]
           ]
         }
       },

package/dist/components/blog-aside/blog-aside.schema.json

@@ -23,24 +23,10 @@
           "examples": ["CEO at Company"]
         },
         "image": {
-          "title": "Image",
-          "description": "The image URL of the author",
-          "type": "string",
-          "format": "image",
-          "examples": ["img/people/author-emily.png"]
-        },
-        "twitter": {
-          "title": "Twitter",
-          "description": "The Twitter name of the author",
-          "type": "string",
-          "examples": ["johndoe"]
+          "$ref": "http://schema.mydesignsystem.com/contact.schema.json#/properties/image"
         },
-        "email": {
-          "title": "Email",
-          "description": "The Email of the author",
-          "type": "string",
-          "pattern": "^[A-Za-z0-9_!#$%&'*+/=?`{|}~^.-]+@[A-Za-z0-9.-]+$",
-          "examples": ["johndoe@example.com"]
+        "links": {
+          "$ref": "http://schema.mydesignsystem.com/contact.schema.json#/properties/links"
         }
       },
       "additionalProperties": false,

package/dist/components/blog-aside/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BlogAsideProps } from "../../BlogAsideProps-e1cbd5d3.js";
+import { BlogAsideProps } from "../../BlogAsideProps-b06e0358.js";
 declare const BlogAsideContextDefault: import("react").ForwardRefExoticComponent<BlogAsideProps & import("react").RefAttributes<HTMLDivElement>>;
 declare const BlogAsideContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogAsideProps & import("react").RefAttributes<HTMLDivElement>>>;
 declare const BlogAside: import("react").ForwardRefExoticComponent<BlogAsideProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/blog-aside/index.js

@@ -1,10 +1,21 @@
 import "./blog-aside.css";
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import { forwardRef, createContext, useContext } from 'react';
-import { PostAside } from '@kickstartds/blog/lib/post-aside';
+import { PostMeta } from '@kickstartds/blog/lib/post-meta';
+import { PostShareBar } from '@kickstartds/blog/lib/post-share-bar';
+import { Container } from '@kickstartds/core/lib/container';
+import { Contact } from '../contact/index.js';
+import { Headline } from '../headline/index.js';
+import '@kickstartds/base/lib/picture';
+import '@kickstartds/base/lib/contact';
+import '@kickstartds/base/lib/link';
+import '@kickstartds/base/lib/icon';
+import '@kickstartds/base/lib/rich-text';
+import 'markdown-to-jsx';
+import '@kickstartds/base/lib/headline';
 
-const BlogAsideContextDefault = forwardRef(({ author, socialSharing, readingTime, date, className, ...rest }, ref) => {
+const BlogAsideContextDefault = forwardRef(({ author, socialSharing, readingTime, date, className }) => {
     const socialLinks = socialSharing?.map((link) => {
         return {
             icon: link.icon,
@@ -23,35 +34,7 @@ const BlogAsideContextDefault = forwardRef(({ author, socialSharing, readingTime
             icon: "time",
             text: readingTime,
         });
-    const authorLinks = [];
-    if (author?.twitter)
-        authorLinks.push({
-            href: `https://twitter.com/${author.twitter}`,
-            icon: "twitter",
-            newTab: true,
-            label: `@${author.twitter}`,
-        });
-    if (author?.email)
-        authorLinks.push({
-            href: `mailto:${author.email}`,
-            icon: "email",
-            newTab: false,
-            label: author.email,
-        });
-    return (jsx(PostAside, { ...rest, className: classnames(className, "dsa-blog-aside"), author: {
-            title: author?.name,
-            image: author?.image && { src: author.image },
-            copy: author?.byline,
-            links: authorLinks,
-        }, shareBar: {
-            headline: {
-                text: "Share this post",
-                level: "h3",
-            },
-            links: socialLinks,
-        }, meta: {
-            items: metaItems,
-        }, ref: ref }));
+    return (jsx(Container, { name: "blog-aside", children: jsxs("div", { className: classnames(className, "dsa-blog-aside"), children: [jsx(Contact, { className: "dsa-blog-aside__author", title: author?.name, subtitle: author?.byline, image: author?.image, links: author?.links }), metaItems && (jsx(Fragment, { children: jsx(PostMeta, { className: "dsa-blog-aside__meta", items: metaItems }) })), socialLinks && (jsxs("div", { children: [jsx(Headline, { text: "Share this Article", level: "p", style: "p", spaceAfter: "minimum" }), jsx(PostShareBar, { className: "dsa-blog-aside__share-bar", links: socialLinks })] }))] }) }));
 });
 const BlogAsideContext = createContext(BlogAsideContextDefault);
 const BlogAside = forwardRef((props, ref) => {

package/dist/components/blog-post/blog-post.schema.dereffed.json

@@ -107,29 +107,82 @@
               ]
             },
             "image": {
-              "title": "Image",
-              "description": "The image URL of the author",
-              "type": "string",
-              "format": "image",
-              "examples": [
-                "img/people/author-emily.png"
-              ]
-            },
-            "twitter": {
-              "title": "Twitter",
-              "description": "The Twitter name of the author",
-              "type": "string",
-              "examples": [
-                "johndoe"
-              ]
+              "type": "object",
+              "properties": {
+                "src": {
+                  "type": "string",
+                  "format": "image",
+                  "title": "Image Source",
+                  "description": "URL of the image to display",
+                  "examples": [
+                    "img/people/author-emily.png"
+                  ]
+                },
+                "alt": {
+                  "type": "string",
+                  "title": "Alt Text",
+                  "description": "Alt text of the image",
+                  "examples": [
+                    "Picture of Jane Smith"
+                  ]
+                },
+                "fullWidth": {
+                  "type": "boolean",
+                  "title": "Full Width",
+                  "description": "Image uses all the horizontal space vailable",
+                  "default": false
+                },
+                "aspectRatio": {
+                  "type": "string",
+                  "title": "aspectRatio",
+                  "description": "Aspect Ratio of the Images",
+                  "enum": [
+                    "wide",
+                    "square",
+                    "vertical"
+                  ],
+                  "default": "square"
+                }
+              },
+              "additionalProperties": false
             },
-            "email": {
-              "title": "Email",
-              "description": "The Email of the author",
-              "type": "string",
-              "pattern": "^[A-Za-z0-9_!#$%&'*+/=?`{|}~^.-]+@[A-Za-z0-9.-]+$",
+            "links": {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "properties": {
+                  "icon": {
+                    "type": "string"
+                  },
+                  "label": {
+                    "type": "string"
+                  },
+                  "href": {
+                    "type": "string",
+                    "format": "uri"
+                  },
+                  "newTab": {
+                    "title": "Open link in new Tab",
+                    "description": "Open link in new Tab",
+                    "type": "boolean",
+                    "default": false
+                  }
+                },
+                "additionalProperties": false
+              },
               "examples": [
-                "johndoe@example.com"
+                [
+                  {
+                    "icon": "phone",
+                    "label": "0228 / 688 966 20",
+                    "href": "tel:+4922868896620"
+                  },
+                  {
+                    "icon": "email",
+                    "label": "mail@example.com",
+                    "href": "mailto:mail@example.com"
+                  }
+                ]
               ]
             }
           },

package/dist/components/blog-post/index.js

@@ -12,14 +12,24 @@ import '@kickstartds/core/lib/react';
 import '@kickstartds/base/lib/section';
 import '../section/js/Section.client.js';
 import '@kickstartds/core/lib/component';
-import '@kickstartds/blog/lib/post-aside';
+import '@kickstartds/blog/lib/post-meta';
+import '@kickstartds/blog/lib/post-share-bar';
+import '@kickstartds/core/lib/container';
+import '../contact/index.js';
+import '@kickstartds/base/lib/picture';
+import '@kickstartds/base/lib/contact';
+import '@kickstartds/base/lib/link';
+import '@kickstartds/base/lib/icon';
 import '@kickstartds/base/lib/rich-text';
+import '../headline/index.js';
+import 'markdown-to-jsx';
+import '@kickstartds/base/lib/headline';
 import '@kickstartds/content/lib/storytelling';
 import '@kickstartds/base/lib/button';
 import '../button-group/index.js';
 import '@kickstartds/base/lib/button-group';
 
-const BlogPost = ({ head, content, aside, cta, children, }) => (jsxs(Fragment, { children: [jsx(Section, { width: "wide", children: jsxs(Split, { layout: "sidebarRight", children: [jsxs("div", { children: [head && jsx(BlogHead, { ...head }), content ? jsx(Text, { text: content }) : children] }), jsx(BlogAside, { ...aside })] }) }), cta && (jsx(Section, { content: { mode: "list" }, children: jsx(Cta, { ...cta }) }))] }));
+const BlogPost = ({ head, content, aside, cta, children, }) => (jsxs(Fragment, { children: [jsx(Section, { width: "wide", children: jsxs(Split, { mainSectionWidth: "narrow", layout: "sidebarRight", children: [jsxs("div", { children: [head && jsx(BlogHead, { ...head }), content ? jsx(Text, { text: content }) : children] }), jsx(BlogAside, { ...aside })] }) }), cta && (jsx(Section, { content: { mode: "list" }, children: jsx(Cta, { ...cta }) }))] }));
 BlogPost.displayName = "BlogPost";
 
 export { BlogPost };

package/dist/components/contact/contact.css

@@ -0,0 +1,129 @@
+.l-container--contact {
+  /* stylelint-disable-next-line property-no-unknown */
+  container-name: contact;
+}
+
+.dsa-contact {
+  --dsa-contact--gap-horizontal: var(--ks-spacing-inline-m);
+  --dsa-contact--gap-vertical: var(--ks-spacing-stack-m);
+  --dsa-contact__header--gap: 0;
+  --dsa-contact__image--flex-basis: 200px;
+  --dsa-contact__image--border-radius: var(--ks-border-radius-card);
+  --dsa-contact__body--gap: var(--ks-spacing-stack-xs);
+  --dsa-contact__body--flex-basis: 300px;
+  --dsa-contact__copy--font: var(--dsa-rich-text--font);
+  --dsa-contact__copy--color: var(--dsa-rich-text--color);
+  --dsa-contact__title--color: var(--ks-text-color-display);
+  --dsa-contact__title--font: var(--ks-font-copy-l);
+  --dsa-contact__title--font-weight: var(--ks-font-weight-bold);
+  --dsa-contact__subtitle--color: var(--ks-text-color-display);
+  --dsa-contact__subtitle--font: var(--ks-font-copy-m);
+  --dsa-contact__subtitle--font-weight: var(--ks-font-weight-regular);
+  --dsa-contact__links--gap: 0;
+  --dsa-contact__link--color: var(--dsa-link--color);
+  --dsa-contact__link--color_hover: var(--dsa-link--color_hover);
+  --dsa-contact__link--font: var(--ks-font-interface-m);
+  --dsa-contact__link--font-weight: var(--dsa-link--font-weight);
+  --dsa-contact__link__icon--margin-right: 0.5em;
+  --dsa-contact__link__icon--size: 1.5em;
+  --dsa-contact__link__icon--color: inherit;
+  --dsa-contact__link--text-decoration: none;
+  --dsa-contact__link--text-decoration_hover: none;
+}
+
+.l-container--contact {
+  /* stylelint-disable-next-line property-no-unknown */
+  container-name: contact;
+}
+
+.dsa-contact {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dsa-contact--gap-horizontal) var(--dsa-contact--gap-vertical);
+}
+.dsa-contact__image-wrap, .dsa-contact__body {
+  flex-grow: 1;
+}
+.dsa-contact__body {
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-direction: column;
+  gap: var(--dsa-contact__body--gap);
+  flex-basis: var(--dsa-contact__body--flex-basis);
+}
+.dsa-contact__copy {
+  font: var(--dsa-contact__copy--font);
+  color: var(--dsa-contact__copy--color);
+}
+.dsa-contact__image-wrap {
+  flex: none;
+  flex-basis: var(--dsa-contact__image--flex-basis);
+  height: 100%;
+  width: 100%;
+}
+.dsa-contact--image-full-width .dsa-contact__image-wrap {
+  flex-grow: 1;
+}
+.dsa-contact--image-square .dsa-contact__image-wrap {
+  aspect-ratio: 1/1;
+}
+.dsa-contact--image-wide .dsa-contact__image-wrap {
+  aspect-ratio: 4/3;
+}
+.dsa-contact--image-vertical .dsa-contact__image-wrap {
+  aspect-ratio: 3/4;
+}
+.dsa-contact__image {
+  width: 100%;
+  object-fit: cover;
+  height: 100%;
+  border-radius: var(--dsa-contact__image--border-radius);
+}
+.dsa-contact__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsa-contact__header--gap);
+}
+.dsa-contact__title {
+  font: var(--dsa-contact__title--font);
+  color: var(--dsa-contact__title--color);
+  font-weight: var(--dsa-contact__title--font-weight);
+}
+.dsa-contact__subtitle {
+  font: var(--dsa-contact__subtitle--font);
+  color: var(--dsa-contact__subtitle--color);
+  font-weight: var(--dsa-contact__subtitle--font-weight);
+}
+.dsa-contact__links {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsa-contact__links--gap);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.dsa-contact a.dsa-contact__link {
+  color: var(--dsa-contact__link--color);
+  font: var(--dsa-contact__link--font);
+  font-weight: var(--dsa-contact__link--font-weight);
+  text-decoration: var(--dsa-contact__link--text-decoration);
+}
+.dsa-contact a.dsa-contact__link .icon {
+  width: var(--dsa-contact__link__icon--size);
+  height: var(--dsa-contact__link__icon--size);
+  color: var(--dsa-contact__link__icon--color);
+  margin-right: var(--dsa-contact__link__icon--margin-right);
+}
+.dsa-contact a.dsa-contact__link:hover {
+  color: var(--dsa-contact__link--color_hover);
+  text-decoration: var(--dsa-contact__link--text-decoration_hover);
+}
+.dsa-contact .c-headline {
+  --c-headline--color: var(--dsa-contact__headline--color);
+  --c-headline--font: var(--dsa-contact__headline--font);
+  --c-headline--font-weight: var(--dsa-contact__headline--font-weight);
+  --c-headline__subheadline--color: var(--dsa-contact__headline__subheadline--color);
+  --c-headline__subheadline--font: var(--dsa-contact__headline__subheadline--font);
+  --c-headline__subheadline--font-weight: var(--dsa-contact__headline__subheadline--font-weight);
+}