@kickstartds/ds-agency-premium 1.5.2 → 1.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,7 +5,7 @@
5
5
  */
6
6
  import { SectionProps } from "./SectionProps-83d399b4.js";
7
7
  import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
8
- import { CtaProps } from "./CtaProps-93230a76.js";
8
+ import { ContactProps } from "./ContactProps-68c71984.js";
9
9
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
10
10
  /**
11
11
  * Collection of sections (with their contents) to render as the blog overview intro
@@ -46,9 +46,9 @@ interface BlogOverviewProps {
46
46
  moreTitle?: MoreTitle;
47
47
  more?: Posts1;
48
48
  /**
49
- * Referenced component CtaProps
49
+ * Referenced component ContactProps
50
50
  */
51
- cta?: CtaProps;
51
+ contact?: ContactProps;
52
52
  /**
53
53
  * Referenced component SeoProps
54
54
  */
@@ -0,0 +1,65 @@
1
+ /**
2
+ * This file was automatically generated by json-schema-to-typescript.
3
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
4
+ * and run json-schema-to-typescript to regenerate this file.
5
+ */
6
+ /**
7
+ * URL of the image to display
8
+ */
9
+ type ImageSource = string;
10
+ /**
11
+ * Alt text of the image
12
+ */
13
+ type AltText = string;
14
+ /**
15
+ * Image uses all the horizontal space vailable
16
+ */
17
+ type FullWidth = boolean;
18
+ /**
19
+ * Aspect Ratio of the Images
20
+ */
21
+ type AspectRatio = "wide" | "square" | "vertical";
22
+ /**
23
+ * Name, company name, etc.
24
+ */
25
+ type Title = string;
26
+ /**
27
+ * Position, profession, department, location, etc.
28
+ */
29
+ type Subtitle = string;
30
+ /**
31
+ * Open link in new Tab
32
+ */
33
+ type OpenLinkInNewTab = boolean;
34
+ type CopyText = string;
35
+ /**
36
+ * Additional css classes attached to the wrapping element
37
+ */
38
+ type Class = string;
39
+ /**
40
+ * Optional custom component identifier
41
+ */
42
+ type KsComponentAttribute = string;
43
+ /**
44
+ * Component used for user interaction
45
+ */
46
+ interface ContactProps {
47
+ image?: {
48
+ src?: ImageSource;
49
+ alt?: AltText;
50
+ fullWidth?: FullWidth;
51
+ aspectRatio?: AspectRatio;
52
+ };
53
+ title?: Title;
54
+ subtitle?: Subtitle;
55
+ links?: {
56
+ icon?: string;
57
+ label?: string;
58
+ href?: string;
59
+ newTab?: OpenLinkInNewTab;
60
+ }[];
61
+ copy?: CopyText;
62
+ className?: Class;
63
+ component?: KsComponentAttribute;
64
+ }
65
+ export { ImageSource, AltText, FullWidth, AspectRatio, Title, Subtitle, OpenLinkInNewTab, CopyText, Class, KsComponentAttribute, ContactProps };
@@ -3595,166 +3595,130 @@
3595
3595
  ]
3596
3596
  }
3597
3597
  },
3598
- "cta": {
3598
+ "contact": {
3599
3599
  "$schema": "http://json-schema.org/draft-07/schema#",
3600
- "$id": "http://schema.mydesignsystem.com/cta.schema.json",
3601
- "title": "Cta",
3600
+ "$id": "http://schema.mydesignsystem.com/contact.schema.json",
3601
+ "title": "Contact",
3602
+ "description": "Component used for user interaction",
3602
3603
  "type": "object",
3603
3604
  "properties": {
3604
- "headline": {
3605
- "title": "Component Headline",
3606
- "description": "Headline for the Component element",
3605
+ "image": {
3606
+ "type": "object",
3607
+ "properties": {
3608
+ "src": {
3609
+ "type": "string",
3610
+ "format": "image",
3611
+ "title": "Image Source",
3612
+ "description": "URL of the image to display",
3613
+ "examples": [
3614
+ "img/people/author-emily.png"
3615
+ ]
3616
+ },
3617
+ "alt": {
3618
+ "type": "string",
3619
+ "title": "Alt Text",
3620
+ "description": "Alt text of the image",
3621
+ "examples": [
3622
+ "Picture of Jane Smith"
3623
+ ]
3624
+ },
3625
+ "fullWidth": {
3626
+ "type": "boolean",
3627
+ "title": "Full Width",
3628
+ "description": "Image uses all the horizontal space vailable",
3629
+ "default": false
3630
+ },
3631
+ "aspectRatio": {
3632
+ "type": "string",
3633
+ "title": "aspectRatio",
3634
+ "description": "Aspect Ratio of the Images",
3635
+ "enum": [
3636
+ "wide",
3637
+ "square",
3638
+ "vertical"
3639
+ ],
3640
+ "default": "square"
3641
+ }
3642
+ },
3643
+ "additionalProperties": false
3644
+ },
3645
+ "title": {
3646
+ "title": "Title",
3647
+ "description": "Name, company name, etc.",
3607
3648
  "type": "string",
3608
- "format": "markdown",
3609
3649
  "examples": [
3610
- "Headline"
3650
+ "Jane Smith"
3611
3651
  ]
3612
3652
  },
3613
- "sub": {
3614
- "title": "Component Subheadline",
3615
- "description": "Subheadline below the component headline",
3653
+ "subtitle": {
3654
+ "title": "Subtitle",
3655
+ "description": "Position, profession, department, location, etc.",
3616
3656
  "type": "string",
3617
- "format": "markdown",
3618
3657
  "examples": [
3619
- "Subheadline"
3658
+ "CEO at Company"
3620
3659
  ]
3621
3660
  },
3622
- "text": {
3623
- "title": "Component Text",
3624
- "description": "Info text for the component element",
3625
- "type": "string",
3626
- "format": "markdown"
3627
- },
3628
- "highlightText": {
3629
- "type": "boolean",
3630
- "title": "Highlight Text",
3631
- "description": "Visually highlight the text",
3632
- "default": false
3633
- },
3634
- "colorNeutral": {
3635
- "title": "Color Neutral",
3636
- "description": "Make the text and buttons color neutral",
3637
- "default": false,
3638
- "type": "boolean"
3639
- },
3640
- "fullWidth": {
3641
- "title": "Width",
3642
- "description": "Set the width of the content to the full width of the element",
3643
- "type": "boolean",
3644
- "default": false
3645
- },
3646
- "buttons": {
3661
+ "links": {
3647
3662
  "type": "array",
3648
3663
  "items": {
3649
- "title": "Button",
3650
3664
  "type": "object",
3651
3665
  "properties": {
3652
- "label": {
3653
- "type": "string",
3654
- "title": "Label",
3655
- "description": "Text content to display inside the button",
3656
- "examples": [
3657
- "Book a meeting"
3658
- ]
3659
- },
3660
3666
  "icon": {
3661
- "type": "string",
3662
- "title": "Icon",
3663
- "description": "Choose an icon"
3667
+ "type": "string"
3664
3668
  },
3665
- "target": {
3669
+ "label": {
3670
+ "type": "string"
3671
+ },
3672
+ "href": {
3666
3673
  "type": "string",
3667
- "title": "Target",
3668
- "description": "Target that should be linked, makes the button behave like a link semantically",
3669
3674
  "format": "uri"
3675
+ },
3676
+ "newTab": {
3677
+ "title": "Open link in new Tab",
3678
+ "description": "Open link in new Tab",
3679
+ "type": "boolean",
3680
+ "default": false
3670
3681
  }
3671
3682
  },
3672
3683
  "additionalProperties": false
3673
- }
3674
- },
3675
- "backgroundColor": {
3676
- "title": "Background color",
3677
- "description": "Background color for the whole element",
3678
- "type": "string",
3679
- "format": "color"
3680
- },
3681
- "backgroundImage": {
3682
- "title": "Background image",
3683
- "description": "Background image for the whole element",
3684
- "type": "string",
3685
- "format": "image"
3686
- },
3687
- "image": {
3688
- "title": "Image",
3689
- "description": "Image displayed alongside the text content",
3690
- "type": "object",
3691
- "properties": {
3692
- "src": {
3693
- "title": "Image source",
3694
- "description": "Image source to use",
3695
- "type": "string",
3696
- "format": "image"
3697
- },
3698
- "padding": {
3699
- "title": "Padding",
3700
- "description": "Toggle padding of the image",
3701
- "type": "boolean",
3702
- "default": true
3703
- },
3704
- "alt": {
3705
- "title": "Alt text",
3706
- "description": "Image description",
3707
- "type": "string"
3708
- }
3709
3684
  },
3710
- "additionalProperties": false
3685
+ "examples": [
3686
+ [
3687
+ {
3688
+ "icon": "phone",
3689
+ "label": "0228 / 688 966 20",
3690
+ "href": "tel:+4922868896620"
3691
+ },
3692
+ {
3693
+ "icon": "email",
3694
+ "label": "mail@example.com",
3695
+ "href": "mailto:mail@example.com"
3696
+ }
3697
+ ]
3698
+ ]
3711
3699
  },
3712
- "order": {
3713
- "title": "Order",
3714
- "description": "Choose what comes first on mobile and desktop: image or text",
3715
- "type": "object",
3716
- "properties": {
3717
- "mobileImageLast": {
3718
- "title": "Mobile image after text",
3719
- "description": "Switch to displaying the image after the text on mobile",
3720
- "type": "boolean",
3721
- "default": false
3722
- },
3723
- "desktopImageLast": {
3724
- "title": "Desktop image after text",
3725
- "description": "Switch to displaying the image after the text on desktop",
3726
- "type": "boolean",
3727
- "default": true
3728
- }
3729
- },
3730
- "additionalProperties": false
3700
+ "copy": {
3701
+ "title": "Copy text",
3702
+ "type": "string"
3731
3703
  },
3732
- "textAlign": {
3733
- "title": "Text Alignment",
3734
- "description": "Choose the alginment of the text",
3735
- "enum": [
3736
- "left",
3737
- "center"
3738
- ],
3739
- "type": "string",
3740
- "default": "left"
3704
+ "className": {
3705
+ "title": "Class",
3706
+ "description": "Additional css classes attached to the wrapping element",
3707
+ "type": "string"
3741
3708
  },
3742
- "contentAlign": {
3743
- "title": "Vertical alignment of the content",
3744
- "description": "Select a vertical alignment for the image",
3745
- "type": "string",
3746
- "enum": [
3747
- "center",
3748
- "top",
3749
- "bottom"
3750
- ],
3751
- "default": "center"
3709
+ "component": {
3710
+ "title": "`ks-component` attribute",
3711
+ "description": "Optional custom component identifier",
3712
+ "type": "string"
3752
3713
  },
3753
3714
  "type": {
3754
- "const": "cta"
3715
+ "const": "contact"
3755
3716
  }
3756
3717
  },
3757
- "additionalProperties": false
3718
+ "additionalProperties": false,
3719
+ "required": [
3720
+ "name"
3721
+ ]
3758
3722
  },
3759
3723
  "seo": {
3760
3724
  "$schema": "http://json-schema.org/draft-07/schema#",
@@ -51,8 +51,8 @@
51
51
  "$ref": "http://schema.mydesignsystem.com/blog-teaser.schema.json"
52
52
  }
53
53
  },
54
- "cta": {
55
- "$ref": "http://schema.mydesignsystem.com/cta.schema.json"
54
+ "contact": {
55
+ "$ref": "http://schema.mydesignsystem.com/contact.schema.json"
56
56
  },
57
57
  "seo": {
58
58
  "$ref": "http://schema.mydesignsystem.com/cms/seo.schema.json"
@@ -1,4 +1,4 @@
1
- import { BlogOverviewProps } from "../../BlogOverviewProps-9f207f1c.js";
1
+ import { BlogOverviewProps } from "../../BlogOverviewProps-68c71984.js";
2
2
  import { FC, PropsWithChildren } from "react";
3
3
  declare const BlogOverview: FC<PropsWithChildren<BlogOverviewProps>>;
4
4
  export { BlogOverview };
@@ -2,7 +2,8 @@ import { createElement } from 'react';
2
2
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
3
3
  import { Section } from '../section/index.js';
4
4
  import { BlogTeaser } from '../blog-teaser/index.js';
5
- import { Cta } from '../cta/index.js';
5
+ import { Contact } from '../contact/index.js';
6
+ import { Divider } from '@kickstartds/base/lib/divider';
6
7
  import 'classnames';
7
8
  import '@kickstartds/core/lib/react';
8
9
  import '@kickstartds/base/lib/section';
@@ -10,13 +11,14 @@ import '../section/js/Section.client.js';
10
11
  import '@kickstartds/core/lib/component';
11
12
  import '@kickstartds/blog/lib/post-teaser';
12
13
  import '@kickstartds/core/lib/container';
13
- import '@kickstartds/content/lib/storytelling';
14
- import '@kickstartds/base/lib/button';
15
- import '../button-group/index.js';
16
- import '@kickstartds/base/lib/button-group';
14
+ import '@kickstartds/base/lib/picture';
15
+ import '@kickstartds/base/lib/contact';
16
+ import '@kickstartds/base/lib/link';
17
+ import '@kickstartds/base/lib/icon';
18
+ import '@kickstartds/base/lib/rich-text';
17
19
 
18
- const BlogOverview = ({ latestTitle, latest, cta, listTitle, list, children, moreTitle, more, }) => {
19
- return (jsxs(Fragment, { children: [children, latest && (jsx(Section, { width: "wide", headline: { text: latestTitle }, children: jsx(BlogTeaser, { ...latest }) })), list && list.length > 0 && (jsx(Section, { headline: { text: listTitle }, children: list.map((article) => (createElement(BlogTeaser, { ...article, key: article.headline }))) })), jsx("hr", {}), more && more.length > 0 && (jsx(Section, { headline: { text: moreTitle }, children: more.map((article) => (createElement(BlogTeaser, { ...article, key: article.headline }))) })), cta && (jsx(Section, { content: { mode: "list" }, children: jsx(Cta, { ...cta }) }))] }));
20
+ const BlogOverview = ({ latestTitle, latest, contact, listTitle, list, children, moreTitle, more, }) => {
21
+ return (jsxs(Fragment, { children: [children, latest && (jsx(Section, { width: "wide", headline: { text: latestTitle }, children: jsx(BlogTeaser, { ...latest }) })), list && list.length > 0 && (jsx(Section, { headline: { text: listTitle }, children: list.map((article) => (createElement(BlogTeaser, { ...article, key: article.headline }))) })), jsx(Section, { spaceAfter: "none", spaceBefore: "none", children: jsx(Divider, {}) }), more && more.length > 0 && (jsx(Section, { headline: { text: moreTitle }, children: more.map((article) => (createElement(BlogTeaser, { ...article, key: article.headline }))) })), contact && (jsxs(Fragment, { children: [jsx(Section, { spaceAfter: "none", spaceBefore: "none", children: jsx(Divider, {}) }), jsx(Section, { content: { mode: "list" }, children: jsx(Contact, { ...contact }) })] }))] }));
20
22
  };
21
23
  BlogOverview.displayName = "BlogOverview";
22
24
 
@@ -1,4 +1,4 @@
1
- import { BlogPostProps } from "../../BlogPostProps-6b3cff22.js";
1
+ import { BlogPostProps } from "../../BlogPostProps-d9decb7c.js";
2
2
  import { FC, PropsWithChildren } from "react";
3
3
  declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
4
4
  export { BlogPost };
@@ -5,12 +5,15 @@
5
5
 
6
6
  .dsa-blog-teaser {
7
7
  --dsa-blog-teaser--background: transparent;
8
- --dsa-blog-teaser__topic--font: var(--ks-font-display-l);
8
+ --dsa-blog-teaser--gap: var(--ks-spacing-stack-xs) var(--ks-spacing-inline-xs);
9
+ --dsa-blog-teaser__topic--font: var(--dsa-topic--font);
10
+ --dsa-blog-teaser__topic--font-size: var(--ks-font-size-copy-l);
11
+ --dsa-blog-teaser__topic--font-weight: var(--dsa-topic--font-weight);
9
12
  --dsa-blog-teaser__tag-label--font: var(--ks-font-interface-xs);
10
13
  --dsa-blog-teaser__copy--font: var(--ks-font-copy-s);
11
14
  --dsa-blog-teaser__copy--color: var(--dsa-rich-text--color);
12
15
  --dsa-blog-teaser__copy--color_hover: var(--ks-text-color-default);
13
- --dsa-blog-teaser__copy--margin-top: var(--ks-spacing-stack-s);
16
+ --dsa-blog-teaser__copy--margin-top: 0.5em;
14
17
  --dsa-blog-teaser__meta--font: var(--ks-spacing-stack-s);
15
18
  --dsa-blog-teaser__meta--color: var(--ks-text-color-interface);
16
19
  --dsa-blog-teaser__meta__author--font-weight: var(--ks-font-weight-semi-bold);
@@ -18,14 +21,15 @@
18
21
  }
19
22
  @container post-teaser (min-width: 640px) {
20
23
  .dsa-blog-teaser {
21
- --dsa-blog-teaser__topic--font: var(--ks-font-display-l);
24
+ --dsa-blog-teaser--gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-s);
25
+ --dsa-blog-teaser__topic--font-size: var(--ks-font-size-copy-xl);
22
26
  --dsa-blog-teaser__copy--font: var(--ks-font-copy-m);
23
27
  --dsa-blog-teaser__tag-label--font: var(--ks-font-interface-s);
24
28
  }
25
29
  }
26
30
  @container post-teaser (min-width: 1000px) {
27
31
  .dsa-blog-teaser {
28
- --dsa-blog-teaser__topic--font: var(--ks-font-display-xl);
32
+ --dsa-blog-teaser__topic--font-size: var(--ks-font-size-copy-xxl);
29
33
  }
30
34
  }
31
35
 
@@ -58,15 +62,20 @@
58
62
  }
59
63
  .dsa-blog-teaser.c-post-teaser .c-post-meta {
60
64
  --c-post-meta_author--font-weight: var(--ks-font-weight-semi-bold);
61
- --c-post-meta--gap: 0.5em 1em;
65
+ --c-post-meta--gap: 0.5em 0.75em;
62
66
  --c-post-meta_item--font: var(--dsa-blog-teaser__meta--font, var(--ks-font-interface-s));
67
+ --c-post-meta_item--gap: 0.35em;
63
68
  --c-post-meta_author--color: var(--dsa-blog-teaser__meta--color, var(--c-post-meta_item--color));
69
+ --c-post-meta_author--gap: 0.35em;
64
70
  --c-post-meta_author--font-weight: var(
65
71
  --dsa-blog-teaser__meta__author--font-weight,
66
72
  var(--ks-font-weight-semi-bold)
67
73
  );
68
74
  margin: 0;
69
75
  }
76
+ .dsa-blog-teaser.c-post-teaser .l-container--rich-text {
77
+ margin: 0;
78
+ }
70
79
  .dsa-blog-teaser.c-post-teaser .c-rich-text {
71
80
  font: var(--dsa-blog-teaser__copy--font, var(--ks-font-copy-m));
72
81
  transition: var(--ks-transition-hover);
@@ -77,8 +86,10 @@
77
86
  }
78
87
  .dsa-blog-teaser.c-post-teaser .c-teaser__topic {
79
88
  font: var(--dsa-blog-teaser__topic--font, var(--dsa-topic--font, var(--ks-font-display-m)));
80
- font-weight: var(--dsa-topic--font-weight);
89
+ font-size: var(--dsa-blog-teaser__topic--font-size);
90
+ font-weight: var(--dsa-blog-teaser__topic--font-weight, var(--dsa-topic--font-weight)) !important;
81
91
  text-align: left;
82
92
  transition: var(--ks-transition-hover);
83
93
  transition-property: text-shadow;
94
+ margin-bottom: var(--dsa-blog-teaser__topic--margin-bottom, 0.35em);
84
95
  }
@@ -1,70 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { HTMLAttributes, FC, PropsWithChildren } from "react";
3
- /* eslint-disable */
4
- /**
5
- * This file was automatically generated by json-schema-to-typescript.
6
- * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
7
- * and run json-schema-to-typescript to regenerate this file.
8
- */
9
- /**
10
- * URL of the image to display
11
- */
12
- type ImageSource = string;
13
- /**
14
- * Alt text of the image
15
- */
16
- type AltText = string;
17
- /**
18
- * Image uses all the horizontal space vailable
19
- */
20
- type FullWidth = boolean;
21
- /**
22
- * Aspect Ratio of the Images
23
- */
24
- type AspectRatio = "wide" | "square" | "vertical";
25
- /**
26
- * Name, company name, etc.
27
- */
28
- type Title = string;
29
- /**
30
- * Position, profession, department, location, etc.
31
- */
32
- type Subtitle = string;
33
- /**
34
- * Open link in new Tab
35
- */
36
- type OpenLinkInNewTab = boolean;
37
- type CopyText = string;
38
- /**
39
- * Additional css classes attached to the wrapping element
40
- */
41
- type Class = string;
42
- /**
43
- * Optional custom component identifier
44
- */
45
- type KsComponentAttribute = string;
46
- /**
47
- * Component used for user interaction
48
- */
49
- interface ContactProps {
50
- image?: {
51
- src?: ImageSource;
52
- alt?: AltText;
53
- fullWidth?: FullWidth;
54
- aspectRatio?: AspectRatio;
55
- };
56
- title?: Title;
57
- subtitle?: Subtitle;
58
- links?: {
59
- icon?: string;
60
- label?: string;
61
- href?: string;
62
- newTab?: OpenLinkInNewTab;
63
- }[];
64
- copy?: CopyText;
65
- className?: Class;
66
- component?: KsComponentAttribute;
67
- }
3
+ import { ContactProps } from "../../ContactProps-68c71984.js";
68
4
  declare const Contact: import("react").ForwardRefExoticComponent<ContactProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLAnchorElement>>;
69
5
  declare const ContactProvider: FC<PropsWithChildren>;
70
6
  export { Contact, ContactProvider };
@@ -24,7 +24,7 @@ interface SettingsProps {
24
24
  */
25
25
  seo: SeoProps;
26
26
  }
27
- export * from "../../BlogPostProps-6b3cff22.js";
28
- export * from "../../BlogOverviewProps-9f207f1c.js";
27
+ export * from "../../BlogPostProps-d9decb7c.js";
28
+ export * from "../../BlogOverviewProps-68c71984.js";
29
29
  export * from "../../PageProps-aa29c554.js";
30
30
  export { SettingsProps };
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 03 Sep 2024 15:17:47 GMT
3
+ * Generated on Wed, 04 Sep 2024 06:34:59 GMT
4
4
  */
5
5
  :root, [ks-theme] {
6
6
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -154,7 +154,7 @@
154
154
  "id": "pages-archetypes--blog-overview",
155
155
  "group": "Pages/Archetypes",
156
156
  "name": "BlogOverview",
157
- "code": "<BlogOverview\n cta={{\n buttons: [\n {\n label: 'Book a meeting'\n },\n {\n label: 'Book a meeting'\n },\n {\n label: 'Book a meeting'\n }\n ],\n colorNeutral: false,\n contentAlign: 'center',\n fullWidth: false,\n headline: 'Headline',\n highlightText: false,\n image: {\n padding: true\n },\n order: {\n desktopImageLast: true,\n mobileImageLast: false\n },\n sub: 'Subheadline',\n textAlign: 'left'\n }}\n latest={{\n author: {\n image: 'img/people/author-alex.png',\n name: 'John Doe',\n title: 'CEO'\n },\n date: '12/30/2022',\n headline: 'Mastering the Art of Design Systems with Systemics: A Journey from Vision to Reality',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n url: 'https://example.com/article1'\n },\n readingTime: '5 min read',\n tags: [\n 'Design Systems',\n 'Headless Websites',\n 'Training'\n ],\n teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence. We discuss our unique approach to Design System Consulting, where we align your vision with actionable strategies for seamless and captivating user experiences. Learn how we transform ideas into tangible results with our Design System Creation service, empowering your brand to communicate effectively across digital platforms.'\n }}\n latestTitle=\"Latest Post\"\n list={[\n {\n author: {\n image: 'img/people/author-emily.png',\n name: 'John Doe',\n title: 'CEO'\n },\n date: '12/30/2022',\n headline: 'This is a blog post headline',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n url: 'https://example.com'\n },\n readingTime: '5 min read',\n teaserText: 'This is a teaser text for the blog post'\n },\n {\n author: {\n image: 'img/people/author-emily.png',\n name: 'John Doe',\n title: 'CEO'\n },\n date: '12/30/2022',\n headline: 'This is a blog post headline',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n url: 'https://example.com'\n },\n readingTime: '5 min read',\n teaserText: 'This is a teaser text for the blog post'\n },\n {\n author: {\n image: 'img/people/author-emily.png',\n name: 'John Doe',\n title: 'CEO'\n },\n date: '12/30/2022',\n headline: 'This is a blog post headline',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n url: 'https://example.com'\n },\n readingTime: '5 min read',\n teaserText: 'This is a teaser text for the blog post'\n }\n ]}\n listTitle=\"Recent Posts\"\n more={[\n {\n author: {\n image: 'img/people/author-alex.png',\n name: 'John Doe',\n title: 'CEO'\n },\n date: '12/30/2022',\n headline: 'Mastering the Art of Design Systems with Systemics: A Journey from Vision to Reality',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n url: 'https://example.com/article1'\n },\n readingTime: '5 min read',\n tags: [\n 'Design Systems',\n 'Headless Websites',\n 'Training'\n ],\n teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence. We discuss our unique approach to Design System Consulting, where we align your vision with actionable strategies for seamless and captivating user experiences. Learn how we transform ideas into tangible results with our Design System Creation service, empowering your brand to communicate effectively across digital platforms.'\n },\n {\n author: {\n image: 'img/people/author-emily.png',\n name: 'Jane Doe',\n title: 'CTO'\n },\n date: '12/30/2022',\n headline: 'Unleashing Innovation with Headless Websites: The Future of Digital Experiences',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n url: 'https://example.com/article2'\n },\n readingTime: '5 min read',\n tags: [\n 'Innovation',\n 'Headless Websites',\n 'Systemics'\n ],\n teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey. Discover how our experts leverage headless CMS architecture to provide unparalleled flexibility while maintaining design integrity. We make content distribution dynamic and responsive, tailoring it to users\\' preferences for a seamless journey across devices and platforms.'\n },\n {\n author: {\n image: 'img/people/author-alex.png',\n name: 'John Doe',\n title: 'CEO'\n },\n date: '12/30/2022',\n headline: 'Investing in Digital Excellence: Systemics\\' Design System Trainings',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n url: 'https://example.com/article3'\n },\n readingTime: '5 min read',\n tags: [\n 'Digital Excellence',\n 'Systemics',\n 'Design System Trainings'\n ],\n teaserText: 'Investing in your digital team\\'s growth is crucial for sustainable success. In this article, we highlight Systemics\\' Design System Trainings, designed to equip your team with the skills they need to harness your design system effectively. Understand how our trainings promote collaboration, shared understanding, and continuous learning, ensuring your design system remains an evolving cornerstone of your digital success.'\n }\n ]}\n moreTitle=\"Featured Posts\"\n section={[\n {\n backgroundColor: 'default',\n buttons: [\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n }\n ],\n content: {\n align: 'center',\n gutter: 'default',\n mode: 'list',\n tileWidth: 'default',\n width: 'unset'\n },\n headerSpacing: false,\n headline: {\n large: false,\n text: 'Section headline',\n width: 'unset'\n },\n inverted: false,\n spaceAfter: 'default',\n spaceBefore: 'default',\n spotlight: false,\n style: 'default',\n width: 'default'\n },\n {\n backgroundColor: 'default',\n buttons: [\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n }\n ],\n content: {\n align: 'center',\n gutter: 'default',\n mode: 'list',\n tileWidth: 'default',\n width: 'unset'\n },\n headerSpacing: false,\n headline: {\n large: false,\n text: 'Section headline',\n width: 'unset'\n },\n inverted: false,\n spaceAfter: 'default',\n spaceBefore: 'default',\n spotlight: false,\n style: 'default',\n width: 'default'\n },\n {\n backgroundColor: 'default',\n buttons: [\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n }\n ],\n content: {\n align: 'center',\n gutter: 'default',\n mode: 'list',\n tileWidth: 'default',\n width: 'unset'\n },\n headerSpacing: false,\n headline: {\n large: false,\n text: 'Section headline',\n width: 'unset'\n },\n inverted: false,\n spaceAfter: 'default',\n spaceBefore: 'default',\n spotlight: false,\n style: 'default',\n width: 'default'\n }\n ]}\n/>",
157
+ "code": "<BlogOverview\n contact={{\n copy: 'Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences.',\n image: {\n alt: 'Picture of Jane Smith',\n aspectRatio: 'vertical',\n fullWidth: false,\n src: 'img/people/contact-john.png'\n },\n links: [\n {\n href: 'mailto:mail@example.com',\n icon: 'xing',\n label: 'john.smith',\n newTab: false\n },\n {\n href: '#',\n icon: 'twitter',\n label: '@john_smith',\n newTab: false\n }\n ],\n subtitle: 'Sales Representative',\n title: 'John Smith'\n }}\n latest={{\n author: {\n image: 'img/people/author-alex.png',\n name: 'John Doe',\n title: 'CEO'\n },\n date: '12/30/2022',\n headline: 'Mastering the Art of Design Systems with Systemics: A Journey from Vision to Reality',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n url: 'https://example.com/article1'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Design Systems'\n },\n {\n entry: 'Headless Websites'\n },\n {\n entry: 'Training'\n }\n ],\n teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence. We discuss our unique approach to Design System Consulting, where we align your vision with actionable strategies for seamless and captivating user experiences.'\n }}\n latestTitle=\"Latest Post\"\n list={[\n {\n author: {\n image: 'img/people/author-alex.png',\n name: 'John Doe',\n title: 'CEO'\n },\n date: '12/30/2022',\n headline: 'Mastering the Art of Design Systems with Systemics',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n url: 'https://example.com/article1'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Design Systems'\n }\n ],\n teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence..'\n },\n {\n author: {\n image: 'img/people/author-emily.png',\n name: 'Jane Doe',\n title: 'CTO'\n },\n date: '12/30/2022',\n headline: 'Unleashing Innovation with Headless Websites',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n url: 'https://example.com/article2'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Headless Websites'\n }\n ],\n teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.'\n },\n {\n author: {\n image: 'img/people/author-alex.png',\n name: 'John Doe',\n title: 'CEO'\n },\n date: '12/30/2022',\n headline: 'Investing in Digital Excellence: Systemics\\' Design System Trainings',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n url: 'https://example.com/article3'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Training'\n }\n ],\n teaserText: 'Investing in your digital team\\'s growth is crucial for sustainable success. In this article, we highlight Systemics\\' Design System Trainings, designed to equip your team with the skills they need to harness your design system effectively.'\n }\n ]}\n listTitle=\"Recent Posts\"\n more={[\n {\n author: {\n image: 'img/people/author-alex.png',\n name: 'John Doe',\n title: 'CEO'\n },\n date: '12/30/2022',\n headline: 'Mastering the Art of Design Systems with Systemics',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n url: 'https://example.com/article1'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Design Systems'\n }\n ],\n teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence..'\n },\n {\n author: {\n image: 'img/people/author-emily.png',\n name: 'Jane Doe',\n title: 'CTO'\n },\n date: '12/30/2022',\n headline: 'Unleashing Innovation with Headless Websites',\n image: 'img/close-up-young-business-team-working.png',\n link: {\n label: 'Read more',\n url: 'https://example.com/article2'\n },\n readingTime: '5 min read',\n tags: [\n {\n entry: 'Headless Websites'\n }\n ],\n teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.'\n }\n ]}\n moreTitle=\"Featured Posts\"\n section={[\n {\n backgroundColor: 'default',\n buttons: [\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n }\n ],\n content: {\n align: 'center',\n gutter: 'default',\n mode: 'list',\n tileWidth: 'default',\n width: 'unset'\n },\n headerSpacing: false,\n headline: {\n large: false,\n text: 'Section headline',\n width: 'unset'\n },\n inverted: false,\n spaceAfter: 'default',\n spaceBefore: 'default',\n spotlight: false,\n style: 'default',\n width: 'default'\n },\n {\n backgroundColor: 'default',\n buttons: [\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n }\n ],\n content: {\n align: 'center',\n gutter: 'default',\n mode: 'list',\n tileWidth: 'default',\n width: 'unset'\n },\n headerSpacing: false,\n headline: {\n large: false,\n text: 'Section headline',\n width: 'unset'\n },\n inverted: false,\n spaceAfter: 'default',\n spaceBefore: 'default',\n spotlight: false,\n style: 'default',\n width: 'default'\n },\n {\n backgroundColor: 'default',\n buttons: [\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n }\n ],\n content: {\n align: 'center',\n gutter: 'default',\n mode: 'list',\n tileWidth: 'default',\n width: 'unset'\n },\n headerSpacing: false,\n headline: {\n large: false,\n text: 'Section headline',\n width: 'unset'\n },\n inverted: false,\n spaceAfter: 'default',\n spaceBefore: 'default',\n spotlight: false,\n style: 'default',\n width: 'default'\n }\n ]}\n/>",
158
158
  "args": {
159
159
  "section": [
160
160
  {
@@ -288,7 +288,7 @@
288
288
  "latest": {
289
289
  "date": "12/30/2022",
290
290
  "headline": "Mastering the Art of Design Systems with Systemics: A Journey from Vision to Reality",
291
- "teaserText": "In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand's digital presence. We discuss our unique approach to Design System Consulting, where we align your vision with actionable strategies for seamless and captivating user experiences. Learn how we transform ideas into tangible results with our Design System Creation service, empowering your brand to communicate effectively across digital platforms.",
291
+ "teaserText": "In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand's digital presence. We discuss our unique approach to Design System Consulting, where we align your vision with actionable strategies for seamless and captivating user experiences.",
292
292
  "image": "img/close-up-young-business-team-working.png",
293
293
  "link": {
294
294
  "url": "https://example.com/article1",
@@ -301,68 +301,89 @@
301
301
  "image": "img/people/author-alex.png"
302
302
  },
303
303
  "tags": [
304
- "Design Systems",
305
- "Headless Websites",
306
- "Training"
304
+ {
305
+ "entry": "Design Systems"
306
+ },
307
+ {
308
+ "entry": "Headless Websites"
309
+ },
310
+ {
311
+ "entry": "Training"
312
+ }
307
313
  ]
308
314
  },
309
315
  "listTitle": "Recent Posts",
310
316
  "list": [
311
317
  {
312
318
  "date": "12/30/2022",
313
- "headline": "This is a blog post headline",
314
- "teaserText": "This is a teaser text for the blog post",
319
+ "headline": "Mastering the Art of Design Systems with Systemics",
320
+ "teaserText": "In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand's digital presence..",
315
321
  "image": "img/close-up-young-business-team-working.png",
316
322
  "link": {
317
- "url": "https://example.com",
323
+ "url": "https://example.com/article1",
318
324
  "label": "Read more"
319
325
  },
320
326
  "readingTime": "5 min read",
321
327
  "author": {
322
328
  "name": "John Doe",
323
329
  "title": "CEO",
324
- "image": "img/people/author-emily.png"
325
- }
330
+ "image": "img/people/author-alex.png"
331
+ },
332
+ "tags": [
333
+ {
334
+ "entry": "Design Systems"
335
+ }
336
+ ]
326
337
  },
327
338
  {
328
339
  "date": "12/30/2022",
329
- "headline": "This is a blog post headline",
330
- "teaserText": "This is a teaser text for the blog post",
340
+ "headline": "Unleashing Innovation with Headless Websites",
341
+ "teaserText": "Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.",
331
342
  "image": "img/close-up-young-business-team-working.png",
332
343
  "link": {
333
- "url": "https://example.com",
344
+ "url": "https://example.com/article2",
334
345
  "label": "Read more"
335
346
  },
336
347
  "readingTime": "5 min read",
337
348
  "author": {
338
- "name": "John Doe",
339
- "title": "CEO",
349
+ "name": "Jane Doe",
350
+ "title": "CTO",
340
351
  "image": "img/people/author-emily.png"
341
- }
352
+ },
353
+ "tags": [
354
+ {
355
+ "entry": "Headless Websites"
356
+ }
357
+ ]
342
358
  },
343
359
  {
344
360
  "date": "12/30/2022",
345
- "headline": "This is a blog post headline",
346
- "teaserText": "This is a teaser text for the blog post",
361
+ "headline": "Investing in Digital Excellence: Systemics' Design System Trainings",
362
+ "teaserText": "Investing in your digital team's growth is crucial for sustainable success. In this article, we highlight Systemics' Design System Trainings, designed to equip your team with the skills they need to harness your design system effectively.",
347
363
  "image": "img/close-up-young-business-team-working.png",
348
364
  "link": {
349
- "url": "https://example.com",
365
+ "url": "https://example.com/article3",
350
366
  "label": "Read more"
351
367
  },
352
368
  "readingTime": "5 min read",
353
369
  "author": {
354
370
  "name": "John Doe",
355
371
  "title": "CEO",
356
- "image": "img/people/author-emily.png"
357
- }
372
+ "image": "img/people/author-alex.png"
373
+ },
374
+ "tags": [
375
+ {
376
+ "entry": "Training"
377
+ }
378
+ ]
358
379
  }
359
380
  ],
360
381
  "moreTitle": "Featured Posts",
361
382
  "more": [
362
383
  {
363
384
  "date": "12/30/2022",
364
- "headline": "Mastering the Art of Design Systems with Systemics: A Journey from Vision to Reality",
365
- "teaserText": "In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand's digital presence. We discuss our unique approach to Design System Consulting, where we align your vision with actionable strategies for seamless and captivating user experiences. Learn how we transform ideas into tangible results with our Design System Creation service, empowering your brand to communicate effectively across digital platforms.",
385
+ "headline": "Mastering the Art of Design Systems with Systemics",
386
+ "teaserText": "In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand's digital presence..",
366
387
  "image": "img/close-up-young-business-team-working.png",
367
388
  "link": {
368
389
  "url": "https://example.com/article1",
@@ -375,15 +396,15 @@
375
396
  "image": "img/people/author-alex.png"
376
397
  },
377
398
  "tags": [
378
- "Design Systems",
379
- "Headless Websites",
380
- "Training"
399
+ {
400
+ "entry": "Design Systems"
401
+ }
381
402
  ]
382
403
  },
383
404
  {
384
405
  "date": "12/30/2022",
385
- "headline": "Unleashing Innovation with Headless Websites: The Future of Digital Experiences",
386
- "teaserText": "Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey. Discover how our experts leverage headless CMS architecture to provide unparalleled flexibility while maintaining design integrity. We make content distribution dynamic and responsive, tailoring it to users' preferences for a seamless journey across devices and platforms.",
406
+ "headline": "Unleashing Innovation with Headless Websites",
407
+ "teaserText": "Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey.",
387
408
  "image": "img/close-up-young-business-team-working.png",
388
409
  "link": {
389
410
  "url": "https://example.com/article2",
@@ -396,59 +417,36 @@
396
417
  "image": "img/people/author-emily.png"
397
418
  },
398
419
  "tags": [
399
- "Innovation",
400
- "Headless Websites",
401
- "Systemics"
402
- ]
403
- },
404
- {
405
- "date": "12/30/2022",
406
- "headline": "Investing in Digital Excellence: Systemics' Design System Trainings",
407
- "teaserText": "Investing in your digital team's growth is crucial for sustainable success. In this article, we highlight Systemics' Design System Trainings, designed to equip your team with the skills they need to harness your design system effectively. Understand how our trainings promote collaboration, shared understanding, and continuous learning, ensuring your design system remains an evolving cornerstone of your digital success.",
408
- "image": "img/close-up-young-business-team-working.png",
409
- "link": {
410
- "url": "https://example.com/article3",
411
- "label": "Read more"
412
- },
413
- "readingTime": "5 min read",
414
- "author": {
415
- "name": "John Doe",
416
- "title": "CEO",
417
- "image": "img/people/author-alex.png"
418
- },
419
- "tags": [
420
- "Digital Excellence",
421
- "Systemics",
422
- "Design System Trainings"
420
+ {
421
+ "entry": "Headless Websites"
422
+ }
423
423
  ]
424
424
  }
425
425
  ],
426
- "cta": {
427
- "headline": "Headline",
428
- "sub": "Subheadline",
429
- "highlightText": false,
430
- "colorNeutral": false,
431
- "fullWidth": false,
432
- "buttons": [
433
- {
434
- "label": "Book a meeting"
435
- },
426
+ "contact": {
427
+ "image": {
428
+ "src": "img/people/contact-john.png",
429
+ "alt": "Picture of Jane Smith",
430
+ "fullWidth": false,
431
+ "aspectRatio": "vertical"
432
+ },
433
+ "title": "John Smith",
434
+ "subtitle": "Sales Representative",
435
+ "links": [
436
436
  {
437
- "label": "Book a meeting"
437
+ "icon": "xing",
438
+ "label": "john.smith",
439
+ "href": "mailto:mail@example.com",
440
+ "newTab": false
438
441
  },
439
442
  {
440
- "label": "Book a meeting"
443
+ "icon": "twitter",
444
+ "label": "@john_smith",
445
+ "href": "#",
446
+ "newTab": false
441
447
  }
442
448
  ],
443
- "image": {
444
- "padding": true
445
- },
446
- "order": {
447
- "mobileImageLast": false,
448
- "desktopImageLast": true
449
- },
450
- "textAlign": "left",
451
- "contentAlign": "center"
449
+ "copy": "Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences."
452
450
  }
453
451
  },
454
452
  "screenshot": "img/screenshots/pages-archetypes--blog-overview.png"
@@ -679,10 +677,10 @@
679
677
  "id": "components-contact--wide-image",
680
678
  "group": "Components/Contact",
681
679
  "name": "WideImage",
682
- "code": "<Contact\n image={{\n alt: 'Picture of Jane Smith',\n aspectRatio: 'wide',\n fullWidth: false,\n src: 'img/people/portrait-young-girl-smiling.jpg'\n }}\n links={[\n {\n href: '#',\n icon: 'twitter',\n label: '@Isabella_Doe',\n newTab: false\n },\n {\n href: 'mailto:mail@example.com',\n icon: 'linkedin',\n label: 'Isabella.Doe',\n newTab: false\n }\n ]}\n subtitle=\"Creative Director\"\n title=\"Isabella Doe\"\n/>",
680
+ "code": "<Contact\n image={{\n alt: 'Picture of Jane Smith',\n aspectRatio: 'wide',\n fullWidth: false,\n src: 'img/people/contact-isabella.png'\n }}\n links={[\n {\n href: '#',\n icon: 'twitter',\n label: '@Isabella_Doe',\n newTab: false\n },\n {\n href: 'mailto:mail@example.com',\n icon: 'linkedin',\n label: 'Isabella.Doe',\n newTab: false\n }\n ]}\n subtitle=\"Creative Director\"\n title=\"Isabella Doe\"\n/>",
683
681
  "args": {
684
682
  "image": {
685
- "src": "img/people/portrait-young-girl-smiling.jpg",
683
+ "src": "img/people/contact-isabella.png",
686
684
  "alt": "Picture of Jane Smith",
687
685
  "fullWidth": false,
688
686
  "aspectRatio": "wide"
package/dist/global.css CHANGED
@@ -337,12 +337,15 @@ h3 {
337
337
 
338
338
  .dsa-blog-teaser {
339
339
  --dsa-blog-teaser--background: transparent;
340
- --dsa-blog-teaser__topic--font: var(--ks-font-display-l);
340
+ --dsa-blog-teaser--gap: var(--ks-spacing-stack-xs) var(--ks-spacing-inline-xs);
341
+ --dsa-blog-teaser__topic--font: var(--dsa-topic--font);
342
+ --dsa-blog-teaser__topic--font-size: var(--ks-font-size-copy-l);
343
+ --dsa-blog-teaser__topic--font-weight: var(--dsa-topic--font-weight);
341
344
  --dsa-blog-teaser__tag-label--font: var(--ks-font-interface-xs);
342
345
  --dsa-blog-teaser__copy--font: var(--ks-font-copy-s);
343
346
  --dsa-blog-teaser__copy--color: var(--dsa-rich-text--color);
344
347
  --dsa-blog-teaser__copy--color_hover: var(--ks-text-color-default);
345
- --dsa-blog-teaser__copy--margin-top: var(--ks-spacing-stack-s);
348
+ --dsa-blog-teaser__copy--margin-top: 0.5em;
346
349
  --dsa-blog-teaser__meta--font: var(--ks-spacing-stack-s);
347
350
  --dsa-blog-teaser__meta--color: var(--ks-text-color-interface);
348
351
  --dsa-blog-teaser__meta__author--font-weight: var(--ks-font-weight-semi-bold);
@@ -350,14 +353,15 @@ h3 {
350
353
  }
351
354
  @container post-teaser (min-width: 640px) {
352
355
  .dsa-blog-teaser {
353
- --dsa-blog-teaser__topic--font: var(--ks-font-display-l);
356
+ --dsa-blog-teaser--gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-s);
357
+ --dsa-blog-teaser__topic--font-size: var(--ks-font-size-copy-xl);
354
358
  --dsa-blog-teaser__copy--font: var(--ks-font-copy-m);
355
359
  --dsa-blog-teaser__tag-label--font: var(--ks-font-interface-s);
356
360
  }
357
361
  }
358
362
  @container post-teaser (min-width: 1000px) {
359
363
  .dsa-blog-teaser {
360
- --dsa-blog-teaser__topic--font: var(--ks-font-display-xl);
364
+ --dsa-blog-teaser__topic--font-size: var(--ks-font-size-copy-xxl);
361
365
  }
362
366
  }
363
367
 
@@ -390,15 +394,20 @@ h3 {
390
394
  }
391
395
  .dsa-blog-teaser.c-post-teaser .c-post-meta {
392
396
  --c-post-meta_author--font-weight: var(--ks-font-weight-semi-bold);
393
- --c-post-meta--gap: 0.5em 1em;
397
+ --c-post-meta--gap: 0.5em 0.75em;
394
398
  --c-post-meta_item--font: var(--dsa-blog-teaser__meta--font, var(--ks-font-interface-s));
399
+ --c-post-meta_item--gap: 0.35em;
395
400
  --c-post-meta_author--color: var(--dsa-blog-teaser__meta--color, var(--c-post-meta_item--color));
401
+ --c-post-meta_author--gap: 0.35em;
396
402
  --c-post-meta_author--font-weight: var(
397
403
  --dsa-blog-teaser__meta__author--font-weight,
398
404
  var(--ks-font-weight-semi-bold)
399
405
  );
400
406
  margin: 0;
401
407
  }
408
+ .dsa-blog-teaser.c-post-teaser .l-container--rich-text {
409
+ margin: 0;
410
+ }
402
411
  .dsa-blog-teaser.c-post-teaser .c-rich-text {
403
412
  font: var(--dsa-blog-teaser__copy--font, var(--ks-font-copy-m));
404
413
  transition: var(--ks-transition-hover);
@@ -409,10 +418,12 @@ h3 {
409
418
  }
410
419
  .dsa-blog-teaser.c-post-teaser .c-teaser__topic {
411
420
  font: var(--dsa-blog-teaser__topic--font, var(--dsa-topic--font, var(--ks-font-display-m)));
412
- font-weight: var(--dsa-topic--font-weight);
421
+ font-size: var(--dsa-blog-teaser__topic--font-size);
422
+ font-weight: var(--dsa-blog-teaser__topic--font-weight, var(--dsa-topic--font-weight)) !important;
413
423
  text-align: left;
414
424
  transition: var(--ks-transition-hover);
415
425
  transition-property: text-shadow;
426
+ margin-bottom: var(--dsa-blog-teaser__topic--margin-bottom, 0.35em);
416
427
  }
417
428
 
418
429
  .c-form-check {
@@ -496,6 +507,16 @@ h3 {
496
507
  color: var(--dsa-form-field__placeholder--color, var(--ks-color-fg-alpha-5));
497
508
  }
498
509
 
510
+ .c-divider {
511
+ --dsa-divider--background: var(--ks-border-color-accent);
512
+ --dsa-divider--height: var(--ks-border-widht-default);
513
+ }
514
+
515
+ hr.c-divider {
516
+ --c-divider--background: var(--dsa-divider--background, var(--ks-border-color-accent));
517
+ --c-divider--height: var(--dsa-divider--height, var(--ks-border-width-default));
518
+ }
519
+
499
520
  @font-face {
500
521
  font-family: "Fredoka";
501
522
  src: url("static/fonts/dsa/Fredoka-Regular.woff") format("woff2"), url("static/fonts/dsa/Fredoka-Regular.woff") format("woff");
@@ -659,6 +680,10 @@ body {
659
680
  background: var(--ks-background-color-default);
660
681
  }
661
682
 
683
+ hr.c-divider {
684
+ --c-divider--background: var(--ks-border-color-accent);
685
+ }
686
+
662
687
  :root, [ks-inverted], [ks-theme] {
663
688
  --g-link--font-weight: var(--dsa-link--font-weight, var(--ks-font-weight-semi-bold));
664
689
  --g-link--text-decoration: var(--dsa-link--text-decoration, underline);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 03 Sep 2024 15:17:50 GMT
3
+ * Generated on Wed, 04 Sep 2024 06:35:01 GMT
4
4
  */
5
5
  :root [ks-theme=business] {
6
6
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -2727,7 +2727,7 @@
2727
2727
  }
2728
2728
  /**
2729
2729
  * Do not edit directly
2730
- * Generated on Tue, 03 Sep 2024 15:17:54 GMT
2730
+ * Generated on Wed, 04 Sep 2024 06:35:05 GMT
2731
2731
  */
2732
2732
  :root [ks-theme=google] {
2733
2733
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -5458,7 +5458,7 @@
5458
5458
  }
5459
5459
  /**
5460
5460
  * Do not edit directly
5461
- * Generated on Tue, 03 Sep 2024 15:17:52 GMT
5461
+ * Generated on Wed, 04 Sep 2024 06:35:03 GMT
5462
5462
  */
5463
5463
  :root [ks-theme=ngo] {
5464
5464
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -8459,7 +8459,7 @@
8459
8459
  }
8460
8460
  /**
8461
8461
  * Do not edit directly
8462
- * Generated on Tue, 03 Sep 2024 15:17:56 GMT
8462
+ * Generated on Wed, 04 Sep 2024 06:35:08 GMT
8463
8463
  */
8464
8464
  :root [ks-theme=telekom] {
8465
8465
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 03 Sep 2024 15:17:47 GMT
3
+ * Generated on Wed, 04 Sep 2024 06:34:59 GMT
4
4
  */
5
5
 
6
6
  :root, [ks-theme] {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 03 Sep 2024 15:17:48 GMT
3
+ * Generated on Wed, 04 Sep 2024 06:34:59 GMT
4
4
  */
5
5
 
6
6
  export const KsBackgroundColorAccentBase = "#230a2b";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kickstartds/ds-agency-premium",
3
- "version": "1.5.2",
3
+ "version": "1.5.3",
4
4
  "description": "",
5
5
  "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
6
6
  "bugs": {