{ "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/section.schema.json", "title": "Section", "description": "Component used to layout components into pages", "type": "object", "properties": { "width": { "type": "string", "title": "Width", "description": "Width of section to use", "enum": [ "full", "max", "wide", "default", "narrow" ], "default": "default" }, "style": { "type": "string", "title": "Style", "description": "Style of background", "enum": [ "default", "framed", "deko" ], "default": "default" }, "backgroundColor": { "type": "string", "title": "Style", "description": "Color of background", "enum": [ "default", "accent", "bold" ], "default": "default" }, "transition": { "type": "string", "title": "Style", "description": "Color of background", "enum": [ "none", "to-default", "to-accent", "to-bold", "to-inverted" ], "default": "none" }, "backgroundImage": { "title": "Background image", "description": "Background image for the whole section", "type": "string", "format": "image" }, "spotlight": { "type": "boolean", "title": "Spotlight", "description": "Show spotlight behind cursor", "default": false }, "spaceBefore": { "type": "string", "title": "Space Before", "description": "Amount of spacing before the section", "enum": [ "default", "small", "none" ], "default": "default" }, "spaceAfter": { "type": "string", "title": "Space After", "description": "Amount of spacing after the section", "enum": [ "default", "small", "none" ], "default": "default" }, "inverted": { "type": "boolean", "title": "Inverted", "description": "Whether to invert the section", "default": false }, "headerSpacing": { "type": "boolean", "title": "Header Spacing", "description": "Reserve additional spacing for a floating header", "default": false }, "headline": { "type": "object", "properties": { "text": { "type": "string", "title": "Headline", "description": "Headline Text for the section", "format": "markdown", "examples": [ "Section headline" ] }, "large": { "type": "boolean", "title": "Large Headline", "description": "Make the headline larger", "default": false }, "width": { "type": "string", "title": "Headline Width", "description": "Width of headline to use", "enum": [ "unset", "narrow", "default", "wide" ], "default": "unset" }, "textAlign": { "title": "Headline Text Alignment", "description": "Choose the text alignment for the headline", "type": "string", "enum": [ "left", "center", "right" ] }, "align": { "title": "Headline Alignment", "description": "Choose an alignment for positioning the headline", "type": "string", "enum": [ "left", "center", "right" ] }, "sub": { "type": "string", "title": "Subheadline", "description": "Subheadline for the section", "format": "markdown" }, "switchOrder": { "type": "boolean", "title": "Switch Headline Order", "description": "Switch the order of headline and subheadline" } }, "additionalProperties": false }, "content": { "type": "object", "properties": { "width": { "type": "string", "title": "Content Width", "description": "Width of content to use", "enum": [ "unset", "narrow", "default", "wide" ], "default": "unset" }, "align": { "title": "Content Alignment", "description": "Choose an alignment for the content", "type": "string", "enum": [ "left", "center", "right" ], "default": "center" }, "gutter": { "type": "string", "title": "Gutter", "description": "Size of gutter to use", "enum": [ "large", "default", "small", "none" ], "default": "default" }, "mode": { "type": "string", "title": "Mode", "description": "Layout mode used for section contents", "enum": [ "default", "tile", "list", "slider" ], "default": "list" }, "tileWidth": { "type": "string", "title": "Tile Width", "description": "Set min-width for the tiles in the grid", "enum": [ "smallest", "default", "medium", "large", "largest", "full" ], "default": "default" } }, "additionalProperties": false }, "components": { "type": "array", "title": "Content", "description": "Allowed components for content", "items": { "anyOf": [ { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/blog-teaser.schema.json", "title": "Blog Teaser", "description": "Display a blog teaser with date, tags, headline, teaser text and author", "type": "object", "properties": { "date": { "title": "Date", "description": "The date of the blog post", "type": "string", "format": "date", "examples": [ "12/30/2022" ] }, "tags": { "type": "array", "title": "Tags", "description": "The tags for the blog post", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/blog-tag.schema.json", "title": "Blog Tag", "description": "Tag given to a blog post", "type": "object", "properties": { "entry": { "title": "Entry", "description": "Name of the tag entry", "type": "string" } }, "additionalProperties": false, "required": [ "entry" ] } }, "headline": { "title": "Headline", "description": "The headline of the blog post", "type": "string", "format": "markdown", "examples": [ "This is a blog post headline" ] }, "teaserText": { "title": "Teaser Text", "description": "The teaser text of the blog post", "type": "string", "format": "markdown", "examples": [ "This is a teaser text for the blog post" ] }, "image": { "title": "Image", "description": "The preview image for the blog post", "type": "string", "format": "image", "examples": [ "img/close-up-young-business-team-working.png" ] }, "alt": { "title": "Alt", "description": "The alt text for the preview image", "type": "string", "examples": [ "Image of a business team working" ] }, "link": { "type": "object", "title": "Link", "description": "URL and label for the blog post linked", "properties": { "url": { "title": "URL", "description": "The blog entry URL to link", "type": "string", "format": "uri", "examples": [ "https://example.com" ] }, "text": { "title": "Text", "description": "The text for the link", "type": "string", "default": "Read article", "examples": [ "Read article" ] } }, "additionalProperties": false, "required": [ "url" ] }, "readingTime": { "title": "Reading Time", "description": "Time to read for the blog post", "type": "string", "examples": [ "5 min read" ] }, "author": { "type": "object", "title": "Author", "description": "The author of the blog post", "properties": { "name": { "title": "Name", "description": "The name of the author", "type": "string", "examples": [ "John Doe" ] }, "title": { "title": "Title", "description": "The title of the author", "type": "string", "examples": [ "CEO" ] }, "image": { "title": "Image", "description": "The image URL of the author", "type": "string", "format": "image", "examples": [ "img/people/author-emily.png" ] } }, "additionalProperties": false, "required": [ "name" ] }, "className": { "type": "string" } }, "additionalProperties": false, "required": [ "headline", "teaserText" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/business-card.schema.json", "title": "Business Card", "description": "Business card component representing an individual's or company's contact information and branding.", "type": "object", "properties": { "centered": { "type": "boolean", "title": "Centered", "description": "Whether the business card content is centered.", "default": false }, "image": { "type": "object", "title": "Background Image", "description": "A background or feature image displayed on the business card.", "properties": { "src": { "type": "string", "format": "uri", "description": "URL of the background image shown on the business card." }, "alt": { "type": "string", "description": "Alternative text describing the background image." } }, "required": [ "src" ], "additionalProperties": false }, "logo": { "type": "object", "title": "Company Logo", "description": "The logo of the company or organization displayed on the business card.", "properties": { "src": { "type": "string", "format": "uri", "description": "URL of the company or organization logo." }, "alt": { "type": "string", "description": "Alternative text describing the logo." }, "url": { "type": "string", "format": "uri", "description": "URL to the company's website or landing page." } }, "required": [ "src" ], "additionalProperties": false }, "topic": { "type": "string", "title": "Topic", "description": "A headline or main topic for the business card, such as a job title or department." }, "address": { "type": "string", "title": "Address", "description": "The physical or mailing address displayed on the business card." }, "avatar": { "type": "object", "title": "Avatar", "description": "A profile image or avatar representing the person on the business card.", "properties": { "src": { "type": "string", "format": "uri", "description": "URL of the person's avatar or profile image." }, "alt": { "type": "string", "description": "Alternative text describing the avatar." } }, "required": [ "src" ], "additionalProperties": false }, "contact": { "type": "array", "title": "Contact Information", "description": "A list of contact methods for the person or business (e.g., email, phone, website).", "items": { "type": "object", "properties": { "label": { "type": "string", "description": "Label describing the contact method (e.g., 'Email', 'Phone')." }, "icon": { "type": "string", "description": "Icon name or identifier representing the contact method." }, "url": { "type": "string", "format": "uri", "description": "URL or link for the contact method, if applicable." } }, "required": [ "label" ], "additionalProperties": false } }, "buttons": { "type": "array", "title": "Buttons", "description": "A list of action buttons shown on the business card.", "items": { "type": "object", "properties": { "label": { "type": "string", "description": "Text label for the link." }, "url": { "type": "string", "format": "uri", "description": "URL the link points to." } }, "required": [ "label", "url" ], "additionalProperties": false } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/contact.schema.json", "title": "Contact", "description": "Component used for user interaction", "type": "object", "properties": { "image": { "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 Isabella Doe" ] }, "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 }, "title": { "title": "Title", "description": "Name, company name, etc.", "type": "string", "examples": [ "Isabella Doe" ] }, "subtitle": { "title": "Subtitle", "description": "Position, profession, department, location, etc.", "type": "string", "examples": [ "CEO at Company" ] }, "links": { "type": "array", "items": { "type": "object", "properties": { "icon": { "type": "string", "format": "icon" }, "label": { "type": "string" }, "url": { "type": "string", "format": "uri" }, "newTab": { "title": "Open link in new Tab", "description": "Open link in new Tab", "type": "boolean", "default": false }, "ariaLabel": { "title": "Aria Label", "description": "Aria label for the link", "type": "string", "examples": [ "Link to Isabella Doe's social media profile" ] } }, "additionalProperties": false }, "examples": [ [ { "icon": "phone", "label": "0228 / 688 966 20", "url": "tel:+4922868896620" }, { "icon": "email", "label": "mail@example.com", "url": "mailto:mail@example.com" } ] ] }, "copy": { "title": "Copy text", "type": "string" }, "className": { "title": "Class", "description": "Additional css classes attached to the wrapping element", "type": "string" }, "component": { "title": "`ks-component` attribute", "description": "Optional custom component identifier", "type": "string" } }, "additionalProperties": false, "required": [ "name" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/content-nav.schema.json", "title": "Content Nav", "description": "Content navigation component for navigating related topics or sections within content.", "type": "object", "properties": { "image": { "type": "object", "properties": { "src": { "type": "string", "format": "uri", "description": "URL of the image to display in the content nav." }, "alt": { "type": "string", "description": "Alternative text for the image." } }, "required": [ "src" ], "additionalProperties": false }, "topic": { "type": "string", "description": "The topic of the content being navigated." }, "links": { "type": "array", "items": { "type": "object", "properties": { "label": { "type": "string", "description": "The text label for the link." }, "url": { "type": "string", "format": "uri", "description": "The URL the link points to." } }, "required": [ "label", "url" ], "additionalProperties": false } }, "initiallyShown": { "type": "number", "default": 4, "description": "Determines how many links are initially shown in the content nav. If there are more links, a 'Show More' button will be displayed." } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/cta.schema.json", "title": "Cta", "description": "Call to Action (CTA) component for prompting users to take specific actions on a website.", "type": "object", "properties": { "headline": { "title": "Component Headline", "description": "Headline for the Component element", "type": "string", "format": "markdown", "examples": [ "Headline" ] }, "sub": { "title": "Component Subheadline", "description": "Subheadline below the component headline", "type": "string", "format": "markdown", "examples": [ "Subheadline" ] }, "text": { "title": "Component Text", "description": "Info text for the component element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "inverted": { "title": "Inverted", "description": "Invert the text and button colors for use on dark backgrounds", "default": false, "type": "boolean" }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "backgroundColor": { "title": "Background color", "description": "Background color for the whole element", "type": "string", "format": "color" }, "backgroundImage": { "title": "Background image", "description": "Background image for the whole element", "type": "string", "format": "image" }, "image": { "title": "Image", "description": "Image displayed alongside the text content", "type": "object", "properties": { "src": { "title": "Image source", "description": "Image source to use", "type": "string", "format": "image" }, "padding": { "title": "Padding", "description": "Toggle padding of the image", "type": "boolean", "default": true }, "alt": { "title": "Alt text", "description": "Image description", "type": "string" }, "align": { "title": "Vertical alignment of the image", "description": "Select a vertical alignment for the image", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "center" } }, "additionalProperties": false }, "order": { "title": "Order", "description": "Choose what comes first on mobile and desktop: image or text", "type": "object", "properties": { "mobileImageLast": { "title": "Mobile image after text", "description": "Switch to displaying the image after the text on mobile", "type": "boolean", "default": false }, "desktopImageLast": { "title": "Desktop image after text", "description": "Switch to displaying the image after the text on desktop", "type": "boolean", "default": true } }, "additionalProperties": false }, "textAlign": { "title": "Text Alignment", "description": "Choose the alginment of the text", "enum": [ "left", "center" ], "type": "string", "default": "left" }, "align": { "title": "Vertical alignment of the content", "description": "Select a vertical alignment for the content", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "center" }, "padding": { "title": "Padding", "description": "Toggle padding of the content", "type": "boolean", "default": false } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/divider.schema.json", "title": "Divider", "description": "Dividers bring clarity to a layout by grouping and dividing content in close proximity.", "type": "object", "properties": { "variant": { "title": "Style of the divider", "type": "string", "description": "Choose a variant for the divider", "enum": [ "default", "accent" ], "default": "default" }, "className": { "type": "string", "title": "Additional Classes", "description": "Add additional css classes that should be applied to the divider" }, "component": { "title": "`ks-component` attribute", "description": "Optional custom component identifier", "type": "string" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/downloads.schema.json", "title": "Downloads", "description": "Downloads component for providing users with downloadable files and resources.", "type": "object", "properties": { "download": { "type": "array", "items": { "type": "object", "properties": { "name": { "type": "string", "description": "The name of the file" }, "description": { "type": "string", "description": "A brief description of the file" }, "previewImage": { "type": "string", "format": "image", "description": "A URL to an image that previews the file." }, "url": { "type": "string", "format": "uri", "description": "The URL to download the file from." }, "size": { "type": [ "string" ], "description": "The size of the download file" }, "format": { "type": [ "string" ], "description": "The format of the download file" } }, "required": [ "name", "url" ], "additionalProperties": false } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/event-latest-teaser.schema.json", "title": "Event Latest Teaser", "description": "Display an event teaser with date, title and location", "type": "object", "properties": { "date": { "title": "Date", "description": "The date of the event", "type": "string", "format": "date", "examples": [ "12.30.2022" ] }, "calendar": { "type": "object", "title": "Calendar", "description": "Calendar icon to display the date", "properties": { "month": { "title": "Month", "description": "The month of the event", "type": "string", "examples": [ "Dec" ] }, "day": { "title": "Day", "description": "The day of the event", "type": "string", "examples": [ "30" ] } }, "additionalProperties": false }, "title": { "title": "Headline", "description": "Title of the event", "type": "string", "format": "markdown", "examples": [ "This is a event teaser title" ] }, "location": { "title": "Location", "description": "Location of the event", "type": "string", "format": "markdown", "examples": [ "This is a location" ] }, "url": { "title": "URL", "description": "The event entry URL to link", "type": "string", "format": "uri", "examples": [ "https://example.com" ] }, "cta": { "title": "Call to Action", "description": "Text for the call to action", "type": "string", "examples": [ "Show event" ] }, "ariaLabel": { "title": "ARIA Label", "description": "ARIA label for accessibility", "type": "string", "examples": [ "Event teaser for " ] }, "className": { "type": "string" } }, "additionalProperties": false, "required": [ "title", "date", "location" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/event-list-teaser.schema.json", "title": "Event List Teaser", "description": "Display an event teaser with date, title and location", "type": "object", "properties": { "category": { "title": "Category", "description": "Category of the event teaser", "type": "string", "examples": [ "Category" ] }, "title": { "title": "Headline", "description": "Title of the event", "type": "string", "format": "markdown", "examples": [ "This is a event teaser title" ] }, "text": { "title": "Text", "description": "Short teaser text for the event", "type": "string", "format": "markdown", "examples": [ "The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence. The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence." ] }, "date": { "title": "Date", "description": "The date of the event", "type": "string", "format": "date", "examples": [ "FRI, JAN 16" ] }, "time": { "title": "Time", "description": "The time of the event", "type": "string", "examples": [ "10:00" ] }, "location": { "title": "Location", "description": "Location of the event", "type": "object", "properties": { "name": { "type": "string", "title": "Location Name", "description": "Name of the location", "examples": [ "Stadthalle" ] }, "address": { "type": "string", "title": "Address", "description": "Address of the location", "examples": [ "Köln" ] } }, "additionalProperties": false }, "tags": { "title": "Tags", "description": "Tags associated with the event", "type": "array", "items": { "type": "string", "examples": [ "AI", "Technology", "Innovation" ] }, "default": [ "Topic 1", "Topic 2" ] }, "image": { "title": "Image", "description": "Image to display in the teaser", "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "Image Source", "description": "URL of the image to display", "examples": [ "https://picsum.photos/seed/flower/800/600" ] }, "alt": { "type": "string", "title": "Alt Text", "description": "Alt text of the image", "examples": [ "This is an image of a flower" ] } }, "additionalProperties": false }, "url": { "title": "URL", "description": "The event entry URL to link", "type": "string", "format": "uri", "examples": [ "https://example.com" ] }, "ctaText": { "title": "Call to Action", "description": "Text for the call to action", "type": "string", "examples": [ "Show event" ] }, "ariaLabel": { "title": "ARIA Label", "description": "ARIA label for accessibility", "type": "string" }, "className": { "type": "string" } }, "additionalProperties": false, "required": [ "title", "date", "location" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/faq.schema.json", "title": "Faq", "description": "Component used to display a Faq section", "type": "object", "properties": { "questions": { "type": "array", "title": "Questions", "description": "The questions and answers in the Faq section", "items": { "title": "Question", "type": "object", "properties": { "question": { "type": "string", "format": "markdown", "title": "Question", "description": "The question", "examples": [ "What is the product made of?" ] }, "answer": { "type": "string", "format": "markdown", "title": "Answer", "description": "The answer to the question", "examples": [ "The product is made of high-quality materials" ] } }, "additionalProperties": false, "required": [ "question" ] }, "minItems": 1 } }, "additionalProperties": false, "required": [ "questions" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/features.schema.json", "title": "Features", "description": "Component used to display a set of features", "type": "object", "properties": { "layout": { "type": "string", "title": "Layout", "description": "The layout variant to use for the features", "enum": [ "largeTiles", "smallTiles", "list" ], "default": "largeTiles" }, "style": { "type": "string", "enum": [ "intext", "stack", "centered", "besideLarge", "besideSmall" ], "default": "stack" }, "ctas": { "type": "object", "properties": { "toggle": { "type": "boolean", "default": true, "title": "CTA Toggle", "description": "Activate/disable the CTAs" }, "style": { "type": "string", "enum": [ "button", "link", "intext" ], "default": "link" } }, "additionalProperties": false }, "feature": { "type": "array", "title": "Features", "description": "The features to display", "items": { "type": "object", "title": "Feature", "properties": { "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "The icon for the feature", "examples": [ "person" ] }, "title": { "type": "string", "title": "Title", "description": "The title of the feature", "examples": [ "Feature 1" ] }, "text": { "type": "string", "title": "Text", "description": "The description of the feature", "format": "markdown", "examples": [ "This is a feature" ] }, "cta": { "type": "object", "properties": { "url": { "type": "string", "title": "Call to Action url", "description": "The CTA url", "default": "#", "format": "uri" }, "label": { "type": "string", "title": "Link Label", "description": "The text label displayed on the link", "default": "See more", "examples": [ "See all our partners" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Icon for the link style of the cta", "examples": [ "arrow-right" ], "default": "arrow-right" } }, "additionalProperties": false } }, "additionalProperties": false }, "minItems": 1, "maxItems": 8 } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/gallery.schema.json", "title": "Gallery", "description": "Component used to display a gallery of images", "type": "object", "properties": { "images": { "type": "array", "title": "Images", "description": "The images to display in the gallery", "items": { "type": "object", "properties": { "src": { "type": "string", "title": "src", "format": "image", "description": "The source of the image", "examples": [ "https://example.com/image1.jpg" ] }, "alt": { "type": "string", "title": "Alt text", "description": "Alt text of the image", "examples": [ "https://example.com/image1.jpg" ] }, "caption": { "type": "string", "format": "markdown", "title": "Caption", "description": "The caption of the image", "examples": [ "Caption Image" ] } }, "additionalProperties": false, "required": [ "src" ] }, "minItems": 1, "maxItems": 10 }, "layout": { "type": "string", "title": "Layout", "description": "The layout of the gallery images", "enum": [ "stack", "smallTiles", "largeTiles" ], "default": "smallTiles" }, "aspectRatio": { "type": "string", "title": "Aspect Ratio", "description": "The aspect ratio of the gallery images", "enum": [ "unset", "square", "wide", "landscape" ], "default": "unset" }, "lightbox": { "type": "boolean", "title": "Lightbox", "description": "Display images in a lightbox gallery", "default": false } }, "additionalProperties": false, "required": [ "images" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/headline.schema.json", "title": "Headline", "description": "Component used for headlines", "type": "object", "properties": { "text": { "type": "string", "title": "Text", "description": "Text content of headline", "format": "markdown" }, "sub": { "type": "string", "title": "Sub", "description": "Subheadline content", "format": "markdown" }, "switchOrder": { "type": "boolean", "title": "Switch order?", "description": "Switch order of headline and subheadline", "default": false }, "align": { "type": "string", "title": "Section alignment", "enum": [ "left", "center", "right" ] }, "level": { "type": "string", "title": "Level", "description": "Level of headline to use", "enum": [ "h1", "h2", "h3", "h4", "p" ], "default": "h2" }, "style": { "type": "string", "title": "Style", "description": "Style of headline to show", "enum": [ "h1", "h2", "h3", "h4", "p" ], "default": "h2" }, "spaceAfter": { "type": "string", "title": "Space after?", "description": "Whether to display space after headline", "enum": [ "minimum", "small", "large" ], "default": "small" }, "className": { "type": "string", "title": "Class Name", "description": "Set a custom class name" }, "id": { "type": "string", "title": "ID", "description": "Set a custom id attribute" } }, "additionalProperties": false, "required": [ "level", "text" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/hero.schema.json", "title": "Hero", "description": "Hero component for displaying a prominent visual section with headline, subheadline, text, and call-to-action buttons.", "type": "object", "properties": { "headline": { "title": "Headline", "description": "Headline for the visual", "type": "string", "format": "markdown" }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the module headline", "type": "string", "format": "markdown" }, "text": { "title": "Module Text", "description": "Info text for the module element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "height": { "title": "Height", "type": "string", "enum": [ "small", "default", "fullImage", "fullScreen" ], "default": "default" }, "textbox": { "type": "boolean", "title": "Textbox", "default": true, "description": "Toggle wether you want your text to be displayed within in box" }, "mobileTextBelow": { "type": "boolean", "title": "Mobile Text Below", "description": "On mobile devices, display the text below the image", "default": true }, "invertText": { "type": "boolean", "title": "Invert Text", "description": "Invert the text color for better contrast against the background", "default": false }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "skipButton": { "type": "boolean", "title": "Skip Button", "description": "Add a skip button to the hero module", "default": false }, "overlay": { "title": "Grid layer", "description": "Enable grid layer", "type": "boolean", "default": false }, "image": { "title": "Background image", "description": "Sources of background images for different screen sizes", "type": "object", "required": [ "srcMobile" ], "properties": { "srcMobile": { "title": "Mobile image source", "description": "Background image source for small screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/640/270" ] }, "srcTablet": { "title": "Tablet image source", "description": "Background image source for medium screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/1280/540" ] }, "srcDesktop": { "title": "Desktop image source", "description": "Background image source for large screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/1920/810" ] }, "src": { "title": "Optional source", "description": "Override for img tag of picture element, if needed", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/640/270" ] }, "indent": { "title": "Image indent", "description": "Choose to indent the image horizontally on small screens", "type": "string", "enum": [ "none", "left", "right" ], "default": "none" }, "alt": { "title": "Alt text", "description": "Alt text to display for picture", "type": "string" } }, "additionalProperties": false }, "textPosition": { "title": "Module aligment", "description": "Choose the alginment of the module content", "enum": [ "center", "below", "offset", "left", "right", "corner", "bottom" ], "type": "string", "default": "left" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/html.schema.json", "title": "Html", "description": "Display raw HTML.", "type": "object", "properties": { "html": { "title": "HTML string", "type": "string", "examples": [ "

Hello World

" ] }, "consent": { "title": "Show HTML after consent", "type": "boolean", "default": false }, "consentText": { "type": "string" }, "consentButtonLabel": { "type": "string" }, "consentBackgroundImage": { "type": "string", "format": "image" }, "consentAspectRatio": { "type": "string", "enum": [ "16:9", "16:10", "4:3", "1:1" ], "default": "16:9" }, "inverted": { "title": "Inverted", "description": "Invert the colors of the HTML", "type": "boolean", "default": false }, "className": { "title": "Additional Classes", "description": "Add additional css classes that should be applied to the element", "type": "string" }, "component": { "title": "`ks-component` attribute", "description": "Optional custom component identifier", "type": "string" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/image-story.schema.json", "title": "Image Story", "description": "Image story component for displaying an image alongside text content with customizable layout and buttons.", "type": "object", "properties": { "headline": { "title": "Module Headline", "description": "Headline for the module element", "type": "string", "format": "markdown", "examples": [ "Headline" ] }, "largeHeadline": { "type": "boolean", "title": "Large Headline", "description": "Make the headline larger", "default": false }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the module headline", "type": "string", "format": "markdown", "examples": [ "Subheadline" ] }, "text": { "title": "Module Text", "description": "Info text for the module element", "type": "string", "format": "markdown" }, "layout": { "type": "string", "title": "Layout", "description": "Choose the layout for the component", "enum": [ "textLeft", "imageLeft" ], "default": "imageLeft" }, "padding": { "type": "boolean", "title": "Padding", "default": false, "description": "Give the component padding" }, "buttons": { "title": "Buttons", "description": "Buttons of the Button Group", "type": "array", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/button.schema.json", "title": "Button", "description": "Component used for user interaction", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" }, "variant": { "type": "string", "title": "Variant", "description": "Variant of button to be used", "enum": [ "primary", "secondary", "tertiary" ], "default": "secondary" }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "size": { "type": "string", "title": "Size", "description": "Size of button to use", "enum": [ "small", "medium", "large" ], "default": "medium" }, "disabled": { "type": "boolean", "title": "Disabled?", "description": "Whether the button should be disabled", "default": false }, "type": { "type": "string", "title": "Button Type", "enum": [ "button", "submit", "reset" ] } }, "additionalProperties": false, "required": [ "label" ] } }, "image": { "title": "Image", "description": "Image displayed alongside the text content", "type": "object", "properties": { "src": { "title": "Image source", "description": "Image source to use", "type": "string", "format": "image" }, "aspectRatio": { "type": "string", "title": "Aspect Ratio", "description": "The aspect ratio of the image", "enum": [ "unset", "square", "wide", "landscape" ], "default": "unset" }, "alt": { "title": "Alt text", "description": "Image description", "type": "string" }, "vAlign": { "title": "Image vertical alignment", "description": "Select a vertical alignment for the image", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "top" } }, "additionalProperties": false }, "textAlign": { "title": "Text Alignment", "description": "Choose the alginment of the text", "enum": [ "left", "center" ], "type": "string", "default": "left" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/image-text.schema.json", "title": "Image Text", "description": "Component used to display an image beside or above/below a text block", "type": "object", "properties": { "text": { "type": "string", "format": "markdown", "title": "Text", "description": "Text content to display beside the image", "examples": [ "This is a sample text" ] }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "image": { "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "Image Source", "description": "URL of the image to display", "examples": [ "http://example.com/image.jpg" ] }, "alt": { "type": "string", "title": "Alt Text", "description": "Alt text of the image", "examples": [ "http://example.com/image.jpg" ] } }, "additionalProperties": false }, "layout": { "type": "string", "enum": [ "above", "below", "beside-right", "beside-left" ], "title": "Layout", "description": "Position of the image relative to the text", "default": "above" } }, "required": [ "text", "image", "layout" ], "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/logos.schema.json", "title": "Logos", "description": "Component used to display a set of logos", "type": "object", "properties": { "tagline": { "type": "string", "title": "Logo Tagline", "description": "A short tagline atop the logos", "examples": [ "Our Customers" ] }, "logo": { "type": "array", "title": "Logos", "description": "The logos to display", "items": { "title": "Logo", "description": "Logo entry for Logos component", "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "URL", "description": "The URL of the logo image", "examples": [ "img/logos/logoipsum-344.svg", "img/logos/logoipsum-347.svg", "img/logos/logoipsum-352.svg", "img/logos/logoipsum-356.svg", "img/logos/logoipsum-358.svg", "img/logos/logoipsum-369.svg" ] }, "alt": { "type": "string", "title": "Caption", "description": "The alt text of the logo", "examples": [ "Logo 1" ] } }, "additionalProperties": false, "required": [ "src" ] }, "minItems": 1 }, "align": { "type": "string", "title": "Alignment", "description": "The alignment of the logo layout", "enum": [ "left", "center" ], "default": "center" }, "logosPerRow": { "type": "integer", "title": "Logos Per Row", "description": "The amount of logos to display per row", "minimum": 2, "maximum": 8, "examples": [ 5 ] }, "cta": { "type": "object", "title": "Call to Action", "description": "The call to action", "properties": { "toggle": { "type": "boolean", "default": false, "title": "CTA Toggle", "description": "Activate/disable the CTA" }, "text": { "type": "string", "title": "Call to Action Text", "description": "A short CTA text", "examples": [ "Explore the success stories of our valued customers and discover more about their journey." ] }, "link": { "type": "string", "title": "Call to Action Link", "description": "The CTA link", "default": "#", "format": "uri" }, "label": { "type": "string", "title": "Link Label", "description": "The text label displayed on the link", "examples": [ "See all customers" ] }, "style": { "type": "string", "enum": [ "button", "text" ], "default": "text" } }, "additionalProperties": false, "required": [ "style", "link", "label" ] } }, "additionalProperties": false, "required": [ "logos" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/mosaic.schema.json", "title": "Mosaic", "description": "Mosaic component for displaying a collection of tiles in various layouts.", "type": "object", "properties": { "layout": { "title": "Layout", "description": "Layout of the mosaic component", "type": "string", "enum": [ "alternate", "textLeft", "textRight" ], "default": "alternate" }, "largeHeadlines": { "type": "boolean", "title": "Large Headlines", "description": "Make the headlines larger", "default": false }, "tile": { "type": "array", "title": "Tiles", "description": "The tiles to display", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/tile.schema.json", "title": "Tile", "type": "object", "properties": { "headline": { "title": "Headline", "description": "Headline for the tile", "type": "string", "format": "markdown" }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the tile headline", "type": "string", "format": "markdown" }, "text": { "title": "Module Text", "description": "Text for tile", "type": "string", "format": "markdown" }, "image": { "type": "object", "properties": { "src": { "title": "Source", "description": "Picture source", "type": "string", "format": "image", "examples": [ "img/close-up-young-business-team-working.png" ] }, "alt": { "title": "Alt text", "description": "Alt text to display for picture", "type": "string" } }, "additionalProperties": false }, "button": { "type": "object", "properties": { "toggle": { "title": "Button Toggle", "description": "Toggle wether the Button is displayed or not", "type": "boolean", "default": true }, "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" } }, "additionalProperties": false }, "backgroundColor": { "title": "Background color", "description": "Background color for the whole element", "type": "string", "format": "color" }, "backgroundImage": { "title": "Background image", "description": "Background image for the whole element", "type": "string", "format": "image" }, "textColor": { "title": "Text color", "description": "Overwrite the color to use for the text content", "type": "string", "format": "color" } }, "additionalProperties": false, "required": [ "headline", "image" ] }, "minItems": 1, "maxItems": 20 } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/slider.schema.json", "title": "Slider", "description": "Slider component for displaying a carousel of content components.", "type": "object", "properties": { "autoplay": { "title": "Auto play", "description": "Automatically move to next slide after 4 seconds without user interaction", "type": "boolean", "default": false }, "nav": { "title": "Show Navigation", "description": "Add bullet navigation", "type": "boolean", "examples": [ true ] }, "teaseNeighbours": { "title": "Tease Neighbour Slides", "type": "boolean", "default": false }, "equalHeight": { "title": "Equalize slides heights", "type": "boolean", "default": true }, "gap": { "title": "Gap", "description": "Size of the gap added between slides in pixels", "type": "number", "default": 0 }, "arrows": { "title": "Show Arrows", "description": "Add arrows on the left and right to navigate to next or previous slide", "type": "boolean", "examples": [ true ] }, "variant": { "title": "Type", "description": "Type of the movement", "type": "string", "enum": [ "slider", "carousel" ], "default": "carousel" }, "className": { "title": "Class", "description": "Additional css classes attached to the wrapping element", "type": "string" }, "components": { "type": "array", "title": "Content", "description": "Allowed components for content", "items": { "anyOf": [ { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/cta.schema.json", "title": "Cta", "description": "Call to Action (CTA) component for prompting users to take specific actions on a website.", "type": "object", "properties": { "headline": { "title": "Component Headline", "description": "Headline for the Component element", "type": "string", "format": "markdown", "examples": [ "Headline" ] }, "sub": { "title": "Component Subheadline", "description": "Subheadline below the component headline", "type": "string", "format": "markdown", "examples": [ "Subheadline" ] }, "text": { "title": "Component Text", "description": "Info text for the component element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "inverted": { "title": "Inverted", "description": "Invert the text and button colors for use on dark backgrounds", "default": false, "type": "boolean" }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "backgroundColor": { "title": "Background color", "description": "Background color for the whole element", "type": "string", "format": "color" }, "backgroundImage": { "title": "Background image", "description": "Background image for the whole element", "type": "string", "format": "image" }, "image": { "title": "Image", "description": "Image displayed alongside the text content", "type": "object", "properties": { "src": { "title": "Image source", "description": "Image source to use", "type": "string", "format": "image" }, "padding": { "title": "Padding", "description": "Toggle padding of the image", "type": "boolean", "default": true }, "alt": { "title": "Alt text", "description": "Image description", "type": "string" }, "align": { "title": "Vertical alignment of the image", "description": "Select a vertical alignment for the image", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "center" } }, "additionalProperties": false }, "order": { "title": "Order", "description": "Choose what comes first on mobile and desktop: image or text", "type": "object", "properties": { "mobileImageLast": { "title": "Mobile image after text", "description": "Switch to displaying the image after the text on mobile", "type": "boolean", "default": false }, "desktopImageLast": { "title": "Desktop image after text", "description": "Switch to displaying the image after the text on desktop", "type": "boolean", "default": true } }, "additionalProperties": false }, "textAlign": { "title": "Text Alignment", "description": "Choose the alginment of the text", "enum": [ "left", "center" ], "type": "string", "default": "left" }, "align": { "title": "Vertical alignment of the content", "description": "Select a vertical alignment for the content", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "center" }, "padding": { "title": "Padding", "description": "Toggle padding of the content", "type": "boolean", "default": false } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/features.schema.json", "title": "Features", "description": "Component used to display a set of features", "type": "object", "properties": { "layout": { "type": "string", "title": "Layout", "description": "The layout variant to use for the features", "enum": [ "largeTiles", "smallTiles", "list" ], "default": "largeTiles" }, "style": { "type": "string", "enum": [ "intext", "stack", "centered", "besideLarge", "besideSmall" ], "default": "stack" }, "ctas": { "type": "object", "properties": { "toggle": { "type": "boolean", "default": true, "title": "CTA Toggle", "description": "Activate/disable the CTAs" }, "style": { "type": "string", "enum": [ "button", "link", "intext" ], "default": "link" } }, "additionalProperties": false }, "feature": { "type": "array", "title": "Features", "description": "The features to display", "items": { "type": "object", "title": "Feature", "properties": { "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "The icon for the feature", "examples": [ "person" ] }, "title": { "type": "string", "title": "Title", "description": "The title of the feature", "examples": [ "Feature 1" ] }, "text": { "type": "string", "title": "Text", "description": "The description of the feature", "format": "markdown", "examples": [ "This is a feature" ] }, "cta": { "type": "object", "properties": { "url": { "type": "string", "title": "Call to Action url", "description": "The CTA url", "default": "#", "format": "uri" }, "label": { "type": "string", "title": "Link Label", "description": "The text label displayed on the link", "default": "See more", "examples": [ "See all our partners" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Icon for the link style of the cta", "examples": [ "arrow-right" ], "default": "arrow-right" } }, "additionalProperties": false } }, "additionalProperties": false }, "minItems": 1, "maxItems": 8 } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/gallery.schema.json", "title": "Gallery", "description": "Component used to display a gallery of images", "type": "object", "properties": { "images": { "type": "array", "title": "Images", "description": "The images to display in the gallery", "items": { "type": "object", "properties": { "src": { "type": "string", "title": "src", "format": "image", "description": "The source of the image", "examples": [ "https://example.com/image1.jpg" ] }, "alt": { "type": "string", "title": "Alt text", "description": "Alt text of the image", "examples": [ "https://example.com/image1.jpg" ] }, "caption": { "type": "string", "format": "markdown", "title": "Caption", "description": "The caption of the image", "examples": [ "Caption Image" ] } }, "additionalProperties": false, "required": [ "src" ] }, "minItems": 1, "maxItems": 10 }, "layout": { "type": "string", "title": "Layout", "description": "The layout of the gallery images", "enum": [ "stack", "smallTiles", "largeTiles" ], "default": "smallTiles" }, "aspectRatio": { "type": "string", "title": "Aspect Ratio", "description": "The aspect ratio of the gallery images", "enum": [ "unset", "square", "wide", "landscape" ], "default": "unset" }, "lightbox": { "type": "boolean", "title": "Lightbox", "description": "Display images in a lightbox gallery", "default": false } }, "additionalProperties": false, "required": [ "images" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/hero.schema.json", "title": "Hero", "description": "Hero component for displaying a prominent visual section with headline, subheadline, text, and call-to-action buttons.", "type": "object", "properties": { "headline": { "title": "Headline", "description": "Headline for the visual", "type": "string", "format": "markdown" }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the module headline", "type": "string", "format": "markdown" }, "text": { "title": "Module Text", "description": "Info text for the module element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "height": { "title": "Height", "type": "string", "enum": [ "small", "default", "fullImage", "fullScreen" ], "default": "default" }, "textbox": { "type": "boolean", "title": "Textbox", "default": true, "description": "Toggle wether you want your text to be displayed within in box" }, "mobileTextBelow": { "type": "boolean", "title": "Mobile Text Below", "description": "On mobile devices, display the text below the image", "default": true }, "invertText": { "type": "boolean", "title": "Invert Text", "description": "Invert the text color for better contrast against the background", "default": false }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "skipButton": { "type": "boolean", "title": "Skip Button", "description": "Add a skip button to the hero module", "default": false }, "overlay": { "title": "Grid layer", "description": "Enable grid layer", "type": "boolean", "default": false }, "image": { "title": "Background image", "description": "Sources of background images for different screen sizes", "type": "object", "required": [ "srcMobile" ], "properties": { "srcMobile": { "title": "Mobile image source", "description": "Background image source for small screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/640/270" ] }, "srcTablet": { "title": "Tablet image source", "description": "Background image source for medium screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/1280/540" ] }, "srcDesktop": { "title": "Desktop image source", "description": "Background image source for large screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/1920/810" ] }, "src": { "title": "Optional source", "description": "Override for img tag of picture element, if needed", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/640/270" ] }, "indent": { "title": "Image indent", "description": "Choose to indent the image horizontally on small screens", "type": "string", "enum": [ "none", "left", "right" ], "default": "none" }, "alt": { "title": "Alt text", "description": "Alt text to display for picture", "type": "string" } }, "additionalProperties": false }, "textPosition": { "title": "Module aligment", "description": "Choose the alginment of the module content", "enum": [ "center", "below", "offset", "left", "right", "corner", "bottom" ], "type": "string", "default": "left" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/image-text.schema.json", "title": "Image Text", "description": "Component used to display an image beside or above/below a text block", "type": "object", "properties": { "text": { "type": "string", "format": "markdown", "title": "Text", "description": "Text content to display beside the image", "examples": [ "This is a sample text" ] }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "image": { "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "Image Source", "description": "URL of the image to display", "examples": [ "http://example.com/image.jpg" ] }, "alt": { "type": "string", "title": "Alt Text", "description": "Alt text of the image", "examples": [ "http://example.com/image.jpg" ] } }, "additionalProperties": false }, "layout": { "type": "string", "enum": [ "above", "below", "beside-right", "beside-left" ], "title": "Layout", "description": "Position of the image relative to the text", "default": "above" } }, "required": [ "text", "image", "layout" ], "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/logos.schema.json", "title": "Logos", "description": "Component used to display a set of logos", "type": "object", "properties": { "tagline": { "type": "string", "title": "Logo Tagline", "description": "A short tagline atop the logos", "examples": [ "Our Customers" ] }, "logo": { "type": "array", "title": "Logos", "description": "The logos to display", "items": { "title": "Logo", "description": "Logo entry for Logos component", "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "URL", "description": "The URL of the logo image", "examples": [ "img/logos/logoipsum-344.svg", "img/logos/logoipsum-347.svg", "img/logos/logoipsum-352.svg", "img/logos/logoipsum-356.svg", "img/logos/logoipsum-358.svg", "img/logos/logoipsum-369.svg" ] }, "alt": { "type": "string", "title": "Caption", "description": "The alt text of the logo", "examples": [ "Logo 1" ] } }, "additionalProperties": false, "required": [ "src" ] }, "minItems": 1 }, "align": { "type": "string", "title": "Alignment", "description": "The alignment of the logo layout", "enum": [ "left", "center" ], "default": "center" }, "logosPerRow": { "type": "integer", "title": "Logos Per Row", "description": "The amount of logos to display per row", "minimum": 2, "maximum": 8, "examples": [ 5 ] }, "cta": { "type": "object", "title": "Call to Action", "description": "The call to action", "properties": { "toggle": { "type": "boolean", "default": false, "title": "CTA Toggle", "description": "Activate/disable the CTA" }, "text": { "type": "string", "title": "Call to Action Text", "description": "A short CTA text", "examples": [ "Explore the success stories of our valued customers and discover more about their journey." ] }, "link": { "type": "string", "title": "Call to Action Link", "description": "The CTA link", "default": "#", "format": "uri" }, "label": { "type": "string", "title": "Link Label", "description": "The text label displayed on the link", "examples": [ "See all customers" ] }, "style": { "type": "string", "enum": [ "button", "text" ], "default": "text" } }, "additionalProperties": false, "required": [ "style", "link", "label" ] } }, "additionalProperties": false, "required": [ "logos" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/stats.schema.json", "title": "Stats", "description": "Component used to display stats with a number upcounter", "type": "object", "properties": { "align": { "title": "Align", "description": "Alignment of the stats content", "type": "string", "enum": [ "left", "center" ], "default": "center" }, "stat": { "title": "Stats", "type": "array", "description": "The stats to display with a number upcounter", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/stat.schema.json", "title": "Stat", "description": "Stat entry of Stats component", "type": "object", "properties": { "number": { "title": "Number", "description": "The number of the stat", "type": "string", "examples": [ "1", "5x", "2", "40%", "bis zu 100" ] }, "description": { "title": "Description", "description": "Optional description of the stat", "type": "string", "format": "markdown" }, "title": { "title": "Title", "description": "Title of the stat", "type": "string", "format": "markdown", "examples": [ "Stat 1", "Stat 2", "Stat 3", "Stat 4" ] }, "icon": { "title": "Icon", "description": "Optional icon of the stat", "type": "string", "format": "icon", "examples": [ "person", "home", "map" ] } }, "additionalProperties": false, "required": [ "number", "label" ], "examples": [ { "number": 1, "label": "Stat 1" }, { "number": 2, "label": "Stat 2" }, { "number": 3, "label": "Stat 3" }, { "value": 4, "label": "Stat 4" } ] }, "minItems": 1, "maxItems": 4 } }, "additionalProperties": false, "required": [ "stats" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/teaser-card.schema.json", "title": "Teaser Card", "description": "Component used to tease content", "type": "object", "properties": { "headline": { "type": "string", "title": "Headline", "description": "Headline for the teaser card", "format": "markdown" }, "text": { "type": "string", "title": "Text", "description": "Body text for the teaser card", "format": "markdown" }, "label": { "type": "string", "title": "Label", "description": "Label for the Teaser Card" }, "layout": { "type": "string", "enum": [ "stack", "row", "compact" ], "description": "Layout for the Teaser Card", "default": "stack" }, "centered": { "type": "boolean", "title": "Centered", "description": "Whether the Teaser Card is centered", "default": false }, "url": { "type": "string", "title": "Url", "description": "Url that should be linked", "format": "uri" }, "button": { "type": "object", "properties": { "label": { "title": "Label", "type": "string", "description": "Label of the button. Still A11Y relevant when the button is hidden." }, "chevron": { "title": "Icon", "description": "Toggle arrow icon", "type": "boolean", "default": false }, "hidden": { "type": "boolean", "title": "Display Button", "description": "Toggle wether you want the card to have a visible button or not", "default": false } }, "required": [ "label" ], "additionalProperties": false }, "image": { "type": "string", "title": "Image", "description": "Image to display as cover", "format": "image" }, "imageAlt": { "type": "string", "title": "Image Alt", "description": "Alternative text for the image, used for accessibility" }, "imageRatio": { "type": "string", "enum": [ "wide", "landscape", "square", "unset" ], "description": "Aspect ratio of the image", "default": "wide" } }, "additionalProperties": false, "required": [ "topic", "url" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/testimonials.schema.json", "title": "Testimonials", "description": "Display testimonials with an optional image and rating", "type": "object", "properties": { "layout": { "title": "Layout", "description": "The testimonial layout", "type": "string", "enum": [ "slider", "list", "alternating" ], "default": "slider" }, "quoteSigns": { "title": "Style of the quote signs", "description": "The style of the quote signs", "type": "string", "enum": [ "normal", "large", "none" ], "default": "normal" }, "testimonial": { "type": "array", "title": "Testimonials", "description": "Add testimonials featuring an image, a quote, a source and a rating", "items": { "title": "Testimonial", "description": "Testimonial entry of Testimonials component", "type": "object", "properties": { "quote": { "title": "Quote", "description": "The testimonial quote", "type": "string", "format": "markdown", "examples": [ "This product is amazing!" ] }, "name": { "title": "Name", "description": "The name of the quote author", "type": "string", "examples": [ "John Doe" ] }, "title": { "title": "Title", "description": "The title of the quote author", "type": "string" }, "image": { "type": "object", "properties": { "src": { "title": "Source", "description": "The image to display with the testimonial", "type": "string", "format": "image", "examples": [ "https://example.com/image.jpg" ] }, "alt": { "title": "Alt Text", "description": "The alt text of the image file", "type": "string" } }, "additionalProperties": false }, "rating": { "title": "Rating", "description": "The rating of the testimonial, from 1 to 5", "type": "integer", "minimum": 1, "maximum": 5 } }, "additionalProperties": false, "required": [ "quote", "name", "image" ] } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/text.schema.json", "title": "Text", "description": "Component used for displaying text in chapters", "type": "object", "properties": { "text": { "type": "string", "format": "markdown", "title": "Text", "description": "Text", "examples": [ "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." ] }, "layout": { "type": "string", "title": "Layout", "description": "Variant of layout to be used", "enum": [ "singleColumn", "multiColumn" ], "default": "singleColumn" }, "align": { "type": "string", "title": "Alignment", "description": "Alignment of text", "enum": [ "left", "center" ], "default": "left" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false } }, "additionalProperties": false, "required": [ "text" ] } ] } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/split-even.schema.json", "title": "Split Even", "description": "Split even layout component for dividing content into two equal sections.", "type": "object", "properties": { "contentMinWidth": { "title": "Content Minimum Width", "description": "Sets the minimum width for each half of the split layout", "type": "string", "enum": [ "narrow", "medium", "wide" ], "default": "medium" }, "contentGutter": { "title": "Content Gutter", "description": "Sets the space between the content inside the two halves of the split layout", "type": "string", "enum": [ "small", "default", "large", "none" ], "default": "default" }, "mobileReverse": { "title": "Mobile Reverse", "description": "Reverses the order of the sections on mobile devices", "type": "boolean", "default": false }, "verticalAlign": { "title": "Vertical Alignment", "type": "string", "description": "Aligns the content vertically within the sections", "enum": [ "top", "center", "bottom", "sticky" ], "default": "top" }, "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" }, "firstLayout": { "type": "object", "properties": { "layout": { "title": "Layout", "description": "Sets the layout of the first section", "type": "string", "enum": [ "smallTiles", "largeTiles", "list" ], "default": "list" }, "gutter": { "title": "Gutter", "description": "Sets the gutter size for the first section", "type": "string", "enum": [ "none", "small", "default", "large" ], "default": "default" }, "stretchVertically": { "title": "Stretch Vertically", "description": "Whether the first section should stretch vertically to match the height of the second section", "type": "boolean", "default": false } }, "additionalProperties": false }, "secondLayout": { "type": "object", "properties": { "layout": { "title": "Layout", "description": "Sets the layout of the second section", "type": "string", "enum": [ "smallTiles", "largeTiles", "list" ], "default": "list" }, "stretchVertically": { "title": "Stretch Vertically", "description": "Whether the second section should stretch vertically to match the height of the first section", "type": "boolean", "default": false }, "gutter": { "title": "Gutter", "description": "Sets the gutter size for the first section", "type": "string", "enum": [ "none", "small", "default", "large" ], "default": "default" } }, "additionalProperties": false }, "firstComponents": { "type": "array", "title": "First", "description": "Allowed components for the first half of the split layout", "items": { "anyOf": [ { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/blog-teaser.schema.json", "title": "Blog Teaser", "description": "Display a blog teaser with date, tags, headline, teaser text and author", "type": "object", "properties": { "date": { "title": "Date", "description": "The date of the blog post", "type": "string", "format": "date", "examples": [ "12/30/2022" ] }, "tags": { "type": "array", "title": "Tags", "description": "The tags for the blog post", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/blog-tag.schema.json", "title": "Blog Tag", "description": "Tag given to a blog post", "type": "object", "properties": { "entry": { "title": "Entry", "description": "Name of the tag entry", "type": "string" } }, "additionalProperties": false, "required": [ "entry" ] } }, "headline": { "title": "Headline", "description": "The headline of the blog post", "type": "string", "format": "markdown", "examples": [ "This is a blog post headline" ] }, "teaserText": { "title": "Teaser Text", "description": "The teaser text of the blog post", "type": "string", "format": "markdown", "examples": [ "This is a teaser text for the blog post" ] }, "image": { "title": "Image", "description": "The preview image for the blog post", "type": "string", "format": "image", "examples": [ "img/close-up-young-business-team-working.png" ] }, "alt": { "title": "Alt", "description": "The alt text for the preview image", "type": "string", "examples": [ "Image of a business team working" ] }, "link": { "type": "object", "title": "Link", "description": "URL and label for the blog post linked", "properties": { "url": { "title": "URL", "description": "The blog entry URL to link", "type": "string", "format": "uri", "examples": [ "https://example.com" ] }, "text": { "title": "Text", "description": "The text for the link", "type": "string", "default": "Read article", "examples": [ "Read article" ] } }, "additionalProperties": false, "required": [ "url" ] }, "readingTime": { "title": "Reading Time", "description": "Time to read for the blog post", "type": "string", "examples": [ "5 min read" ] }, "author": { "type": "object", "title": "Author", "description": "The author of the blog post", "properties": { "name": { "title": "Name", "description": "The name of the author", "type": "string", "examples": [ "John Doe" ] }, "title": { "title": "Title", "description": "The title of the author", "type": "string", "examples": [ "CEO" ] }, "image": { "title": "Image", "description": "The image URL of the author", "type": "string", "format": "image", "examples": [ "img/people/author-emily.png" ] } }, "additionalProperties": false, "required": [ "name" ] }, "className": { "type": "string" } }, "additionalProperties": false, "required": [ "headline", "teaserText" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/business-card.schema.json", "title": "Business Card", "description": "Business card component representing an individual's or company's contact information and branding.", "type": "object", "properties": { "centered": { "type": "boolean", "title": "Centered", "description": "Whether the business card content is centered.", "default": false }, "image": { "type": "object", "title": "Background Image", "description": "A background or feature image displayed on the business card.", "properties": { "src": { "type": "string", "format": "uri", "description": "URL of the background image shown on the business card." }, "alt": { "type": "string", "description": "Alternative text describing the background image." } }, "required": [ "src" ], "additionalProperties": false }, "logo": { "type": "object", "title": "Company Logo", "description": "The logo of the company or organization displayed on the business card.", "properties": { "src": { "type": "string", "format": "uri", "description": "URL of the company or organization logo." }, "alt": { "type": "string", "description": "Alternative text describing the logo." }, "url": { "type": "string", "format": "uri", "description": "URL to the company's website or landing page." } }, "required": [ "src" ], "additionalProperties": false }, "topic": { "type": "string", "title": "Topic", "description": "A headline or main topic for the business card, such as a job title or department." }, "address": { "type": "string", "title": "Address", "description": "The physical or mailing address displayed on the business card." }, "avatar": { "type": "object", "title": "Avatar", "description": "A profile image or avatar representing the person on the business card.", "properties": { "src": { "type": "string", "format": "uri", "description": "URL of the person's avatar or profile image." }, "alt": { "type": "string", "description": "Alternative text describing the avatar." } }, "required": [ "src" ], "additionalProperties": false }, "contact": { "type": "array", "title": "Contact Information", "description": "A list of contact methods for the person or business (e.g., email, phone, website).", "items": { "type": "object", "properties": { "label": { "type": "string", "description": "Label describing the contact method (e.g., 'Email', 'Phone')." }, "icon": { "type": "string", "description": "Icon name or identifier representing the contact method." }, "url": { "type": "string", "format": "uri", "description": "URL or link for the contact method, if applicable." } }, "required": [ "label" ], "additionalProperties": false } }, "buttons": { "type": "array", "title": "Buttons", "description": "A list of action buttons shown on the business card.", "items": { "type": "object", "properties": { "label": { "type": "string", "description": "Text label for the link." }, "url": { "type": "string", "format": "uri", "description": "URL the link points to." } }, "required": [ "label", "url" ], "additionalProperties": false } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/button.schema.json", "title": "Button", "description": "Component used for user interaction", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" }, "variant": { "type": "string", "title": "Variant", "description": "Variant of button to be used", "enum": [ "primary", "secondary", "tertiary" ], "default": "secondary" }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "size": { "type": "string", "title": "Size", "description": "Size of button to use", "enum": [ "small", "medium", "large" ], "default": "medium" }, "disabled": { "type": "boolean", "title": "Disabled?", "description": "Whether the button should be disabled", "default": false }, "type": { "type": "string", "title": "Button Type", "enum": [ "button", "submit", "reset" ] } }, "additionalProperties": false, "required": [ "label" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/contact.schema.json", "title": "Contact", "description": "Component used for user interaction", "type": "object", "properties": { "image": { "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 Isabella Doe" ] }, "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 }, "title": { "title": "Title", "description": "Name, company name, etc.", "type": "string", "examples": [ "Isabella Doe" ] }, "subtitle": { "title": "Subtitle", "description": "Position, profession, department, location, etc.", "type": "string", "examples": [ "CEO at Company" ] }, "links": { "type": "array", "items": { "type": "object", "properties": { "icon": { "type": "string", "format": "icon" }, "label": { "type": "string" }, "url": { "type": "string", "format": "uri" }, "newTab": { "title": "Open link in new Tab", "description": "Open link in new Tab", "type": "boolean", "default": false }, "ariaLabel": { "title": "Aria Label", "description": "Aria label for the link", "type": "string", "examples": [ "Link to Isabella Doe's social media profile" ] } }, "additionalProperties": false }, "examples": [ [ { "icon": "phone", "label": "0228 / 688 966 20", "url": "tel:+4922868896620" }, { "icon": "email", "label": "mail@example.com", "url": "mailto:mail@example.com" } ] ] }, "copy": { "title": "Copy text", "type": "string" }, "className": { "title": "Class", "description": "Additional css classes attached to the wrapping element", "type": "string" }, "component": { "title": "`ks-component` attribute", "description": "Optional custom component identifier", "type": "string" } }, "additionalProperties": false, "required": [ "name" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/content-nav.schema.json", "title": "Content Nav", "description": "Content navigation component for navigating related topics or sections within content.", "type": "object", "properties": { "image": { "type": "object", "properties": { "src": { "type": "string", "format": "uri", "description": "URL of the image to display in the content nav." }, "alt": { "type": "string", "description": "Alternative text for the image." } }, "required": [ "src" ], "additionalProperties": false }, "topic": { "type": "string", "description": "The topic of the content being navigated." }, "links": { "type": "array", "items": { "type": "object", "properties": { "label": { "type": "string", "description": "The text label for the link." }, "url": { "type": "string", "format": "uri", "description": "The URL the link points to." } }, "required": [ "label", "url" ], "additionalProperties": false } }, "initiallyShown": { "type": "number", "default": 4, "description": "Determines how many links are initially shown in the content nav. If there are more links, a 'Show More' button will be displayed." } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/cta.schema.json", "title": "Cta", "description": "Call to Action (CTA) component for prompting users to take specific actions on a website.", "type": "object", "properties": { "headline": { "title": "Component Headline", "description": "Headline for the Component element", "type": "string", "format": "markdown", "examples": [ "Headline" ] }, "sub": { "title": "Component Subheadline", "description": "Subheadline below the component headline", "type": "string", "format": "markdown", "examples": [ "Subheadline" ] }, "text": { "title": "Component Text", "description": "Info text for the component element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "inverted": { "title": "Inverted", "description": "Invert the text and button colors for use on dark backgrounds", "default": false, "type": "boolean" }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "backgroundColor": { "title": "Background color", "description": "Background color for the whole element", "type": "string", "format": "color" }, "backgroundImage": { "title": "Background image", "description": "Background image for the whole element", "type": "string", "format": "image" }, "image": { "title": "Image", "description": "Image displayed alongside the text content", "type": "object", "properties": { "src": { "title": "Image source", "description": "Image source to use", "type": "string", "format": "image" }, "padding": { "title": "Padding", "description": "Toggle padding of the image", "type": "boolean", "default": true }, "alt": { "title": "Alt text", "description": "Image description", "type": "string" }, "align": { "title": "Vertical alignment of the image", "description": "Select a vertical alignment for the image", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "center" } }, "additionalProperties": false }, "order": { "title": "Order", "description": "Choose what comes first on mobile and desktop: image or text", "type": "object", "properties": { "mobileImageLast": { "title": "Mobile image after text", "description": "Switch to displaying the image after the text on mobile", "type": "boolean", "default": false }, "desktopImageLast": { "title": "Desktop image after text", "description": "Switch to displaying the image after the text on desktop", "type": "boolean", "default": true } }, "additionalProperties": false }, "textAlign": { "title": "Text Alignment", "description": "Choose the alginment of the text", "enum": [ "left", "center" ], "type": "string", "default": "left" }, "align": { "title": "Vertical alignment of the content", "description": "Select a vertical alignment for the content", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "center" }, "padding": { "title": "Padding", "description": "Toggle padding of the content", "type": "boolean", "default": false } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/divider.schema.json", "title": "Divider", "description": "Dividers bring clarity to a layout by grouping and dividing content in close proximity.", "type": "object", "properties": { "variant": { "title": "Style of the divider", "type": "string", "description": "Choose a variant for the divider", "enum": [ "default", "accent" ], "default": "default" }, "className": { "type": "string", "title": "Additional Classes", "description": "Add additional css classes that should be applied to the divider" }, "component": { "title": "`ks-component` attribute", "description": "Optional custom component identifier", "type": "string" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/downloads.schema.json", "title": "Downloads", "description": "Downloads component for providing users with downloadable files and resources.", "type": "object", "properties": { "download": { "type": "array", "items": { "type": "object", "properties": { "name": { "type": "string", "description": "The name of the file" }, "description": { "type": "string", "description": "A brief description of the file" }, "previewImage": { "type": "string", "format": "image", "description": "A URL to an image that previews the file." }, "url": { "type": "string", "format": "uri", "description": "The URL to download the file from." }, "size": { "type": [ "string" ], "description": "The size of the download file" }, "format": { "type": [ "string" ], "description": "The format of the download file" } }, "required": [ "name", "url" ], "additionalProperties": false } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/event-latest-teaser.schema.json", "title": "Event Latest Teaser", "description": "Display an event teaser with date, title and location", "type": "object", "properties": { "date": { "title": "Date", "description": "The date of the event", "type": "string", "format": "date", "examples": [ "12.30.2022" ] }, "calendar": { "type": "object", "title": "Calendar", "description": "Calendar icon to display the date", "properties": { "month": { "title": "Month", "description": "The month of the event", "type": "string", "examples": [ "Dec" ] }, "day": { "title": "Day", "description": "The day of the event", "type": "string", "examples": [ "30" ] } }, "additionalProperties": false }, "title": { "title": "Headline", "description": "Title of the event", "type": "string", "format": "markdown", "examples": [ "This is a event teaser title" ] }, "location": { "title": "Location", "description": "Location of the event", "type": "string", "format": "markdown", "examples": [ "This is a location" ] }, "url": { "title": "URL", "description": "The event entry URL to link", "type": "string", "format": "uri", "examples": [ "https://example.com" ] }, "cta": { "title": "Call to Action", "description": "Text for the call to action", "type": "string", "examples": [ "Show event" ] }, "ariaLabel": { "title": "ARIA Label", "description": "ARIA label for accessibility", "type": "string", "examples": [ "Event teaser for " ] }, "className": { "type": "string" } }, "additionalProperties": false, "required": [ "title", "date", "location" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/event-list-teaser.schema.json", "title": "Event List Teaser", "description": "Display an event teaser with date, title and location", "type": "object", "properties": { "category": { "title": "Category", "description": "Category of the event teaser", "type": "string", "examples": [ "Category" ] }, "title": { "title": "Headline", "description": "Title of the event", "type": "string", "format": "markdown", "examples": [ "This is a event teaser title" ] }, "text": { "title": "Text", "description": "Short teaser text for the event", "type": "string", "format": "markdown", "examples": [ "The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence. The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence." ] }, "date": { "title": "Date", "description": "The date of the event", "type": "string", "format": "date", "examples": [ "FRI, JAN 16" ] }, "time": { "title": "Time", "description": "The time of the event", "type": "string", "examples": [ "10:00" ] }, "location": { "title": "Location", "description": "Location of the event", "type": "object", "properties": { "name": { "type": "string", "title": "Location Name", "description": "Name of the location", "examples": [ "Stadthalle" ] }, "address": { "type": "string", "title": "Address", "description": "Address of the location", "examples": [ "Köln" ] } }, "additionalProperties": false }, "tags": { "title": "Tags", "description": "Tags associated with the event", "type": "array", "items": { "type": "string", "examples": [ "AI", "Technology", "Innovation" ] }, "default": [ "Topic 1", "Topic 2" ] }, "image": { "title": "Image", "description": "Image to display in the teaser", "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "Image Source", "description": "URL of the image to display", "examples": [ "https://picsum.photos/seed/flower/800/600" ] }, "alt": { "type": "string", "title": "Alt Text", "description": "Alt text of the image", "examples": [ "This is an image of a flower" ] } }, "additionalProperties": false }, "url": { "title": "URL", "description": "The event entry URL to link", "type": "string", "format": "uri", "examples": [ "https://example.com" ] }, "ctaText": { "title": "Call to Action", "description": "Text for the call to action", "type": "string", "examples": [ "Show event" ] }, "ariaLabel": { "title": "ARIA Label", "description": "ARIA label for accessibility", "type": "string" }, "className": { "type": "string" } }, "additionalProperties": false, "required": [ "title", "date", "location" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/faq.schema.json", "title": "Faq", "description": "Component used to display a Faq section", "type": "object", "properties": { "questions": { "type": "array", "title": "Questions", "description": "The questions and answers in the Faq section", "items": { "title": "Question", "type": "object", "properties": { "question": { "type": "string", "format": "markdown", "title": "Question", "description": "The question", "examples": [ "What is the product made of?" ] }, "answer": { "type": "string", "format": "markdown", "title": "Answer", "description": "The answer to the question", "examples": [ "The product is made of high-quality materials" ] } }, "additionalProperties": false, "required": [ "question" ] }, "minItems": 1 } }, "additionalProperties": false, "required": [ "questions" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/features.schema.json", "title": "Features", "description": "Component used to display a set of features", "type": "object", "properties": { "layout": { "type": "string", "title": "Layout", "description": "The layout variant to use for the features", "enum": [ "largeTiles", "smallTiles", "list" ], "default": "largeTiles" }, "style": { "type": "string", "enum": [ "intext", "stack", "centered", "besideLarge", "besideSmall" ], "default": "stack" }, "ctas": { "type": "object", "properties": { "toggle": { "type": "boolean", "default": true, "title": "CTA Toggle", "description": "Activate/disable the CTAs" }, "style": { "type": "string", "enum": [ "button", "link", "intext" ], "default": "link" } }, "additionalProperties": false }, "feature": { "type": "array", "title": "Features", "description": "The features to display", "items": { "type": "object", "title": "Feature", "properties": { "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "The icon for the feature", "examples": [ "person" ] }, "title": { "type": "string", "title": "Title", "description": "The title of the feature", "examples": [ "Feature 1" ] }, "text": { "type": "string", "title": "Text", "description": "The description of the feature", "format": "markdown", "examples": [ "This is a feature" ] }, "cta": { "type": "object", "properties": { "url": { "type": "string", "title": "Call to Action url", "description": "The CTA url", "default": "#", "format": "uri" }, "label": { "type": "string", "title": "Link Label", "description": "The text label displayed on the link", "default": "See more", "examples": [ "See all our partners" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Icon for the link style of the cta", "examples": [ "arrow-right" ], "default": "arrow-right" } }, "additionalProperties": false } }, "additionalProperties": false }, "minItems": 1, "maxItems": 8 } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/gallery.schema.json", "title": "Gallery", "description": "Component used to display a gallery of images", "type": "object", "properties": { "images": { "type": "array", "title": "Images", "description": "The images to display in the gallery", "items": { "type": "object", "properties": { "src": { "type": "string", "title": "src", "format": "image", "description": "The source of the image", "examples": [ "https://example.com/image1.jpg" ] }, "alt": { "type": "string", "title": "Alt text", "description": "Alt text of the image", "examples": [ "https://example.com/image1.jpg" ] }, "caption": { "type": "string", "format": "markdown", "title": "Caption", "description": "The caption of the image", "examples": [ "Caption Image" ] } }, "additionalProperties": false, "required": [ "src" ] }, "minItems": 1, "maxItems": 10 }, "layout": { "type": "string", "title": "Layout", "description": "The layout of the gallery images", "enum": [ "stack", "smallTiles", "largeTiles" ], "default": "smallTiles" }, "aspectRatio": { "type": "string", "title": "Aspect Ratio", "description": "The aspect ratio of the gallery images", "enum": [ "unset", "square", "wide", "landscape" ], "default": "unset" }, "lightbox": { "type": "boolean", "title": "Lightbox", "description": "Display images in a lightbox gallery", "default": false } }, "additionalProperties": false, "required": [ "images" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/headline.schema.json", "title": "Headline", "description": "Component used for headlines", "type": "object", "properties": { "text": { "type": "string", "title": "Text", "description": "Text content of headline", "format": "markdown" }, "sub": { "type": "string", "title": "Sub", "description": "Subheadline content", "format": "markdown" }, "switchOrder": { "type": "boolean", "title": "Switch order?", "description": "Switch order of headline and subheadline", "default": false }, "align": { "type": "string", "title": "Section alignment", "enum": [ "left", "center", "right" ] }, "level": { "type": "string", "title": "Level", "description": "Level of headline to use", "enum": [ "h1", "h2", "h3", "h4", "p" ], "default": "h2" }, "style": { "type": "string", "title": "Style", "description": "Style of headline to show", "enum": [ "h1", "h2", "h3", "h4", "p" ], "default": "h2" }, "spaceAfter": { "type": "string", "title": "Space after?", "description": "Whether to display space after headline", "enum": [ "minimum", "small", "large" ], "default": "small" }, "className": { "type": "string", "title": "Class Name", "description": "Set a custom class name" }, "id": { "type": "string", "title": "ID", "description": "Set a custom id attribute" } }, "additionalProperties": false, "required": [ "level", "text" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/hero.schema.json", "title": "Hero", "description": "Hero component for displaying a prominent visual section with headline, subheadline, text, and call-to-action buttons.", "type": "object", "properties": { "headline": { "title": "Headline", "description": "Headline for the visual", "type": "string", "format": "markdown" }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the module headline", "type": "string", "format": "markdown" }, "text": { "title": "Module Text", "description": "Info text for the module element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "height": { "title": "Height", "type": "string", "enum": [ "small", "default", "fullImage", "fullScreen" ], "default": "default" }, "textbox": { "type": "boolean", "title": "Textbox", "default": true, "description": "Toggle wether you want your text to be displayed within in box" }, "mobileTextBelow": { "type": "boolean", "title": "Mobile Text Below", "description": "On mobile devices, display the text below the image", "default": true }, "invertText": { "type": "boolean", "title": "Invert Text", "description": "Invert the text color for better contrast against the background", "default": false }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "skipButton": { "type": "boolean", "title": "Skip Button", "description": "Add a skip button to the hero module", "default": false }, "overlay": { "title": "Grid layer", "description": "Enable grid layer", "type": "boolean", "default": false }, "image": { "title": "Background image", "description": "Sources of background images for different screen sizes", "type": "object", "required": [ "srcMobile" ], "properties": { "srcMobile": { "title": "Mobile image source", "description": "Background image source for small screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/640/270" ] }, "srcTablet": { "title": "Tablet image source", "description": "Background image source for medium screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/1280/540" ] }, "srcDesktop": { "title": "Desktop image source", "description": "Background image source for large screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/1920/810" ] }, "src": { "title": "Optional source", "description": "Override for img tag of picture element, if needed", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/640/270" ] }, "indent": { "title": "Image indent", "description": "Choose to indent the image horizontally on small screens", "type": "string", "enum": [ "none", "left", "right" ], "default": "none" }, "alt": { "title": "Alt text", "description": "Alt text to display for picture", "type": "string" } }, "additionalProperties": false }, "textPosition": { "title": "Module aligment", "description": "Choose the alginment of the module content", "enum": [ "center", "below", "offset", "left", "right", "corner", "bottom" ], "type": "string", "default": "left" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/html.schema.json", "title": "Html", "description": "Display raw HTML.", "type": "object", "properties": { "html": { "title": "HTML string", "type": "string", "examples": [ "

Hello World

" ] }, "consent": { "title": "Show HTML after consent", "type": "boolean", "default": false }, "consentText": { "type": "string" }, "consentButtonLabel": { "type": "string" }, "consentBackgroundImage": { "type": "string", "format": "image" }, "consentAspectRatio": { "type": "string", "enum": [ "16:9", "16:10", "4:3", "1:1" ], "default": "16:9" }, "inverted": { "title": "Inverted", "description": "Invert the colors of the HTML", "type": "boolean", "default": false }, "className": { "title": "Additional Classes", "description": "Add additional css classes that should be applied to the element", "type": "string" }, "component": { "title": "`ks-component` attribute", "description": "Optional custom component identifier", "type": "string" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/image-story.schema.json", "title": "Image Story", "description": "Image story component for displaying an image alongside text content with customizable layout and buttons.", "type": "object", "properties": { "headline": { "title": "Module Headline", "description": "Headline for the module element", "type": "string", "format": "markdown", "examples": [ "Headline" ] }, "largeHeadline": { "type": "boolean", "title": "Large Headline", "description": "Make the headline larger", "default": false }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the module headline", "type": "string", "format": "markdown", "examples": [ "Subheadline" ] }, "text": { "title": "Module Text", "description": "Info text for the module element", "type": "string", "format": "markdown" }, "layout": { "type": "string", "title": "Layout", "description": "Choose the layout for the component", "enum": [ "textLeft", "imageLeft" ], "default": "imageLeft" }, "padding": { "type": "boolean", "title": "Padding", "default": false, "description": "Give the component padding" }, "buttons": { "title": "Buttons", "description": "Buttons of the Button Group", "type": "array", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/button.schema.json", "title": "Button", "description": "Component used for user interaction", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" }, "variant": { "type": "string", "title": "Variant", "description": "Variant of button to be used", "enum": [ "primary", "secondary", "tertiary" ], "default": "secondary" }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "size": { "type": "string", "title": "Size", "description": "Size of button to use", "enum": [ "small", "medium", "large" ], "default": "medium" }, "disabled": { "type": "boolean", "title": "Disabled?", "description": "Whether the button should be disabled", "default": false }, "type": { "type": "string", "title": "Button Type", "enum": [ "button", "submit", "reset" ] } }, "additionalProperties": false, "required": [ "label" ] } }, "image": { "title": "Image", "description": "Image displayed alongside the text content", "type": "object", "properties": { "src": { "title": "Image source", "description": "Image source to use", "type": "string", "format": "image" }, "aspectRatio": { "type": "string", "title": "Aspect Ratio", "description": "The aspect ratio of the image", "enum": [ "unset", "square", "wide", "landscape" ], "default": "unset" }, "alt": { "title": "Alt text", "description": "Image description", "type": "string" }, "vAlign": { "title": "Image vertical alignment", "description": "Select a vertical alignment for the image", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "top" } }, "additionalProperties": false }, "textAlign": { "title": "Text Alignment", "description": "Choose the alginment of the text", "enum": [ "left", "center" ], "type": "string", "default": "left" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/image-text.schema.json", "title": "Image Text", "description": "Component used to display an image beside or above/below a text block", "type": "object", "properties": { "text": { "type": "string", "format": "markdown", "title": "Text", "description": "Text content to display beside the image", "examples": [ "This is a sample text" ] }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "image": { "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "Image Source", "description": "URL of the image to display", "examples": [ "http://example.com/image.jpg" ] }, "alt": { "type": "string", "title": "Alt Text", "description": "Alt text of the image", "examples": [ "http://example.com/image.jpg" ] } }, "additionalProperties": false }, "layout": { "type": "string", "enum": [ "above", "below", "beside-right", "beside-left" ], "title": "Layout", "description": "Position of the image relative to the text", "default": "above" } }, "required": [ "text", "image", "layout" ], "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/logos.schema.json", "title": "Logos", "description": "Component used to display a set of logos", "type": "object", "properties": { "tagline": { "type": "string", "title": "Logo Tagline", "description": "A short tagline atop the logos", "examples": [ "Our Customers" ] }, "logo": { "type": "array", "title": "Logos", "description": "The logos to display", "items": { "title": "Logo", "description": "Logo entry for Logos component", "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "URL", "description": "The URL of the logo image", "examples": [ "img/logos/logoipsum-344.svg", "img/logos/logoipsum-347.svg", "img/logos/logoipsum-352.svg", "img/logos/logoipsum-356.svg", "img/logos/logoipsum-358.svg", "img/logos/logoipsum-369.svg" ] }, "alt": { "type": "string", "title": "Caption", "description": "The alt text of the logo", "examples": [ "Logo 1" ] } }, "additionalProperties": false, "required": [ "src" ] }, "minItems": 1 }, "align": { "type": "string", "title": "Alignment", "description": "The alignment of the logo layout", "enum": [ "left", "center" ], "default": "center" }, "logosPerRow": { "type": "integer", "title": "Logos Per Row", "description": "The amount of logos to display per row", "minimum": 2, "maximum": 8, "examples": [ 5 ] }, "cta": { "type": "object", "title": "Call to Action", "description": "The call to action", "properties": { "toggle": { "type": "boolean", "default": false, "title": "CTA Toggle", "description": "Activate/disable the CTA" }, "text": { "type": "string", "title": "Call to Action Text", "description": "A short CTA text", "examples": [ "Explore the success stories of our valued customers and discover more about their journey." ] }, "link": { "type": "string", "title": "Call to Action Link", "description": "The CTA link", "default": "#", "format": "uri" }, "label": { "type": "string", "title": "Link Label", "description": "The text label displayed on the link", "examples": [ "See all customers" ] }, "style": { "type": "string", "enum": [ "button", "text" ], "default": "text" } }, "additionalProperties": false, "required": [ "style", "link", "label" ] } }, "additionalProperties": false, "required": [ "logos" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/mosaic.schema.json", "title": "Mosaic", "description": "Mosaic component for displaying a collection of tiles in various layouts.", "type": "object", "properties": { "layout": { "title": "Layout", "description": "Layout of the mosaic component", "type": "string", "enum": [ "alternate", "textLeft", "textRight" ], "default": "alternate" }, "largeHeadlines": { "type": "boolean", "title": "Large Headlines", "description": "Make the headlines larger", "default": false }, "tile": { "type": "array", "title": "Tiles", "description": "The tiles to display", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/tile.schema.json", "title": "Tile", "type": "object", "properties": { "headline": { "title": "Headline", "description": "Headline for the tile", "type": "string", "format": "markdown" }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the tile headline", "type": "string", "format": "markdown" }, "text": { "title": "Module Text", "description": "Text for tile", "type": "string", "format": "markdown" }, "image": { "type": "object", "properties": { "src": { "title": "Source", "description": "Picture source", "type": "string", "format": "image", "examples": [ "img/close-up-young-business-team-working.png" ] }, "alt": { "title": "Alt text", "description": "Alt text to display for picture", "type": "string" } }, "additionalProperties": false }, "button": { "type": "object", "properties": { "toggle": { "title": "Button Toggle", "description": "Toggle wether the Button is displayed or not", "type": "boolean", "default": true }, "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" } }, "additionalProperties": false }, "backgroundColor": { "title": "Background color", "description": "Background color for the whole element", "type": "string", "format": "color" }, "backgroundImage": { "title": "Background image", "description": "Background image for the whole element", "type": "string", "format": "image" }, "textColor": { "title": "Text color", "description": "Overwrite the color to use for the text content", "type": "string", "format": "color" } }, "additionalProperties": false, "required": [ "headline", "image" ] }, "minItems": 1, "maxItems": 20 } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/slider.schema.json", "title": "Slider", "description": "Slider component for displaying a carousel of content components.", "type": "object", "properties": { "autoplay": { "title": "Auto play", "description": "Automatically move to next slide after 4 seconds without user interaction", "type": "boolean", "default": false }, "nav": { "title": "Show Navigation", "description": "Add bullet navigation", "type": "boolean", "examples": [ true ] }, "teaseNeighbours": { "title": "Tease Neighbour Slides", "type": "boolean", "default": false }, "equalHeight": { "title": "Equalize slides heights", "type": "boolean", "default": true }, "gap": { "title": "Gap", "description": "Size of the gap added between slides in pixels", "type": "number", "default": 0 }, "arrows": { "title": "Show Arrows", "description": "Add arrows on the left and right to navigate to next or previous slide", "type": "boolean", "examples": [ true ] }, "variant": { "title": "Type", "description": "Type of the movement", "type": "string", "enum": [ "slider", "carousel" ], "default": "carousel" }, "className": { "title": "Class", "description": "Additional css classes attached to the wrapping element", "type": "string" }, "components": { "type": "array", "title": "Content", "description": "Allowed components for content", "items": { "anyOf": [ { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/cta.schema.json", "title": "Cta", "description": "Call to Action (CTA) component for prompting users to take specific actions on a website.", "type": "object", "properties": { "headline": { "title": "Component Headline", "description": "Headline for the Component element", "type": "string", "format": "markdown", "examples": [ "Headline" ] }, "sub": { "title": "Component Subheadline", "description": "Subheadline below the component headline", "type": "string", "format": "markdown", "examples": [ "Subheadline" ] }, "text": { "title": "Component Text", "description": "Info text for the component element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "inverted": { "title": "Inverted", "description": "Invert the text and button colors for use on dark backgrounds", "default": false, "type": "boolean" }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "backgroundColor": { "title": "Background color", "description": "Background color for the whole element", "type": "string", "format": "color" }, "backgroundImage": { "title": "Background image", "description": "Background image for the whole element", "type": "string", "format": "image" }, "image": { "title": "Image", "description": "Image displayed alongside the text content", "type": "object", "properties": { "src": { "title": "Image source", "description": "Image source to use", "type": "string", "format": "image" }, "padding": { "title": "Padding", "description": "Toggle padding of the image", "type": "boolean", "default": true }, "alt": { "title": "Alt text", "description": "Image description", "type": "string" }, "align": { "title": "Vertical alignment of the image", "description": "Select a vertical alignment for the image", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "center" } }, "additionalProperties": false }, "order": { "title": "Order", "description": "Choose what comes first on mobile and desktop: image or text", "type": "object", "properties": { "mobileImageLast": { "title": "Mobile image after text", "description": "Switch to displaying the image after the text on mobile", "type": "boolean", "default": false }, "desktopImageLast": { "title": "Desktop image after text", "description": "Switch to displaying the image after the text on desktop", "type": "boolean", "default": true } }, "additionalProperties": false }, "textAlign": { "title": "Text Alignment", "description": "Choose the alginment of the text", "enum": [ "left", "center" ], "type": "string", "default": "left" }, "align": { "title": "Vertical alignment of the content", "description": "Select a vertical alignment for the content", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "center" }, "padding": { "title": "Padding", "description": "Toggle padding of the content", "type": "boolean", "default": false } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/features.schema.json", "title": "Features", "description": "Component used to display a set of features", "type": "object", "properties": { "layout": { "type": "string", "title": "Layout", "description": "The layout variant to use for the features", "enum": [ "largeTiles", "smallTiles", "list" ], "default": "largeTiles" }, "style": { "type": "string", "enum": [ "intext", "stack", "centered", "besideLarge", "besideSmall" ], "default": "stack" }, "ctas": { "type": "object", "properties": { "toggle": { "type": "boolean", "default": true, "title": "CTA Toggle", "description": "Activate/disable the CTAs" }, "style": { "type": "string", "enum": [ "button", "link", "intext" ], "default": "link" } }, "additionalProperties": false }, "feature": { "type": "array", "title": "Features", "description": "The features to display", "items": { "type": "object", "title": "Feature", "properties": { "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "The icon for the feature", "examples": [ "person" ] }, "title": { "type": "string", "title": "Title", "description": "The title of the feature", "examples": [ "Feature 1" ] }, "text": { "type": "string", "title": "Text", "description": "The description of the feature", "format": "markdown", "examples": [ "This is a feature" ] }, "cta": { "type": "object", "properties": { "url": { "type": "string", "title": "Call to Action url", "description": "The CTA url", "default": "#", "format": "uri" }, "label": { "type": "string", "title": "Link Label", "description": "The text label displayed on the link", "default": "See more", "examples": [ "See all our partners" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Icon for the link style of the cta", "examples": [ "arrow-right" ], "default": "arrow-right" } }, "additionalProperties": false } }, "additionalProperties": false }, "minItems": 1, "maxItems": 8 } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/gallery.schema.json", "title": "Gallery", "description": "Component used to display a gallery of images", "type": "object", "properties": { "images": { "type": "array", "title": "Images", "description": "The images to display in the gallery", "items": { "type": "object", "properties": { "src": { "type": "string", "title": "src", "format": "image", "description": "The source of the image", "examples": [ "https://example.com/image1.jpg" ] }, "alt": { "type": "string", "title": "Alt text", "description": "Alt text of the image", "examples": [ "https://example.com/image1.jpg" ] }, "caption": { "type": "string", "format": "markdown", "title": "Caption", "description": "The caption of the image", "examples": [ "Caption Image" ] } }, "additionalProperties": false, "required": [ "src" ] }, "minItems": 1, "maxItems": 10 }, "layout": { "type": "string", "title": "Layout", "description": "The layout of the gallery images", "enum": [ "stack", "smallTiles", "largeTiles" ], "default": "smallTiles" }, "aspectRatio": { "type": "string", "title": "Aspect Ratio", "description": "The aspect ratio of the gallery images", "enum": [ "unset", "square", "wide", "landscape" ], "default": "unset" }, "lightbox": { "type": "boolean", "title": "Lightbox", "description": "Display images in a lightbox gallery", "default": false } }, "additionalProperties": false, "required": [ "images" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/hero.schema.json", "title": "Hero", "description": "Hero component for displaying a prominent visual section with headline, subheadline, text, and call-to-action buttons.", "type": "object", "properties": { "headline": { "title": "Headline", "description": "Headline for the visual", "type": "string", "format": "markdown" }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the module headline", "type": "string", "format": "markdown" }, "text": { "title": "Module Text", "description": "Info text for the module element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "height": { "title": "Height", "type": "string", "enum": [ "small", "default", "fullImage", "fullScreen" ], "default": "default" }, "textbox": { "type": "boolean", "title": "Textbox", "default": true, "description": "Toggle wether you want your text to be displayed within in box" }, "mobileTextBelow": { "type": "boolean", "title": "Mobile Text Below", "description": "On mobile devices, display the text below the image", "default": true }, "invertText": { "type": "boolean", "title": "Invert Text", "description": "Invert the text color for better contrast against the background", "default": false }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "skipButton": { "type": "boolean", "title": "Skip Button", "description": "Add a skip button to the hero module", "default": false }, "overlay": { "title": "Grid layer", "description": "Enable grid layer", "type": "boolean", "default": false }, "image": { "title": "Background image", "description": "Sources of background images for different screen sizes", "type": "object", "required": [ "srcMobile" ], "properties": { "srcMobile": { "title": "Mobile image source", "description": "Background image source for small screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/640/270" ] }, "srcTablet": { "title": "Tablet image source", "description": "Background image source for medium screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/1280/540" ] }, "srcDesktop": { "title": "Desktop image source", "description": "Background image source for large screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/1920/810" ] }, "src": { "title": "Optional source", "description": "Override for img tag of picture element, if needed", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/640/270" ] }, "indent": { "title": "Image indent", "description": "Choose to indent the image horizontally on small screens", "type": "string", "enum": [ "none", "left", "right" ], "default": "none" }, "alt": { "title": "Alt text", "description": "Alt text to display for picture", "type": "string" } }, "additionalProperties": false }, "textPosition": { "title": "Module aligment", "description": "Choose the alginment of the module content", "enum": [ "center", "below", "offset", "left", "right", "corner", "bottom" ], "type": "string", "default": "left" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/image-text.schema.json", "title": "Image Text", "description": "Component used to display an image beside or above/below a text block", "type": "object", "properties": { "text": { "type": "string", "format": "markdown", "title": "Text", "description": "Text content to display beside the image", "examples": [ "This is a sample text" ] }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "image": { "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "Image Source", "description": "URL of the image to display", "examples": [ "http://example.com/image.jpg" ] }, "alt": { "type": "string", "title": "Alt Text", "description": "Alt text of the image", "examples": [ "http://example.com/image.jpg" ] } }, "additionalProperties": false }, "layout": { "type": "string", "enum": [ "above", "below", "beside-right", "beside-left" ], "title": "Layout", "description": "Position of the image relative to the text", "default": "above" } }, "required": [ "text", "image", "layout" ], "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/logos.schema.json", "title": "Logos", "description": "Component used to display a set of logos", "type": "object", "properties": { "tagline": { "type": "string", "title": "Logo Tagline", "description": "A short tagline atop the logos", "examples": [ "Our Customers" ] }, "logo": { "type": "array", "title": "Logos", "description": "The logos to display", "items": { "title": "Logo", "description": "Logo entry for Logos component", "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "URL", "description": "The URL of the logo image", "examples": [ "img/logos/logoipsum-344.svg", "img/logos/logoipsum-347.svg", "img/logos/logoipsum-352.svg", "img/logos/logoipsum-356.svg", "img/logos/logoipsum-358.svg", "img/logos/logoipsum-369.svg" ] }, "alt": { "type": "string", "title": "Caption", "description": "The alt text of the logo", "examples": [ "Logo 1" ] } }, "additionalProperties": false, "required": [ "src" ] }, "minItems": 1 }, "align": { "type": "string", "title": "Alignment", "description": "The alignment of the logo layout", "enum": [ "left", "center" ], "default": "center" }, "logosPerRow": { "type": "integer", "title": "Logos Per Row", "description": "The amount of logos to display per row", "minimum": 2, "maximum": 8, "examples": [ 5 ] }, "cta": { "type": "object", "title": "Call to Action", "description": "The call to action", "properties": { "toggle": { "type": "boolean", "default": false, "title": "CTA Toggle", "description": "Activate/disable the CTA" }, "text": { "type": "string", "title": "Call to Action Text", "description": "A short CTA text", "examples": [ "Explore the success stories of our valued customers and discover more about their journey." ] }, "link": { "type": "string", "title": "Call to Action Link", "description": "The CTA link", "default": "#", "format": "uri" }, "label": { "type": "string", "title": "Link Label", "description": "The text label displayed on the link", "examples": [ "See all customers" ] }, "style": { "type": "string", "enum": [ "button", "text" ], "default": "text" } }, "additionalProperties": false, "required": [ "style", "link", "label" ] } }, "additionalProperties": false, "required": [ "logos" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/stats.schema.json", "title": "Stats", "description": "Component used to display stats with a number upcounter", "type": "object", "properties": { "align": { "title": "Align", "description": "Alignment of the stats content", "type": "string", "enum": [ "left", "center" ], "default": "center" }, "stat": { "title": "Stats", "type": "array", "description": "The stats to display with a number upcounter", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/stat.schema.json", "title": "Stat", "description": "Stat entry of Stats component", "type": "object", "properties": { "number": { "title": "Number", "description": "The number of the stat", "type": "string", "examples": [ "1", "5x", "2", "40%", "bis zu 100" ] }, "description": { "title": "Description", "description": "Optional description of the stat", "type": "string", "format": "markdown" }, "title": { "title": "Title", "description": "Title of the stat", "type": "string", "format": "markdown", "examples": [ "Stat 1", "Stat 2", "Stat 3", "Stat 4" ] }, "icon": { "title": "Icon", "description": "Optional icon of the stat", "type": "string", "format": "icon", "examples": [ "person", "home", "map" ] } }, "additionalProperties": false, "required": [ "number", "label" ], "examples": [ { "number": 1, "label": "Stat 1" }, { "number": 2, "label": "Stat 2" }, { "number": 3, "label": "Stat 3" }, { "value": 4, "label": "Stat 4" } ] }, "minItems": 1, "maxItems": 4 } }, "additionalProperties": false, "required": [ "stats" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/teaser-card.schema.json", "title": "Teaser Card", "description": "Component used to tease content", "type": "object", "properties": { "headline": { "type": "string", "title": "Headline", "description": "Headline for the teaser card", "format": "markdown" }, "text": { "type": "string", "title": "Text", "description": "Body text for the teaser card", "format": "markdown" }, "label": { "type": "string", "title": "Label", "description": "Label for the Teaser Card" }, "layout": { "type": "string", "enum": [ "stack", "row", "compact" ], "description": "Layout for the Teaser Card", "default": "stack" }, "centered": { "type": "boolean", "title": "Centered", "description": "Whether the Teaser Card is centered", "default": false }, "url": { "type": "string", "title": "Url", "description": "Url that should be linked", "format": "uri" }, "button": { "type": "object", "properties": { "label": { "title": "Label", "type": "string", "description": "Label of the button. Still A11Y relevant when the button is hidden." }, "chevron": { "title": "Icon", "description": "Toggle arrow icon", "type": "boolean", "default": false }, "hidden": { "type": "boolean", "title": "Display Button", "description": "Toggle wether you want the card to have a visible button or not", "default": false } }, "required": [ "label" ], "additionalProperties": false }, "image": { "type": "string", "title": "Image", "description": "Image to display as cover", "format": "image" }, "imageAlt": { "type": "string", "title": "Image Alt", "description": "Alternative text for the image, used for accessibility" }, "imageRatio": { "type": "string", "enum": [ "wide", "landscape", "square", "unset" ], "description": "Aspect ratio of the image", "default": "wide" } }, "additionalProperties": false, "required": [ "topic", "url" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/testimonials.schema.json", "title": "Testimonials", "description": "Display testimonials with an optional image and rating", "type": "object", "properties": { "layout": { "title": "Layout", "description": "The testimonial layout", "type": "string", "enum": [ "slider", "list", "alternating" ], "default": "slider" }, "quoteSigns": { "title": "Style of the quote signs", "description": "The style of the quote signs", "type": "string", "enum": [ "normal", "large", "none" ], "default": "normal" }, "testimonial": { "type": "array", "title": "Testimonials", "description": "Add testimonials featuring an image, a quote, a source and a rating", "items": { "title": "Testimonial", "description": "Testimonial entry of Testimonials component", "type": "object", "properties": { "quote": { "title": "Quote", "description": "The testimonial quote", "type": "string", "format": "markdown", "examples": [ "This product is amazing!" ] }, "name": { "title": "Name", "description": "The name of the quote author", "type": "string", "examples": [ "John Doe" ] }, "title": { "title": "Title", "description": "The title of the quote author", "type": "string" }, "image": { "type": "object", "properties": { "src": { "title": "Source", "description": "The image to display with the testimonial", "type": "string", "format": "image", "examples": [ "https://example.com/image.jpg" ] }, "alt": { "title": "Alt Text", "description": "The alt text of the image file", "type": "string" } }, "additionalProperties": false }, "rating": { "title": "Rating", "description": "The rating of the testimonial, from 1 to 5", "type": "integer", "minimum": 1, "maximum": 5 } }, "additionalProperties": false, "required": [ "quote", "name", "image" ] } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/text.schema.json", "title": "Text", "description": "Component used for displaying text in chapters", "type": "object", "properties": { "text": { "type": "string", "format": "markdown", "title": "Text", "description": "Text", "examples": [ "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." ] }, "layout": { "type": "string", "title": "Layout", "description": "Variant of layout to be used", "enum": [ "singleColumn", "multiColumn" ], "default": "singleColumn" }, "align": { "type": "string", "title": "Alignment", "description": "Alignment of text", "enum": [ "left", "center" ], "default": "left" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false } }, "additionalProperties": false, "required": [ "text" ] } ] } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/stats.schema.json", "title": "Stats", "description": "Component used to display stats with a number upcounter", "type": "object", "properties": { "align": { "title": "Align", "description": "Alignment of the stats content", "type": "string", "enum": [ "left", "center" ], "default": "center" }, "stat": { "title": "Stats", "type": "array", "description": "The stats to display with a number upcounter", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/stat.schema.json", "title": "Stat", "description": "Stat entry of Stats component", "type": "object", "properties": { "number": { "title": "Number", "description": "The number of the stat", "type": "string", "examples": [ "1", "5x", "2", "40%", "bis zu 100" ] }, "description": { "title": "Description", "description": "Optional description of the stat", "type": "string", "format": "markdown" }, "title": { "title": "Title", "description": "Title of the stat", "type": "string", "format": "markdown", "examples": [ "Stat 1", "Stat 2", "Stat 3", "Stat 4" ] }, "icon": { "title": "Icon", "description": "Optional icon of the stat", "type": "string", "format": "icon", "examples": [ "person", "home", "map" ] } }, "additionalProperties": false, "required": [ "number", "label" ], "examples": [ { "number": 1, "label": "Stat 1" }, { "number": 2, "label": "Stat 2" }, { "number": 3, "label": "Stat 3" }, { "value": 4, "label": "Stat 4" } ] }, "minItems": 1, "maxItems": 4 } }, "additionalProperties": false, "required": [ "stats" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/teaser-card.schema.json", "title": "Teaser Card", "description": "Component used to tease content", "type": "object", "properties": { "headline": { "type": "string", "title": "Headline", "description": "Headline for the teaser card", "format": "markdown" }, "text": { "type": "string", "title": "Text", "description": "Body text for the teaser card", "format": "markdown" }, "label": { "type": "string", "title": "Label", "description": "Label for the Teaser Card" }, "layout": { "type": "string", "enum": [ "stack", "row", "compact" ], "description": "Layout for the Teaser Card", "default": "stack" }, "centered": { "type": "boolean", "title": "Centered", "description": "Whether the Teaser Card is centered", "default": false }, "url": { "type": "string", "title": "Url", "description": "Url that should be linked", "format": "uri" }, "button": { "type": "object", "properties": { "label": { "title": "Label", "type": "string", "description": "Label of the button. Still A11Y relevant when the button is hidden." }, "chevron": { "title": "Icon", "description": "Toggle arrow icon", "type": "boolean", "default": false }, "hidden": { "type": "boolean", "title": "Display Button", "description": "Toggle wether you want the card to have a visible button or not", "default": false } }, "required": [ "label" ], "additionalProperties": false }, "image": { "type": "string", "title": "Image", "description": "Image to display as cover", "format": "image" }, "imageAlt": { "type": "string", "title": "Image Alt", "description": "Alternative text for the image, used for accessibility" }, "imageRatio": { "type": "string", "enum": [ "wide", "landscape", "square", "unset" ], "description": "Aspect ratio of the image", "default": "wide" } }, "additionalProperties": false, "required": [ "topic", "url" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/testimonials.schema.json", "title": "Testimonials", "description": "Display testimonials with an optional image and rating", "type": "object", "properties": { "layout": { "title": "Layout", "description": "The testimonial layout", "type": "string", "enum": [ "slider", "list", "alternating" ], "default": "slider" }, "quoteSigns": { "title": "Style of the quote signs", "description": "The style of the quote signs", "type": "string", "enum": [ "normal", "large", "none" ], "default": "normal" }, "testimonial": { "type": "array", "title": "Testimonials", "description": "Add testimonials featuring an image, a quote, a source and a rating", "items": { "title": "Testimonial", "description": "Testimonial entry of Testimonials component", "type": "object", "properties": { "quote": { "title": "Quote", "description": "The testimonial quote", "type": "string", "format": "markdown", "examples": [ "This product is amazing!" ] }, "name": { "title": "Name", "description": "The name of the quote author", "type": "string", "examples": [ "John Doe" ] }, "title": { "title": "Title", "description": "The title of the quote author", "type": "string" }, "image": { "type": "object", "properties": { "src": { "title": "Source", "description": "The image to display with the testimonial", "type": "string", "format": "image", "examples": [ "https://example.com/image.jpg" ] }, "alt": { "title": "Alt Text", "description": "The alt text of the image file", "type": "string" } }, "additionalProperties": false }, "rating": { "title": "Rating", "description": "The rating of the testimonial, from 1 to 5", "type": "integer", "minimum": 1, "maximum": 5 } }, "additionalProperties": false, "required": [ "quote", "name", "image" ] } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/text.schema.json", "title": "Text", "description": "Component used for displaying text in chapters", "type": "object", "properties": { "text": { "type": "string", "format": "markdown", "title": "Text", "description": "Text", "examples": [ "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." ] }, "layout": { "type": "string", "title": "Layout", "description": "Variant of layout to be used", "enum": [ "singleColumn", "multiColumn" ], "default": "singleColumn" }, "align": { "type": "string", "title": "Alignment", "description": "Alignment of text", "enum": [ "left", "center" ], "default": "left" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false } }, "additionalProperties": false, "required": [ "text" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/video-curtain.schema.json", "title": "Video Curtain", "description": "Video curtain component for displaying a video background with overlay text and buttons.", "type": "object", "properties": { "headline": { "title": "Headline", "description": "Headline for the visual", "type": "string", "format": "markdown" }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the module headline", "type": "string", "format": "markdown" }, "text": { "title": "Module Text", "description": "Info text for the module element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "overlay": { "title": "Grid layer", "description": "Enable grid layer", "type": "boolean", "default": false }, "video": { "title": "Background video", "description": "Sources of background videos for different screen sizes", "type": "object", "required": [ "srcMobile" ], "properties": { "srcMobile": { "title": "Mobile video source", "description": "Background video source for small screens", "type": "string", "format": "video", "examples": [ "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4" ] }, "srcTablet": { "title": "Tablet video source", "description": "Background video source for medium screens", "type": "string", "format": "video", "examples": [ "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4" ] }, "srcDesktop": { "title": "Desktop video source", "description": "Background video source for large screens", "type": "string", "format": "video", "examples": [ "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4" ] } }, "additionalProperties": false }, "textPosition": { "title": "Module aligment", "description": "Choose the alginment of the module content", "enum": [ "center", "bottom", "left", "right", "corner" ], "type": "string", "default": "center" } }, "additionalProperties": false } ] } }, "secondComponents": { "type": "array", "title": "Second", "description": "Allowed components for the second half of the split layout", "items": { "anyOf": [ { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/blog-teaser.schema.json", "title": "Blog Teaser", "description": "Display a blog teaser with date, tags, headline, teaser text and author", "type": "object", "properties": { "date": { "title": "Date", "description": "The date of the blog post", "type": "string", "format": "date", "examples": [ "12/30/2022" ] }, "tags": { "type": "array", "title": "Tags", "description": "The tags for the blog post", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/blog-tag.schema.json", "title": "Blog Tag", "description": "Tag given to a blog post", "type": "object", "properties": { "entry": { "title": "Entry", "description": "Name of the tag entry", "type": "string" } }, "additionalProperties": false, "required": [ "entry" ] } }, "headline": { "title": "Headline", "description": "The headline of the blog post", "type": "string", "format": "markdown", "examples": [ "This is a blog post headline" ] }, "teaserText": { "title": "Teaser Text", "description": "The teaser text of the blog post", "type": "string", "format": "markdown", "examples": [ "This is a teaser text for the blog post" ] }, "image": { "title": "Image", "description": "The preview image for the blog post", "type": "string", "format": "image", "examples": [ "img/close-up-young-business-team-working.png" ] }, "alt": { "title": "Alt", "description": "The alt text for the preview image", "type": "string", "examples": [ "Image of a business team working" ] }, "link": { "type": "object", "title": "Link", "description": "URL and label for the blog post linked", "properties": { "url": { "title": "URL", "description": "The blog entry URL to link", "type": "string", "format": "uri", "examples": [ "https://example.com" ] }, "text": { "title": "Text", "description": "The text for the link", "type": "string", "default": "Read article", "examples": [ "Read article" ] } }, "additionalProperties": false, "required": [ "url" ] }, "readingTime": { "title": "Reading Time", "description": "Time to read for the blog post", "type": "string", "examples": [ "5 min read" ] }, "author": { "type": "object", "title": "Author", "description": "The author of the blog post", "properties": { "name": { "title": "Name", "description": "The name of the author", "type": "string", "examples": [ "John Doe" ] }, "title": { "title": "Title", "description": "The title of the author", "type": "string", "examples": [ "CEO" ] }, "image": { "title": "Image", "description": "The image URL of the author", "type": "string", "format": "image", "examples": [ "img/people/author-emily.png" ] } }, "additionalProperties": false, "required": [ "name" ] }, "className": { "type": "string" } }, "additionalProperties": false, "required": [ "headline", "teaserText" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/business-card.schema.json", "title": "Business Card", "description": "Business card component representing an individual's or company's contact information and branding.", "type": "object", "properties": { "centered": { "type": "boolean", "title": "Centered", "description": "Whether the business card content is centered.", "default": false }, "image": { "type": "object", "title": "Background Image", "description": "A background or feature image displayed on the business card.", "properties": { "src": { "type": "string", "format": "uri", "description": "URL of the background image shown on the business card." }, "alt": { "type": "string", "description": "Alternative text describing the background image." } }, "required": [ "src" ], "additionalProperties": false }, "logo": { "type": "object", "title": "Company Logo", "description": "The logo of the company or organization displayed on the business card.", "properties": { "src": { "type": "string", "format": "uri", "description": "URL of the company or organization logo." }, "alt": { "type": "string", "description": "Alternative text describing the logo." }, "url": { "type": "string", "format": "uri", "description": "URL to the company's website or landing page." } }, "required": [ "src" ], "additionalProperties": false }, "topic": { "type": "string", "title": "Topic", "description": "A headline or main topic for the business card, such as a job title or department." }, "address": { "type": "string", "title": "Address", "description": "The physical or mailing address displayed on the business card." }, "avatar": { "type": "object", "title": "Avatar", "description": "A profile image or avatar representing the person on the business card.", "properties": { "src": { "type": "string", "format": "uri", "description": "URL of the person's avatar or profile image." }, "alt": { "type": "string", "description": "Alternative text describing the avatar." } }, "required": [ "src" ], "additionalProperties": false }, "contact": { "type": "array", "title": "Contact Information", "description": "A list of contact methods for the person or business (e.g., email, phone, website).", "items": { "type": "object", "properties": { "label": { "type": "string", "description": "Label describing the contact method (e.g., 'Email', 'Phone')." }, "icon": { "type": "string", "description": "Icon name or identifier representing the contact method." }, "url": { "type": "string", "format": "uri", "description": "URL or link for the contact method, if applicable." } }, "required": [ "label" ], "additionalProperties": false } }, "buttons": { "type": "array", "title": "Buttons", "description": "A list of action buttons shown on the business card.", "items": { "type": "object", "properties": { "label": { "type": "string", "description": "Text label for the link." }, "url": { "type": "string", "format": "uri", "description": "URL the link points to." } }, "required": [ "label", "url" ], "additionalProperties": false } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/contact.schema.json", "title": "Contact", "description": "Component used for user interaction", "type": "object", "properties": { "image": { "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 Isabella Doe" ] }, "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 }, "title": { "title": "Title", "description": "Name, company name, etc.", "type": "string", "examples": [ "Isabella Doe" ] }, "subtitle": { "title": "Subtitle", "description": "Position, profession, department, location, etc.", "type": "string", "examples": [ "CEO at Company" ] }, "links": { "type": "array", "items": { "type": "object", "properties": { "icon": { "type": "string", "format": "icon" }, "label": { "type": "string" }, "url": { "type": "string", "format": "uri" }, "newTab": { "title": "Open link in new Tab", "description": "Open link in new Tab", "type": "boolean", "default": false }, "ariaLabel": { "title": "Aria Label", "description": "Aria label for the link", "type": "string", "examples": [ "Link to Isabella Doe's social media profile" ] } }, "additionalProperties": false }, "examples": [ [ { "icon": "phone", "label": "0228 / 688 966 20", "url": "tel:+4922868896620" }, { "icon": "email", "label": "mail@example.com", "url": "mailto:mail@example.com" } ] ] }, "copy": { "title": "Copy text", "type": "string" }, "className": { "title": "Class", "description": "Additional css classes attached to the wrapping element", "type": "string" }, "component": { "title": "`ks-component` attribute", "description": "Optional custom component identifier", "type": "string" } }, "additionalProperties": false, "required": [ "name" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/content-nav.schema.json", "title": "Content Nav", "description": "Content navigation component for navigating related topics or sections within content.", "type": "object", "properties": { "image": { "type": "object", "properties": { "src": { "type": "string", "format": "uri", "description": "URL of the image to display in the content nav." }, "alt": { "type": "string", "description": "Alternative text for the image." } }, "required": [ "src" ], "additionalProperties": false }, "topic": { "type": "string", "description": "The topic of the content being navigated." }, "links": { "type": "array", "items": { "type": "object", "properties": { "label": { "type": "string", "description": "The text label for the link." }, "url": { "type": "string", "format": "uri", "description": "The URL the link points to." } }, "required": [ "label", "url" ], "additionalProperties": false } }, "initiallyShown": { "type": "number", "default": 4, "description": "Determines how many links are initially shown in the content nav. If there are more links, a 'Show More' button will be displayed." } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/cta.schema.json", "title": "Cta", "description": "Call to Action (CTA) component for prompting users to take specific actions on a website.", "type": "object", "properties": { "headline": { "title": "Component Headline", "description": "Headline for the Component element", "type": "string", "format": "markdown", "examples": [ "Headline" ] }, "sub": { "title": "Component Subheadline", "description": "Subheadline below the component headline", "type": "string", "format": "markdown", "examples": [ "Subheadline" ] }, "text": { "title": "Component Text", "description": "Info text for the component element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "inverted": { "title": "Inverted", "description": "Invert the text and button colors for use on dark backgrounds", "default": false, "type": "boolean" }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "backgroundColor": { "title": "Background color", "description": "Background color for the whole element", "type": "string", "format": "color" }, "backgroundImage": { "title": "Background image", "description": "Background image for the whole element", "type": "string", "format": "image" }, "image": { "title": "Image", "description": "Image displayed alongside the text content", "type": "object", "properties": { "src": { "title": "Image source", "description": "Image source to use", "type": "string", "format": "image" }, "padding": { "title": "Padding", "description": "Toggle padding of the image", "type": "boolean", "default": true }, "alt": { "title": "Alt text", "description": "Image description", "type": "string" }, "align": { "title": "Vertical alignment of the image", "description": "Select a vertical alignment for the image", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "center" } }, "additionalProperties": false }, "order": { "title": "Order", "description": "Choose what comes first on mobile and desktop: image or text", "type": "object", "properties": { "mobileImageLast": { "title": "Mobile image after text", "description": "Switch to displaying the image after the text on mobile", "type": "boolean", "default": false }, "desktopImageLast": { "title": "Desktop image after text", "description": "Switch to displaying the image after the text on desktop", "type": "boolean", "default": true } }, "additionalProperties": false }, "textAlign": { "title": "Text Alignment", "description": "Choose the alginment of the text", "enum": [ "left", "center" ], "type": "string", "default": "left" }, "align": { "title": "Vertical alignment of the content", "description": "Select a vertical alignment for the content", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "center" }, "padding": { "title": "Padding", "description": "Toggle padding of the content", "type": "boolean", "default": false } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/divider.schema.json", "title": "Divider", "description": "Dividers bring clarity to a layout by grouping and dividing content in close proximity.", "type": "object", "properties": { "variant": { "title": "Style of the divider", "type": "string", "description": "Choose a variant for the divider", "enum": [ "default", "accent" ], "default": "default" }, "className": { "type": "string", "title": "Additional Classes", "description": "Add additional css classes that should be applied to the divider" }, "component": { "title": "`ks-component` attribute", "description": "Optional custom component identifier", "type": "string" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/downloads.schema.json", "title": "Downloads", "description": "Downloads component for providing users with downloadable files and resources.", "type": "object", "properties": { "download": { "type": "array", "items": { "type": "object", "properties": { "name": { "type": "string", "description": "The name of the file" }, "description": { "type": "string", "description": "A brief description of the file" }, "previewImage": { "type": "string", "format": "image", "description": "A URL to an image that previews the file." }, "url": { "type": "string", "format": "uri", "description": "The URL to download the file from." }, "size": { "type": [ "string" ], "description": "The size of the download file" }, "format": { "type": [ "string" ], "description": "The format of the download file" } }, "required": [ "name", "url" ], "additionalProperties": false } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/event-latest-teaser.schema.json", "title": "Event Latest Teaser", "description": "Display an event teaser with date, title and location", "type": "object", "properties": { "date": { "title": "Date", "description": "The date of the event", "type": "string", "format": "date", "examples": [ "12.30.2022" ] }, "calendar": { "type": "object", "title": "Calendar", "description": "Calendar icon to display the date", "properties": { "month": { "title": "Month", "description": "The month of the event", "type": "string", "examples": [ "Dec" ] }, "day": { "title": "Day", "description": "The day of the event", "type": "string", "examples": [ "30" ] } }, "additionalProperties": false }, "title": { "title": "Headline", "description": "Title of the event", "type": "string", "format": "markdown", "examples": [ "This is a event teaser title" ] }, "location": { "title": "Location", "description": "Location of the event", "type": "string", "format": "markdown", "examples": [ "This is a location" ] }, "url": { "title": "URL", "description": "The event entry URL to link", "type": "string", "format": "uri", "examples": [ "https://example.com" ] }, "cta": { "title": "Call to Action", "description": "Text for the call to action", "type": "string", "examples": [ "Show event" ] }, "ariaLabel": { "title": "ARIA Label", "description": "ARIA label for accessibility", "type": "string", "examples": [ "Event teaser for " ] }, "className": { "type": "string" } }, "additionalProperties": false, "required": [ "title", "date", "location" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/event-list-teaser.schema.json", "title": "Event List Teaser", "description": "Display an event teaser with date, title and location", "type": "object", "properties": { "category": { "title": "Category", "description": "Category of the event teaser", "type": "string", "examples": [ "Category" ] }, "title": { "title": "Headline", "description": "Title of the event", "type": "string", "format": "markdown", "examples": [ "This is a event teaser title" ] }, "text": { "title": "Text", "description": "Short teaser text for the event", "type": "string", "format": "markdown", "examples": [ "The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence. The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence." ] }, "date": { "title": "Date", "description": "The date of the event", "type": "string", "format": "date", "examples": [ "FRI, JAN 16" ] }, "time": { "title": "Time", "description": "The time of the event", "type": "string", "examples": [ "10:00" ] }, "location": { "title": "Location", "description": "Location of the event", "type": "object", "properties": { "name": { "type": "string", "title": "Location Name", "description": "Name of the location", "examples": [ "Stadthalle" ] }, "address": { "type": "string", "title": "Address", "description": "Address of the location", "examples": [ "Köln" ] } }, "additionalProperties": false }, "tags": { "title": "Tags", "description": "Tags associated with the event", "type": "array", "items": { "type": "string", "examples": [ "AI", "Technology", "Innovation" ] }, "default": [ "Topic 1", "Topic 2" ] }, "image": { "title": "Image", "description": "Image to display in the teaser", "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "Image Source", "description": "URL of the image to display", "examples": [ "https://picsum.photos/seed/flower/800/600" ] }, "alt": { "type": "string", "title": "Alt Text", "description": "Alt text of the image", "examples": [ "This is an image of a flower" ] } }, "additionalProperties": false }, "url": { "title": "URL", "description": "The event entry URL to link", "type": "string", "format": "uri", "examples": [ "https://example.com" ] }, "ctaText": { "title": "Call to Action", "description": "Text for the call to action", "type": "string", "examples": [ "Show event" ] }, "ariaLabel": { "title": "ARIA Label", "description": "ARIA label for accessibility", "type": "string" }, "className": { "type": "string" } }, "additionalProperties": false, "required": [ "title", "date", "location" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/faq.schema.json", "title": "Faq", "description": "Component used to display a Faq section", "type": "object", "properties": { "questions": { "type": "array", "title": "Questions", "description": "The questions and answers in the Faq section", "items": { "title": "Question", "type": "object", "properties": { "question": { "type": "string", "format": "markdown", "title": "Question", "description": "The question", "examples": [ "What is the product made of?" ] }, "answer": { "type": "string", "format": "markdown", "title": "Answer", "description": "The answer to the question", "examples": [ "The product is made of high-quality materials" ] } }, "additionalProperties": false, "required": [ "question" ] }, "minItems": 1 } }, "additionalProperties": false, "required": [ "questions" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/features.schema.json", "title": "Features", "description": "Component used to display a set of features", "type": "object", "properties": { "layout": { "type": "string", "title": "Layout", "description": "The layout variant to use for the features", "enum": [ "largeTiles", "smallTiles", "list" ], "default": "largeTiles" }, "style": { "type": "string", "enum": [ "intext", "stack", "centered", "besideLarge", "besideSmall" ], "default": "stack" }, "ctas": { "type": "object", "properties": { "toggle": { "type": "boolean", "default": true, "title": "CTA Toggle", "description": "Activate/disable the CTAs" }, "style": { "type": "string", "enum": [ "button", "link", "intext" ], "default": "link" } }, "additionalProperties": false }, "feature": { "type": "array", "title": "Features", "description": "The features to display", "items": { "type": "object", "title": "Feature", "properties": { "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "The icon for the feature", "examples": [ "person" ] }, "title": { "type": "string", "title": "Title", "description": "The title of the feature", "examples": [ "Feature 1" ] }, "text": { "type": "string", "title": "Text", "description": "The description of the feature", "format": "markdown", "examples": [ "This is a feature" ] }, "cta": { "type": "object", "properties": { "url": { "type": "string", "title": "Call to Action url", "description": "The CTA url", "default": "#", "format": "uri" }, "label": { "type": "string", "title": "Link Label", "description": "The text label displayed on the link", "default": "See more", "examples": [ "See all our partners" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Icon for the link style of the cta", "examples": [ "arrow-right" ], "default": "arrow-right" } }, "additionalProperties": false } }, "additionalProperties": false }, "minItems": 1, "maxItems": 8 } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/gallery.schema.json", "title": "Gallery", "description": "Component used to display a gallery of images", "type": "object", "properties": { "images": { "type": "array", "title": "Images", "description": "The images to display in the gallery", "items": { "type": "object", "properties": { "src": { "type": "string", "title": "src", "format": "image", "description": "The source of the image", "examples": [ "https://example.com/image1.jpg" ] }, "alt": { "type": "string", "title": "Alt text", "description": "Alt text of the image", "examples": [ "https://example.com/image1.jpg" ] }, "caption": { "type": "string", "format": "markdown", "title": "Caption", "description": "The caption of the image", "examples": [ "Caption Image" ] } }, "additionalProperties": false, "required": [ "src" ] }, "minItems": 1, "maxItems": 10 }, "layout": { "type": "string", "title": "Layout", "description": "The layout of the gallery images", "enum": [ "stack", "smallTiles", "largeTiles" ], "default": "smallTiles" }, "aspectRatio": { "type": "string", "title": "Aspect Ratio", "description": "The aspect ratio of the gallery images", "enum": [ "unset", "square", "wide", "landscape" ], "default": "unset" }, "lightbox": { "type": "boolean", "title": "Lightbox", "description": "Display images in a lightbox gallery", "default": false } }, "additionalProperties": false, "required": [ "images" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/hero.schema.json", "title": "Hero", "description": "Hero component for displaying a prominent visual section with headline, subheadline, text, and call-to-action buttons.", "type": "object", "properties": { "headline": { "title": "Headline", "description": "Headline for the visual", "type": "string", "format": "markdown" }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the module headline", "type": "string", "format": "markdown" }, "text": { "title": "Module Text", "description": "Info text for the module element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "height": { "title": "Height", "type": "string", "enum": [ "small", "default", "fullImage", "fullScreen" ], "default": "default" }, "textbox": { "type": "boolean", "title": "Textbox", "default": true, "description": "Toggle wether you want your text to be displayed within in box" }, "mobileTextBelow": { "type": "boolean", "title": "Mobile Text Below", "description": "On mobile devices, display the text below the image", "default": true }, "invertText": { "type": "boolean", "title": "Invert Text", "description": "Invert the text color for better contrast against the background", "default": false }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "skipButton": { "type": "boolean", "title": "Skip Button", "description": "Add a skip button to the hero module", "default": false }, "overlay": { "title": "Grid layer", "description": "Enable grid layer", "type": "boolean", "default": false }, "image": { "title": "Background image", "description": "Sources of background images for different screen sizes", "type": "object", "required": [ "srcMobile" ], "properties": { "srcMobile": { "title": "Mobile image source", "description": "Background image source for small screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/640/270" ] }, "srcTablet": { "title": "Tablet image source", "description": "Background image source for medium screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/1280/540" ] }, "srcDesktop": { "title": "Desktop image source", "description": "Background image source for large screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/1920/810" ] }, "src": { "title": "Optional source", "description": "Override for img tag of picture element, if needed", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/640/270" ] }, "indent": { "title": "Image indent", "description": "Choose to indent the image horizontally on small screens", "type": "string", "enum": [ "none", "left", "right" ], "default": "none" }, "alt": { "title": "Alt text", "description": "Alt text to display for picture", "type": "string" } }, "additionalProperties": false }, "textPosition": { "title": "Module aligment", "description": "Choose the alginment of the module content", "enum": [ "center", "below", "offset", "left", "right", "corner", "bottom" ], "type": "string", "default": "left" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/html.schema.json", "title": "Html", "description": "Display raw HTML.", "type": "object", "properties": { "html": { "title": "HTML string", "type": "string", "examples": [ "

Hello World

" ] }, "consent": { "title": "Show HTML after consent", "type": "boolean", "default": false }, "consentText": { "type": "string" }, "consentButtonLabel": { "type": "string" }, "consentBackgroundImage": { "type": "string", "format": "image" }, "consentAspectRatio": { "type": "string", "enum": [ "16:9", "16:10", "4:3", "1:1" ], "default": "16:9" }, "inverted": { "title": "Inverted", "description": "Invert the colors of the HTML", "type": "boolean", "default": false }, "className": { "title": "Additional Classes", "description": "Add additional css classes that should be applied to the element", "type": "string" }, "component": { "title": "`ks-component` attribute", "description": "Optional custom component identifier", "type": "string" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/image-story.schema.json", "title": "Image Story", "description": "Image story component for displaying an image alongside text content with customizable layout and buttons.", "type": "object", "properties": { "headline": { "title": "Module Headline", "description": "Headline for the module element", "type": "string", "format": "markdown", "examples": [ "Headline" ] }, "largeHeadline": { "type": "boolean", "title": "Large Headline", "description": "Make the headline larger", "default": false }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the module headline", "type": "string", "format": "markdown", "examples": [ "Subheadline" ] }, "text": { "title": "Module Text", "description": "Info text for the module element", "type": "string", "format": "markdown" }, "layout": { "type": "string", "title": "Layout", "description": "Choose the layout for the component", "enum": [ "textLeft", "imageLeft" ], "default": "imageLeft" }, "padding": { "type": "boolean", "title": "Padding", "default": false, "description": "Give the component padding" }, "buttons": { "title": "Buttons", "description": "Buttons of the Button Group", "type": "array", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/button.schema.json", "title": "Button", "description": "Component used for user interaction", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" }, "variant": { "type": "string", "title": "Variant", "description": "Variant of button to be used", "enum": [ "primary", "secondary", "tertiary" ], "default": "secondary" }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "size": { "type": "string", "title": "Size", "description": "Size of button to use", "enum": [ "small", "medium", "large" ], "default": "medium" }, "disabled": { "type": "boolean", "title": "Disabled?", "description": "Whether the button should be disabled", "default": false }, "type": { "type": "string", "title": "Button Type", "enum": [ "button", "submit", "reset" ] } }, "additionalProperties": false, "required": [ "label" ] } }, "image": { "title": "Image", "description": "Image displayed alongside the text content", "type": "object", "properties": { "src": { "title": "Image source", "description": "Image source to use", "type": "string", "format": "image" }, "aspectRatio": { "type": "string", "title": "Aspect Ratio", "description": "The aspect ratio of the image", "enum": [ "unset", "square", "wide", "landscape" ], "default": "unset" }, "alt": { "title": "Alt text", "description": "Image description", "type": "string" }, "vAlign": { "title": "Image vertical alignment", "description": "Select a vertical alignment for the image", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "top" } }, "additionalProperties": false }, "textAlign": { "title": "Text Alignment", "description": "Choose the alginment of the text", "enum": [ "left", "center" ], "type": "string", "default": "left" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/image-text.schema.json", "title": "Image Text", "description": "Component used to display an image beside or above/below a text block", "type": "object", "properties": { "text": { "type": "string", "format": "markdown", "title": "Text", "description": "Text content to display beside the image", "examples": [ "This is a sample text" ] }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "image": { "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "Image Source", "description": "URL of the image to display", "examples": [ "http://example.com/image.jpg" ] }, "alt": { "type": "string", "title": "Alt Text", "description": "Alt text of the image", "examples": [ "http://example.com/image.jpg" ] } }, "additionalProperties": false }, "layout": { "type": "string", "enum": [ "above", "below", "beside-right", "beside-left" ], "title": "Layout", "description": "Position of the image relative to the text", "default": "above" } }, "required": [ "text", "image", "layout" ], "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/logos.schema.json", "title": "Logos", "description": "Component used to display a set of logos", "type": "object", "properties": { "tagline": { "type": "string", "title": "Logo Tagline", "description": "A short tagline atop the logos", "examples": [ "Our Customers" ] }, "logo": { "type": "array", "title": "Logos", "description": "The logos to display", "items": { "title": "Logo", "description": "Logo entry for Logos component", "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "URL", "description": "The URL of the logo image", "examples": [ "img/logos/logoipsum-344.svg", "img/logos/logoipsum-347.svg", "img/logos/logoipsum-352.svg", "img/logos/logoipsum-356.svg", "img/logos/logoipsum-358.svg", "img/logos/logoipsum-369.svg" ] }, "alt": { "type": "string", "title": "Caption", "description": "The alt text of the logo", "examples": [ "Logo 1" ] } }, "additionalProperties": false, "required": [ "src" ] }, "minItems": 1 }, "align": { "type": "string", "title": "Alignment", "description": "The alignment of the logo layout", "enum": [ "left", "center" ], "default": "center" }, "logosPerRow": { "type": "integer", "title": "Logos Per Row", "description": "The amount of logos to display per row", "minimum": 2, "maximum": 8, "examples": [ 5 ] }, "cta": { "type": "object", "title": "Call to Action", "description": "The call to action", "properties": { "toggle": { "type": "boolean", "default": false, "title": "CTA Toggle", "description": "Activate/disable the CTA" }, "text": { "type": "string", "title": "Call to Action Text", "description": "A short CTA text", "examples": [ "Explore the success stories of our valued customers and discover more about their journey." ] }, "link": { "type": "string", "title": "Call to Action Link", "description": "The CTA link", "default": "#", "format": "uri" }, "label": { "type": "string", "title": "Link Label", "description": "The text label displayed on the link", "examples": [ "See all customers" ] }, "style": { "type": "string", "enum": [ "button", "text" ], "default": "text" } }, "additionalProperties": false, "required": [ "style", "link", "label" ] } }, "additionalProperties": false, "required": [ "logos" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/mosaic.schema.json", "title": "Mosaic", "description": "Mosaic component for displaying a collection of tiles in various layouts.", "type": "object", "properties": { "layout": { "title": "Layout", "description": "Layout of the mosaic component", "type": "string", "enum": [ "alternate", "textLeft", "textRight" ], "default": "alternate" }, "largeHeadlines": { "type": "boolean", "title": "Large Headlines", "description": "Make the headlines larger", "default": false }, "tile": { "type": "array", "title": "Tiles", "description": "The tiles to display", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/tile.schema.json", "title": "Tile", "type": "object", "properties": { "headline": { "title": "Headline", "description": "Headline for the tile", "type": "string", "format": "markdown" }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the tile headline", "type": "string", "format": "markdown" }, "text": { "title": "Module Text", "description": "Text for tile", "type": "string", "format": "markdown" }, "image": { "type": "object", "properties": { "src": { "title": "Source", "description": "Picture source", "type": "string", "format": "image", "examples": [ "img/close-up-young-business-team-working.png" ] }, "alt": { "title": "Alt text", "description": "Alt text to display for picture", "type": "string" } }, "additionalProperties": false }, "button": { "type": "object", "properties": { "toggle": { "title": "Button Toggle", "description": "Toggle wether the Button is displayed or not", "type": "boolean", "default": true }, "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" } }, "additionalProperties": false }, "backgroundColor": { "title": "Background color", "description": "Background color for the whole element", "type": "string", "format": "color" }, "backgroundImage": { "title": "Background image", "description": "Background image for the whole element", "type": "string", "format": "image" }, "textColor": { "title": "Text color", "description": "Overwrite the color to use for the text content", "type": "string", "format": "color" } }, "additionalProperties": false, "required": [ "headline", "image" ] }, "minItems": 1, "maxItems": 20 } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/slider.schema.json", "title": "Slider", "description": "Slider component for displaying a carousel of content components.", "type": "object", "properties": { "autoplay": { "title": "Auto play", "description": "Automatically move to next slide after 4 seconds without user interaction", "type": "boolean", "default": false }, "nav": { "title": "Show Navigation", "description": "Add bullet navigation", "type": "boolean", "examples": [ true ] }, "teaseNeighbours": { "title": "Tease Neighbour Slides", "type": "boolean", "default": false }, "equalHeight": { "title": "Equalize slides heights", "type": "boolean", "default": true }, "gap": { "title": "Gap", "description": "Size of the gap added between slides in pixels", "type": "number", "default": 0 }, "arrows": { "title": "Show Arrows", "description": "Add arrows on the left and right to navigate to next or previous slide", "type": "boolean", "examples": [ true ] }, "variant": { "title": "Type", "description": "Type of the movement", "type": "string", "enum": [ "slider", "carousel" ], "default": "carousel" }, "className": { "title": "Class", "description": "Additional css classes attached to the wrapping element", "type": "string" }, "components": { "type": "array", "title": "Content", "description": "Allowed components for content", "items": { "anyOf": [ { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/cta.schema.json", "title": "Cta", "description": "Call to Action (CTA) component for prompting users to take specific actions on a website.", "type": "object", "properties": { "headline": { "title": "Component Headline", "description": "Headline for the Component element", "type": "string", "format": "markdown", "examples": [ "Headline" ] }, "sub": { "title": "Component Subheadline", "description": "Subheadline below the component headline", "type": "string", "format": "markdown", "examples": [ "Subheadline" ] }, "text": { "title": "Component Text", "description": "Info text for the component element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "inverted": { "title": "Inverted", "description": "Invert the text and button colors for use on dark backgrounds", "default": false, "type": "boolean" }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "backgroundColor": { "title": "Background color", "description": "Background color for the whole element", "type": "string", "format": "color" }, "backgroundImage": { "title": "Background image", "description": "Background image for the whole element", "type": "string", "format": "image" }, "image": { "title": "Image", "description": "Image displayed alongside the text content", "type": "object", "properties": { "src": { "title": "Image source", "description": "Image source to use", "type": "string", "format": "image" }, "padding": { "title": "Padding", "description": "Toggle padding of the image", "type": "boolean", "default": true }, "alt": { "title": "Alt text", "description": "Image description", "type": "string" }, "align": { "title": "Vertical alignment of the image", "description": "Select a vertical alignment for the image", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "center" } }, "additionalProperties": false }, "order": { "title": "Order", "description": "Choose what comes first on mobile and desktop: image or text", "type": "object", "properties": { "mobileImageLast": { "title": "Mobile image after text", "description": "Switch to displaying the image after the text on mobile", "type": "boolean", "default": false }, "desktopImageLast": { "title": "Desktop image after text", "description": "Switch to displaying the image after the text on desktop", "type": "boolean", "default": true } }, "additionalProperties": false }, "textAlign": { "title": "Text Alignment", "description": "Choose the alginment of the text", "enum": [ "left", "center" ], "type": "string", "default": "left" }, "align": { "title": "Vertical alignment of the content", "description": "Select a vertical alignment for the content", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "center" }, "padding": { "title": "Padding", "description": "Toggle padding of the content", "type": "boolean", "default": false } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/features.schema.json", "title": "Features", "description": "Component used to display a set of features", "type": "object", "properties": { "layout": { "type": "string", "title": "Layout", "description": "The layout variant to use for the features", "enum": [ "largeTiles", "smallTiles", "list" ], "default": "largeTiles" }, "style": { "type": "string", "enum": [ "intext", "stack", "centered", "besideLarge", "besideSmall" ], "default": "stack" }, "ctas": { "type": "object", "properties": { "toggle": { "type": "boolean", "default": true, "title": "CTA Toggle", "description": "Activate/disable the CTAs" }, "style": { "type": "string", "enum": [ "button", "link", "intext" ], "default": "link" } }, "additionalProperties": false }, "feature": { "type": "array", "title": "Features", "description": "The features to display", "items": { "type": "object", "title": "Feature", "properties": { "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "The icon for the feature", "examples": [ "person" ] }, "title": { "type": "string", "title": "Title", "description": "The title of the feature", "examples": [ "Feature 1" ] }, "text": { "type": "string", "title": "Text", "description": "The description of the feature", "format": "markdown", "examples": [ "This is a feature" ] }, "cta": { "type": "object", "properties": { "url": { "type": "string", "title": "Call to Action url", "description": "The CTA url", "default": "#", "format": "uri" }, "label": { "type": "string", "title": "Link Label", "description": "The text label displayed on the link", "default": "See more", "examples": [ "See all our partners" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Icon for the link style of the cta", "examples": [ "arrow-right" ], "default": "arrow-right" } }, "additionalProperties": false } }, "additionalProperties": false }, "minItems": 1, "maxItems": 8 } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/gallery.schema.json", "title": "Gallery", "description": "Component used to display a gallery of images", "type": "object", "properties": { "images": { "type": "array", "title": "Images", "description": "The images to display in the gallery", "items": { "type": "object", "properties": { "src": { "type": "string", "title": "src", "format": "image", "description": "The source of the image", "examples": [ "https://example.com/image1.jpg" ] }, "alt": { "type": "string", "title": "Alt text", "description": "Alt text of the image", "examples": [ "https://example.com/image1.jpg" ] }, "caption": { "type": "string", "format": "markdown", "title": "Caption", "description": "The caption of the image", "examples": [ "Caption Image" ] } }, "additionalProperties": false, "required": [ "src" ] }, "minItems": 1, "maxItems": 10 }, "layout": { "type": "string", "title": "Layout", "description": "The layout of the gallery images", "enum": [ "stack", "smallTiles", "largeTiles" ], "default": "smallTiles" }, "aspectRatio": { "type": "string", "title": "Aspect Ratio", "description": "The aspect ratio of the gallery images", "enum": [ "unset", "square", "wide", "landscape" ], "default": "unset" }, "lightbox": { "type": "boolean", "title": "Lightbox", "description": "Display images in a lightbox gallery", "default": false } }, "additionalProperties": false, "required": [ "images" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/hero.schema.json", "title": "Hero", "description": "Hero component for displaying a prominent visual section with headline, subheadline, text, and call-to-action buttons.", "type": "object", "properties": { "headline": { "title": "Headline", "description": "Headline for the visual", "type": "string", "format": "markdown" }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the module headline", "type": "string", "format": "markdown" }, "text": { "title": "Module Text", "description": "Info text for the module element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "height": { "title": "Height", "type": "string", "enum": [ "small", "default", "fullImage", "fullScreen" ], "default": "default" }, "textbox": { "type": "boolean", "title": "Textbox", "default": true, "description": "Toggle wether you want your text to be displayed within in box" }, "mobileTextBelow": { "type": "boolean", "title": "Mobile Text Below", "description": "On mobile devices, display the text below the image", "default": true }, "invertText": { "type": "boolean", "title": "Invert Text", "description": "Invert the text color for better contrast against the background", "default": false }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "skipButton": { "type": "boolean", "title": "Skip Button", "description": "Add a skip button to the hero module", "default": false }, "overlay": { "title": "Grid layer", "description": "Enable grid layer", "type": "boolean", "default": false }, "image": { "title": "Background image", "description": "Sources of background images for different screen sizes", "type": "object", "required": [ "srcMobile" ], "properties": { "srcMobile": { "title": "Mobile image source", "description": "Background image source for small screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/640/270" ] }, "srcTablet": { "title": "Tablet image source", "description": "Background image source for medium screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/1280/540" ] }, "srcDesktop": { "title": "Desktop image source", "description": "Background image source for large screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/1920/810" ] }, "src": { "title": "Optional source", "description": "Override for img tag of picture element, if needed", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/640/270" ] }, "indent": { "title": "Image indent", "description": "Choose to indent the image horizontally on small screens", "type": "string", "enum": [ "none", "left", "right" ], "default": "none" }, "alt": { "title": "Alt text", "description": "Alt text to display for picture", "type": "string" } }, "additionalProperties": false }, "textPosition": { "title": "Module aligment", "description": "Choose the alginment of the module content", "enum": [ "center", "below", "offset", "left", "right", "corner", "bottom" ], "type": "string", "default": "left" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/image-text.schema.json", "title": "Image Text", "description": "Component used to display an image beside or above/below a text block", "type": "object", "properties": { "text": { "type": "string", "format": "markdown", "title": "Text", "description": "Text content to display beside the image", "examples": [ "This is a sample text" ] }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "image": { "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "Image Source", "description": "URL of the image to display", "examples": [ "http://example.com/image.jpg" ] }, "alt": { "type": "string", "title": "Alt Text", "description": "Alt text of the image", "examples": [ "http://example.com/image.jpg" ] } }, "additionalProperties": false }, "layout": { "type": "string", "enum": [ "above", "below", "beside-right", "beside-left" ], "title": "Layout", "description": "Position of the image relative to the text", "default": "above" } }, "required": [ "text", "image", "layout" ], "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/logos.schema.json", "title": "Logos", "description": "Component used to display a set of logos", "type": "object", "properties": { "tagline": { "type": "string", "title": "Logo Tagline", "description": "A short tagline atop the logos", "examples": [ "Our Customers" ] }, "logo": { "type": "array", "title": "Logos", "description": "The logos to display", "items": { "title": "Logo", "description": "Logo entry for Logos component", "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "URL", "description": "The URL of the logo image", "examples": [ "img/logos/logoipsum-344.svg", "img/logos/logoipsum-347.svg", "img/logos/logoipsum-352.svg", "img/logos/logoipsum-356.svg", "img/logos/logoipsum-358.svg", "img/logos/logoipsum-369.svg" ] }, "alt": { "type": "string", "title": "Caption", "description": "The alt text of the logo", "examples": [ "Logo 1" ] } }, "additionalProperties": false, "required": [ "src" ] }, "minItems": 1 }, "align": { "type": "string", "title": "Alignment", "description": "The alignment of the logo layout", "enum": [ "left", "center" ], "default": "center" }, "logosPerRow": { "type": "integer", "title": "Logos Per Row", "description": "The amount of logos to display per row", "minimum": 2, "maximum": 8, "examples": [ 5 ] }, "cta": { "type": "object", "title": "Call to Action", "description": "The call to action", "properties": { "toggle": { "type": "boolean", "default": false, "title": "CTA Toggle", "description": "Activate/disable the CTA" }, "text": { "type": "string", "title": "Call to Action Text", "description": "A short CTA text", "examples": [ "Explore the success stories of our valued customers and discover more about their journey." ] }, "link": { "type": "string", "title": "Call to Action Link", "description": "The CTA link", "default": "#", "format": "uri" }, "label": { "type": "string", "title": "Link Label", "description": "The text label displayed on the link", "examples": [ "See all customers" ] }, "style": { "type": "string", "enum": [ "button", "text" ], "default": "text" } }, "additionalProperties": false, "required": [ "style", "link", "label" ] } }, "additionalProperties": false, "required": [ "logos" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/stats.schema.json", "title": "Stats", "description": "Component used to display stats with a number upcounter", "type": "object", "properties": { "align": { "title": "Align", "description": "Alignment of the stats content", "type": "string", "enum": [ "left", "center" ], "default": "center" }, "stat": { "title": "Stats", "type": "array", "description": "The stats to display with a number upcounter", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/stat.schema.json", "title": "Stat", "description": "Stat entry of Stats component", "type": "object", "properties": { "number": { "title": "Number", "description": "The number of the stat", "type": "string", "examples": [ "1", "5x", "2", "40%", "bis zu 100" ] }, "description": { "title": "Description", "description": "Optional description of the stat", "type": "string", "format": "markdown" }, "title": { "title": "Title", "description": "Title of the stat", "type": "string", "format": "markdown", "examples": [ "Stat 1", "Stat 2", "Stat 3", "Stat 4" ] }, "icon": { "title": "Icon", "description": "Optional icon of the stat", "type": "string", "format": "icon", "examples": [ "person", "home", "map" ] } }, "additionalProperties": false, "required": [ "number", "label" ], "examples": [ { "number": 1, "label": "Stat 1" }, { "number": 2, "label": "Stat 2" }, { "number": 3, "label": "Stat 3" }, { "value": 4, "label": "Stat 4" } ] }, "minItems": 1, "maxItems": 4 } }, "additionalProperties": false, "required": [ "stats" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/teaser-card.schema.json", "title": "Teaser Card", "description": "Component used to tease content", "type": "object", "properties": { "headline": { "type": "string", "title": "Headline", "description": "Headline for the teaser card", "format": "markdown" }, "text": { "type": "string", "title": "Text", "description": "Body text for the teaser card", "format": "markdown" }, "label": { "type": "string", "title": "Label", "description": "Label for the Teaser Card" }, "layout": { "type": "string", "enum": [ "stack", "row", "compact" ], "description": "Layout for the Teaser Card", "default": "stack" }, "centered": { "type": "boolean", "title": "Centered", "description": "Whether the Teaser Card is centered", "default": false }, "url": { "type": "string", "title": "Url", "description": "Url that should be linked", "format": "uri" }, "button": { "type": "object", "properties": { "label": { "title": "Label", "type": "string", "description": "Label of the button. Still A11Y relevant when the button is hidden." }, "chevron": { "title": "Icon", "description": "Toggle arrow icon", "type": "boolean", "default": false }, "hidden": { "type": "boolean", "title": "Display Button", "description": "Toggle wether you want the card to have a visible button or not", "default": false } }, "required": [ "label" ], "additionalProperties": false }, "image": { "type": "string", "title": "Image", "description": "Image to display as cover", "format": "image" }, "imageAlt": { "type": "string", "title": "Image Alt", "description": "Alternative text for the image, used for accessibility" }, "imageRatio": { "type": "string", "enum": [ "wide", "landscape", "square", "unset" ], "description": "Aspect ratio of the image", "default": "wide" } }, "additionalProperties": false, "required": [ "topic", "url" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/testimonials.schema.json", "title": "Testimonials", "description": "Display testimonials with an optional image and rating", "type": "object", "properties": { "layout": { "title": "Layout", "description": "The testimonial layout", "type": "string", "enum": [ "slider", "list", "alternating" ], "default": "slider" }, "quoteSigns": { "title": "Style of the quote signs", "description": "The style of the quote signs", "type": "string", "enum": [ "normal", "large", "none" ], "default": "normal" }, "testimonial": { "type": "array", "title": "Testimonials", "description": "Add testimonials featuring an image, a quote, a source and a rating", "items": { "title": "Testimonial", "description": "Testimonial entry of Testimonials component", "type": "object", "properties": { "quote": { "title": "Quote", "description": "The testimonial quote", "type": "string", "format": "markdown", "examples": [ "This product is amazing!" ] }, "name": { "title": "Name", "description": "The name of the quote author", "type": "string", "examples": [ "John Doe" ] }, "title": { "title": "Title", "description": "The title of the quote author", "type": "string" }, "image": { "type": "object", "properties": { "src": { "title": "Source", "description": "The image to display with the testimonial", "type": "string", "format": "image", "examples": [ "https://example.com/image.jpg" ] }, "alt": { "title": "Alt Text", "description": "The alt text of the image file", "type": "string" } }, "additionalProperties": false }, "rating": { "title": "Rating", "description": "The rating of the testimonial, from 1 to 5", "type": "integer", "minimum": 1, "maximum": 5 } }, "additionalProperties": false, "required": [ "quote", "name", "image" ] } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/text.schema.json", "title": "Text", "description": "Component used for displaying text in chapters", "type": "object", "properties": { "text": { "type": "string", "format": "markdown", "title": "Text", "description": "Text", "examples": [ "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." ] }, "layout": { "type": "string", "title": "Layout", "description": "Variant of layout to be used", "enum": [ "singleColumn", "multiColumn" ], "default": "singleColumn" }, "align": { "type": "string", "title": "Alignment", "description": "Alignment of text", "enum": [ "left", "center" ], "default": "left" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false } }, "additionalProperties": false, "required": [ "text" ] } ] } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/stats.schema.json", "title": "Stats", "description": "Component used to display stats with a number upcounter", "type": "object", "properties": { "align": { "title": "Align", "description": "Alignment of the stats content", "type": "string", "enum": [ "left", "center" ], "default": "center" }, "stat": { "title": "Stats", "type": "array", "description": "The stats to display with a number upcounter", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/stat.schema.json", "title": "Stat", "description": "Stat entry of Stats component", "type": "object", "properties": { "number": { "title": "Number", "description": "The number of the stat", "type": "string", "examples": [ "1", "5x", "2", "40%", "bis zu 100" ] }, "description": { "title": "Description", "description": "Optional description of the stat", "type": "string", "format": "markdown" }, "title": { "title": "Title", "description": "Title of the stat", "type": "string", "format": "markdown", "examples": [ "Stat 1", "Stat 2", "Stat 3", "Stat 4" ] }, "icon": { "title": "Icon", "description": "Optional icon of the stat", "type": "string", "format": "icon", "examples": [ "person", "home", "map" ] } }, "additionalProperties": false, "required": [ "number", "label" ], "examples": [ { "number": 1, "label": "Stat 1" }, { "number": 2, "label": "Stat 2" }, { "number": 3, "label": "Stat 3" }, { "value": 4, "label": "Stat 4" } ] }, "minItems": 1, "maxItems": 4 } }, "additionalProperties": false, "required": [ "stats" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/teaser-card.schema.json", "title": "Teaser Card", "description": "Component used to tease content", "type": "object", "properties": { "headline": { "type": "string", "title": "Headline", "description": "Headline for the teaser card", "format": "markdown" }, "text": { "type": "string", "title": "Text", "description": "Body text for the teaser card", "format": "markdown" }, "label": { "type": "string", "title": "Label", "description": "Label for the Teaser Card" }, "layout": { "type": "string", "enum": [ "stack", "row", "compact" ], "description": "Layout for the Teaser Card", "default": "stack" }, "centered": { "type": "boolean", "title": "Centered", "description": "Whether the Teaser Card is centered", "default": false }, "url": { "type": "string", "title": "Url", "description": "Url that should be linked", "format": "uri" }, "button": { "type": "object", "properties": { "label": { "title": "Label", "type": "string", "description": "Label of the button. Still A11Y relevant when the button is hidden." }, "chevron": { "title": "Icon", "description": "Toggle arrow icon", "type": "boolean", "default": false }, "hidden": { "type": "boolean", "title": "Display Button", "description": "Toggle wether you want the card to have a visible button or not", "default": false } }, "required": [ "label" ], "additionalProperties": false }, "image": { "type": "string", "title": "Image", "description": "Image to display as cover", "format": "image" }, "imageAlt": { "type": "string", "title": "Image Alt", "description": "Alternative text for the image, used for accessibility" }, "imageRatio": { "type": "string", "enum": [ "wide", "landscape", "square", "unset" ], "description": "Aspect ratio of the image", "default": "wide" } }, "additionalProperties": false, "required": [ "topic", "url" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/testimonials.schema.json", "title": "Testimonials", "description": "Display testimonials with an optional image and rating", "type": "object", "properties": { "layout": { "title": "Layout", "description": "The testimonial layout", "type": "string", "enum": [ "slider", "list", "alternating" ], "default": "slider" }, "quoteSigns": { "title": "Style of the quote signs", "description": "The style of the quote signs", "type": "string", "enum": [ "normal", "large", "none" ], "default": "normal" }, "testimonial": { "type": "array", "title": "Testimonials", "description": "Add testimonials featuring an image, a quote, a source and a rating", "items": { "title": "Testimonial", "description": "Testimonial entry of Testimonials component", "type": "object", "properties": { "quote": { "title": "Quote", "description": "The testimonial quote", "type": "string", "format": "markdown", "examples": [ "This product is amazing!" ] }, "name": { "title": "Name", "description": "The name of the quote author", "type": "string", "examples": [ "John Doe" ] }, "title": { "title": "Title", "description": "The title of the quote author", "type": "string" }, "image": { "type": "object", "properties": { "src": { "title": "Source", "description": "The image to display with the testimonial", "type": "string", "format": "image", "examples": [ "https://example.com/image.jpg" ] }, "alt": { "title": "Alt Text", "description": "The alt text of the image file", "type": "string" } }, "additionalProperties": false }, "rating": { "title": "Rating", "description": "The rating of the testimonial, from 1 to 5", "type": "integer", "minimum": 1, "maximum": 5 } }, "additionalProperties": false, "required": [ "quote", "name", "image" ] } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/text.schema.json", "title": "Text", "description": "Component used for displaying text in chapters", "type": "object", "properties": { "text": { "type": "string", "format": "markdown", "title": "Text", "description": "Text", "examples": [ "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." ] }, "layout": { "type": "string", "title": "Layout", "description": "Variant of layout to be used", "enum": [ "singleColumn", "multiColumn" ], "default": "singleColumn" }, "align": { "type": "string", "title": "Alignment", "description": "Alignment of text", "enum": [ "left", "center" ], "default": "left" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false } }, "additionalProperties": false, "required": [ "text" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/video-curtain.schema.json", "title": "Video Curtain", "description": "Video curtain component for displaying a video background with overlay text and buttons.", "type": "object", "properties": { "headline": { "title": "Headline", "description": "Headline for the visual", "type": "string", "format": "markdown" }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the module headline", "type": "string", "format": "markdown" }, "text": { "title": "Module Text", "description": "Info text for the module element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "overlay": { "title": "Grid layer", "description": "Enable grid layer", "type": "boolean", "default": false }, "video": { "title": "Background video", "description": "Sources of background videos for different screen sizes", "type": "object", "required": [ "srcMobile" ], "properties": { "srcMobile": { "title": "Mobile video source", "description": "Background video source for small screens", "type": "string", "format": "video", "examples": [ "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4" ] }, "srcTablet": { "title": "Tablet video source", "description": "Background video source for medium screens", "type": "string", "format": "video", "examples": [ "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4" ] }, "srcDesktop": { "title": "Desktop video source", "description": "Background video source for large screens", "type": "string", "format": "video", "examples": [ "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4" ] } }, "additionalProperties": false }, "textPosition": { "title": "Module aligment", "description": "Choose the alginment of the module content", "enum": [ "center", "bottom", "left", "right", "corner" ], "type": "string", "default": "center" } }, "additionalProperties": false } ] } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/split-weighted.schema.json", "title": "Split Weighted", "description": "Split weighted layout component for dividing content into two sections with customizable widths.", "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": "default" }, "stretchVertically": { "title": "Stretch Vertically", "description": "Whether the main section should stretch vertically to match the height of the aside section", "type": "boolean", "default": false }, "layout": { "title": "Layout", "description": "Sets the layout of the main section", "type": "string", "enum": [ "smallTiles", "largeTiles", "list" ], "default": "list" } }, "additionalProperties": false }, "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" }, "stretchVertically": { "title": "Stretch Vertically", "description": "Whether the aside section should stretch vertically to match the height of the main section", "type": "boolean", "default": false }, "layout": { "title": "Layout", "description": "Sets the layout of the main section", "type": "string", "enum": [ "smallTiles", "largeTiles", "list" ], "default": "list" } }, "additionalProperties": false }, "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" } }, "additionalProperties": false }, "mainComponents": { "type": "array", "title": "Main", "description": "Allowed components for the main half of the split layout", "items": { "anyOf": [ { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/blog-teaser.schema.json", "title": "Blog Teaser", "description": "Display a blog teaser with date, tags, headline, teaser text and author", "type": "object", "properties": { "date": { "title": "Date", "description": "The date of the blog post", "type": "string", "format": "date", "examples": [ "12/30/2022" ] }, "tags": { "type": "array", "title": "Tags", "description": "The tags for the blog post", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/blog-tag.schema.json", "title": "Blog Tag", "description": "Tag given to a blog post", "type": "object", "properties": { "entry": { "title": "Entry", "description": "Name of the tag entry", "type": "string" } }, "additionalProperties": false, "required": [ "entry" ] } }, "headline": { "title": "Headline", "description": "The headline of the blog post", "type": "string", "format": "markdown", "examples": [ "This is a blog post headline" ] }, "teaserText": { "title": "Teaser Text", "description": "The teaser text of the blog post", "type": "string", "format": "markdown", "examples": [ "This is a teaser text for the blog post" ] }, "image": { "title": "Image", "description": "The preview image for the blog post", "type": "string", "format": "image", "examples": [ "img/close-up-young-business-team-working.png" ] }, "alt": { "title": "Alt", "description": "The alt text for the preview image", "type": "string", "examples": [ "Image of a business team working" ] }, "link": { "type": "object", "title": "Link", "description": "URL and label for the blog post linked", "properties": { "url": { "title": "URL", "description": "The blog entry URL to link", "type": "string", "format": "uri", "examples": [ "https://example.com" ] }, "text": { "title": "Text", "description": "The text for the link", "type": "string", "default": "Read article", "examples": [ "Read article" ] } }, "additionalProperties": false, "required": [ "url" ] }, "readingTime": { "title": "Reading Time", "description": "Time to read for the blog post", "type": "string", "examples": [ "5 min read" ] }, "author": { "type": "object", "title": "Author", "description": "The author of the blog post", "properties": { "name": { "title": "Name", "description": "The name of the author", "type": "string", "examples": [ "John Doe" ] }, "title": { "title": "Title", "description": "The title of the author", "type": "string", "examples": [ "CEO" ] }, "image": { "title": "Image", "description": "The image URL of the author", "type": "string", "format": "image", "examples": [ "img/people/author-emily.png" ] } }, "additionalProperties": false, "required": [ "name" ] }, "className": { "type": "string" } }, "additionalProperties": false, "required": [ "headline", "teaserText" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/business-card.schema.json", "title": "Business Card", "description": "Business card component representing an individual's or company's contact information and branding.", "type": "object", "properties": { "centered": { "type": "boolean", "title": "Centered", "description": "Whether the business card content is centered.", "default": false }, "image": { "type": "object", "title": "Background Image", "description": "A background or feature image displayed on the business card.", "properties": { "src": { "type": "string", "format": "uri", "description": "URL of the background image shown on the business card." }, "alt": { "type": "string", "description": "Alternative text describing the background image." } }, "required": [ "src" ], "additionalProperties": false }, "logo": { "type": "object", "title": "Company Logo", "description": "The logo of the company or organization displayed on the business card.", "properties": { "src": { "type": "string", "format": "uri", "description": "URL of the company or organization logo." }, "alt": { "type": "string", "description": "Alternative text describing the logo." }, "url": { "type": "string", "format": "uri", "description": "URL to the company's website or landing page." } }, "required": [ "src" ], "additionalProperties": false }, "topic": { "type": "string", "title": "Topic", "description": "A headline or main topic for the business card, such as a job title or department." }, "address": { "type": "string", "title": "Address", "description": "The physical or mailing address displayed on the business card." }, "avatar": { "type": "object", "title": "Avatar", "description": "A profile image or avatar representing the person on the business card.", "properties": { "src": { "type": "string", "format": "uri", "description": "URL of the person's avatar or profile image." }, "alt": { "type": "string", "description": "Alternative text describing the avatar." } }, "required": [ "src" ], "additionalProperties": false }, "contact": { "type": "array", "title": "Contact Information", "description": "A list of contact methods for the person or business (e.g., email, phone, website).", "items": { "type": "object", "properties": { "label": { "type": "string", "description": "Label describing the contact method (e.g., 'Email', 'Phone')." }, "icon": { "type": "string", "description": "Icon name or identifier representing the contact method." }, "url": { "type": "string", "format": "uri", "description": "URL or link for the contact method, if applicable." } }, "required": [ "label" ], "additionalProperties": false } }, "buttons": { "type": "array", "title": "Buttons", "description": "A list of action buttons shown on the business card.", "items": { "type": "object", "properties": { "label": { "type": "string", "description": "Text label for the link." }, "url": { "type": "string", "format": "uri", "description": "URL the link points to." } }, "required": [ "label", "url" ], "additionalProperties": false } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/contact.schema.json", "title": "Contact", "description": "Component used for user interaction", "type": "object", "properties": { "image": { "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 Isabella Doe" ] }, "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 }, "title": { "title": "Title", "description": "Name, company name, etc.", "type": "string", "examples": [ "Isabella Doe" ] }, "subtitle": { "title": "Subtitle", "description": "Position, profession, department, location, etc.", "type": "string", "examples": [ "CEO at Company" ] }, "links": { "type": "array", "items": { "type": "object", "properties": { "icon": { "type": "string", "format": "icon" }, "label": { "type": "string" }, "url": { "type": "string", "format": "uri" }, "newTab": { "title": "Open link in new Tab", "description": "Open link in new Tab", "type": "boolean", "default": false }, "ariaLabel": { "title": "Aria Label", "description": "Aria label for the link", "type": "string", "examples": [ "Link to Isabella Doe's social media profile" ] } }, "additionalProperties": false }, "examples": [ [ { "icon": "phone", "label": "0228 / 688 966 20", "url": "tel:+4922868896620" }, { "icon": "email", "label": "mail@example.com", "url": "mailto:mail@example.com" } ] ] }, "copy": { "title": "Copy text", "type": "string" }, "className": { "title": "Class", "description": "Additional css classes attached to the wrapping element", "type": "string" }, "component": { "title": "`ks-component` attribute", "description": "Optional custom component identifier", "type": "string" } }, "additionalProperties": false, "required": [ "name" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/content-nav.schema.json", "title": "Content Nav", "description": "Content navigation component for navigating related topics or sections within content.", "type": "object", "properties": { "image": { "type": "object", "properties": { "src": { "type": "string", "format": "uri", "description": "URL of the image to display in the content nav." }, "alt": { "type": "string", "description": "Alternative text for the image." } }, "required": [ "src" ], "additionalProperties": false }, "topic": { "type": "string", "description": "The topic of the content being navigated." }, "links": { "type": "array", "items": { "type": "object", "properties": { "label": { "type": "string", "description": "The text label for the link." }, "url": { "type": "string", "format": "uri", "description": "The URL the link points to." } }, "required": [ "label", "url" ], "additionalProperties": false } }, "initiallyShown": { "type": "number", "default": 4, "description": "Determines how many links are initially shown in the content nav. If there are more links, a 'Show More' button will be displayed." } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/cta.schema.json", "title": "Cta", "description": "Call to Action (CTA) component for prompting users to take specific actions on a website.", "type": "object", "properties": { "headline": { "title": "Component Headline", "description": "Headline for the Component element", "type": "string", "format": "markdown", "examples": [ "Headline" ] }, "sub": { "title": "Component Subheadline", "description": "Subheadline below the component headline", "type": "string", "format": "markdown", "examples": [ "Subheadline" ] }, "text": { "title": "Component Text", "description": "Info text for the component element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "inverted": { "title": "Inverted", "description": "Invert the text and button colors for use on dark backgrounds", "default": false, "type": "boolean" }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "backgroundColor": { "title": "Background color", "description": "Background color for the whole element", "type": "string", "format": "color" }, "backgroundImage": { "title": "Background image", "description": "Background image for the whole element", "type": "string", "format": "image" }, "image": { "title": "Image", "description": "Image displayed alongside the text content", "type": "object", "properties": { "src": { "title": "Image source", "description": "Image source to use", "type": "string", "format": "image" }, "padding": { "title": "Padding", "description": "Toggle padding of the image", "type": "boolean", "default": true }, "alt": { "title": "Alt text", "description": "Image description", "type": "string" }, "align": { "title": "Vertical alignment of the image", "description": "Select a vertical alignment for the image", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "center" } }, "additionalProperties": false }, "order": { "title": "Order", "description": "Choose what comes first on mobile and desktop: image or text", "type": "object", "properties": { "mobileImageLast": { "title": "Mobile image after text", "description": "Switch to displaying the image after the text on mobile", "type": "boolean", "default": false }, "desktopImageLast": { "title": "Desktop image after text", "description": "Switch to displaying the image after the text on desktop", "type": "boolean", "default": true } }, "additionalProperties": false }, "textAlign": { "title": "Text Alignment", "description": "Choose the alginment of the text", "enum": [ "left", "center" ], "type": "string", "default": "left" }, "align": { "title": "Vertical alignment of the content", "description": "Select a vertical alignment for the content", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "center" }, "padding": { "title": "Padding", "description": "Toggle padding of the content", "type": "boolean", "default": false } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/divider.schema.json", "title": "Divider", "description": "Dividers bring clarity to a layout by grouping and dividing content in close proximity.", "type": "object", "properties": { "variant": { "title": "Style of the divider", "type": "string", "description": "Choose a variant for the divider", "enum": [ "default", "accent" ], "default": "default" }, "className": { "type": "string", "title": "Additional Classes", "description": "Add additional css classes that should be applied to the divider" }, "component": { "title": "`ks-component` attribute", "description": "Optional custom component identifier", "type": "string" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/downloads.schema.json", "title": "Downloads", "description": "Downloads component for providing users with downloadable files and resources.", "type": "object", "properties": { "download": { "type": "array", "items": { "type": "object", "properties": { "name": { "type": "string", "description": "The name of the file" }, "description": { "type": "string", "description": "A brief description of the file" }, "previewImage": { "type": "string", "format": "image", "description": "A URL to an image that previews the file." }, "url": { "type": "string", "format": "uri", "description": "The URL to download the file from." }, "size": { "type": [ "string" ], "description": "The size of the download file" }, "format": { "type": [ "string" ], "description": "The format of the download file" } }, "required": [ "name", "url" ], "additionalProperties": false } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/event-latest-teaser.schema.json", "title": "Event Latest Teaser", "description": "Display an event teaser with date, title and location", "type": "object", "properties": { "date": { "title": "Date", "description": "The date of the event", "type": "string", "format": "date", "examples": [ "12.30.2022" ] }, "calendar": { "type": "object", "title": "Calendar", "description": "Calendar icon to display the date", "properties": { "month": { "title": "Month", "description": "The month of the event", "type": "string", "examples": [ "Dec" ] }, "day": { "title": "Day", "description": "The day of the event", "type": "string", "examples": [ "30" ] } }, "additionalProperties": false }, "title": { "title": "Headline", "description": "Title of the event", "type": "string", "format": "markdown", "examples": [ "This is a event teaser title" ] }, "location": { "title": "Location", "description": "Location of the event", "type": "string", "format": "markdown", "examples": [ "This is a location" ] }, "url": { "title": "URL", "description": "The event entry URL to link", "type": "string", "format": "uri", "examples": [ "https://example.com" ] }, "cta": { "title": "Call to Action", "description": "Text for the call to action", "type": "string", "examples": [ "Show event" ] }, "ariaLabel": { "title": "ARIA Label", "description": "ARIA label for accessibility", "type": "string", "examples": [ "Event teaser for " ] }, "className": { "type": "string" } }, "additionalProperties": false, "required": [ "title", "date", "location" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/event-list-teaser.schema.json", "title": "Event List Teaser", "description": "Display an event teaser with date, title and location", "type": "object", "properties": { "category": { "title": "Category", "description": "Category of the event teaser", "type": "string", "examples": [ "Category" ] }, "title": { "title": "Headline", "description": "Title of the event", "type": "string", "format": "markdown", "examples": [ "This is a event teaser title" ] }, "text": { "title": "Text", "description": "Short teaser text for the event", "type": "string", "format": "markdown", "examples": [ "The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence. The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence." ] }, "date": { "title": "Date", "description": "The date of the event", "type": "string", "format": "date", "examples": [ "FRI, JAN 16" ] }, "time": { "title": "Time", "description": "The time of the event", "type": "string", "examples": [ "10:00" ] }, "location": { "title": "Location", "description": "Location of the event", "type": "object", "properties": { "name": { "type": "string", "title": "Location Name", "description": "Name of the location", "examples": [ "Stadthalle" ] }, "address": { "type": "string", "title": "Address", "description": "Address of the location", "examples": [ "Köln" ] } }, "additionalProperties": false }, "tags": { "title": "Tags", "description": "Tags associated with the event", "type": "array", "items": { "type": "string", "examples": [ "AI", "Technology", "Innovation" ] }, "default": [ "Topic 1", "Topic 2" ] }, "image": { "title": "Image", "description": "Image to display in the teaser", "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "Image Source", "description": "URL of the image to display", "examples": [ "https://picsum.photos/seed/flower/800/600" ] }, "alt": { "type": "string", "title": "Alt Text", "description": "Alt text of the image", "examples": [ "This is an image of a flower" ] } }, "additionalProperties": false }, "url": { "title": "URL", "description": "The event entry URL to link", "type": "string", "format": "uri", "examples": [ "https://example.com" ] }, "ctaText": { "title": "Call to Action", "description": "Text for the call to action", "type": "string", "examples": [ "Show event" ] }, "ariaLabel": { "title": "ARIA Label", "description": "ARIA label for accessibility", "type": "string" }, "className": { "type": "string" } }, "additionalProperties": false, "required": [ "title", "date", "location" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/faq.schema.json", "title": "Faq", "description": "Component used to display a Faq section", "type": "object", "properties": { "questions": { "type": "array", "title": "Questions", "description": "The questions and answers in the Faq section", "items": { "title": "Question", "type": "object", "properties": { "question": { "type": "string", "format": "markdown", "title": "Question", "description": "The question", "examples": [ "What is the product made of?" ] }, "answer": { "type": "string", "format": "markdown", "title": "Answer", "description": "The answer to the question", "examples": [ "The product is made of high-quality materials" ] } }, "additionalProperties": false, "required": [ "question" ] }, "minItems": 1 } }, "additionalProperties": false, "required": [ "questions" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/features.schema.json", "title": "Features", "description": "Component used to display a set of features", "type": "object", "properties": { "layout": { "type": "string", "title": "Layout", "description": "The layout variant to use for the features", "enum": [ "largeTiles", "smallTiles", "list" ], "default": "largeTiles" }, "style": { "type": "string", "enum": [ "intext", "stack", "centered", "besideLarge", "besideSmall" ], "default": "stack" }, "ctas": { "type": "object", "properties": { "toggle": { "type": "boolean", "default": true, "title": "CTA Toggle", "description": "Activate/disable the CTAs" }, "style": { "type": "string", "enum": [ "button", "link", "intext" ], "default": "link" } }, "additionalProperties": false }, "feature": { "type": "array", "title": "Features", "description": "The features to display", "items": { "type": "object", "title": "Feature", "properties": { "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "The icon for the feature", "examples": [ "person" ] }, "title": { "type": "string", "title": "Title", "description": "The title of the feature", "examples": [ "Feature 1" ] }, "text": { "type": "string", "title": "Text", "description": "The description of the feature", "format": "markdown", "examples": [ "This is a feature" ] }, "cta": { "type": "object", "properties": { "url": { "type": "string", "title": "Call to Action url", "description": "The CTA url", "default": "#", "format": "uri" }, "label": { "type": "string", "title": "Link Label", "description": "The text label displayed on the link", "default": "See more", "examples": [ "See all our partners" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Icon for the link style of the cta", "examples": [ "arrow-right" ], "default": "arrow-right" } }, "additionalProperties": false } }, "additionalProperties": false }, "minItems": 1, "maxItems": 8 } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/gallery.schema.json", "title": "Gallery", "description": "Component used to display a gallery of images", "type": "object", "properties": { "images": { "type": "array", "title": "Images", "description": "The images to display in the gallery", "items": { "type": "object", "properties": { "src": { "type": "string", "title": "src", "format": "image", "description": "The source of the image", "examples": [ "https://example.com/image1.jpg" ] }, "alt": { "type": "string", "title": "Alt text", "description": "Alt text of the image", "examples": [ "https://example.com/image1.jpg" ] }, "caption": { "type": "string", "format": "markdown", "title": "Caption", "description": "The caption of the image", "examples": [ "Caption Image" ] } }, "additionalProperties": false, "required": [ "src" ] }, "minItems": 1, "maxItems": 10 }, "layout": { "type": "string", "title": "Layout", "description": "The layout of the gallery images", "enum": [ "stack", "smallTiles", "largeTiles" ], "default": "smallTiles" }, "aspectRatio": { "type": "string", "title": "Aspect Ratio", "description": "The aspect ratio of the gallery images", "enum": [ "unset", "square", "wide", "landscape" ], "default": "unset" }, "lightbox": { "type": "boolean", "title": "Lightbox", "description": "Display images in a lightbox gallery", "default": false } }, "additionalProperties": false, "required": [ "images" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/hero.schema.json", "title": "Hero", "description": "Hero component for displaying a prominent visual section with headline, subheadline, text, and call-to-action buttons.", "type": "object", "properties": { "headline": { "title": "Headline", "description": "Headline for the visual", "type": "string", "format": "markdown" }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the module headline", "type": "string", "format": "markdown" }, "text": { "title": "Module Text", "description": "Info text for the module element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "height": { "title": "Height", "type": "string", "enum": [ "small", "default", "fullImage", "fullScreen" ], "default": "default" }, "textbox": { "type": "boolean", "title": "Textbox", "default": true, "description": "Toggle wether you want your text to be displayed within in box" }, "mobileTextBelow": { "type": "boolean", "title": "Mobile Text Below", "description": "On mobile devices, display the text below the image", "default": true }, "invertText": { "type": "boolean", "title": "Invert Text", "description": "Invert the text color for better contrast against the background", "default": false }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "skipButton": { "type": "boolean", "title": "Skip Button", "description": "Add a skip button to the hero module", "default": false }, "overlay": { "title": "Grid layer", "description": "Enable grid layer", "type": "boolean", "default": false }, "image": { "title": "Background image", "description": "Sources of background images for different screen sizes", "type": "object", "required": [ "srcMobile" ], "properties": { "srcMobile": { "title": "Mobile image source", "description": "Background image source for small screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/640/270" ] }, "srcTablet": { "title": "Tablet image source", "description": "Background image source for medium screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/1280/540" ] }, "srcDesktop": { "title": "Desktop image source", "description": "Background image source for large screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/1920/810" ] }, "src": { "title": "Optional source", "description": "Override for img tag of picture element, if needed", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/640/270" ] }, "indent": { "title": "Image indent", "description": "Choose to indent the image horizontally on small screens", "type": "string", "enum": [ "none", "left", "right" ], "default": "none" }, "alt": { "title": "Alt text", "description": "Alt text to display for picture", "type": "string" } }, "additionalProperties": false }, "textPosition": { "title": "Module aligment", "description": "Choose the alginment of the module content", "enum": [ "center", "below", "offset", "left", "right", "corner", "bottom" ], "type": "string", "default": "left" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/html.schema.json", "title": "Html", "description": "Display raw HTML.", "type": "object", "properties": { "html": { "title": "HTML string", "type": "string", "examples": [ "

Hello World

" ] }, "consent": { "title": "Show HTML after consent", "type": "boolean", "default": false }, "consentText": { "type": "string" }, "consentButtonLabel": { "type": "string" }, "consentBackgroundImage": { "type": "string", "format": "image" }, "consentAspectRatio": { "type": "string", "enum": [ "16:9", "16:10", "4:3", "1:1" ], "default": "16:9" }, "inverted": { "title": "Inverted", "description": "Invert the colors of the HTML", "type": "boolean", "default": false }, "className": { "title": "Additional Classes", "description": "Add additional css classes that should be applied to the element", "type": "string" }, "component": { "title": "`ks-component` attribute", "description": "Optional custom component identifier", "type": "string" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/image-story.schema.json", "title": "Image Story", "description": "Image story component for displaying an image alongside text content with customizable layout and buttons.", "type": "object", "properties": { "headline": { "title": "Module Headline", "description": "Headline for the module element", "type": "string", "format": "markdown", "examples": [ "Headline" ] }, "largeHeadline": { "type": "boolean", "title": "Large Headline", "description": "Make the headline larger", "default": false }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the module headline", "type": "string", "format": "markdown", "examples": [ "Subheadline" ] }, "text": { "title": "Module Text", "description": "Info text for the module element", "type": "string", "format": "markdown" }, "layout": { "type": "string", "title": "Layout", "description": "Choose the layout for the component", "enum": [ "textLeft", "imageLeft" ], "default": "imageLeft" }, "padding": { "type": "boolean", "title": "Padding", "default": false, "description": "Give the component padding" }, "buttons": { "title": "Buttons", "description": "Buttons of the Button Group", "type": "array", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/button.schema.json", "title": "Button", "description": "Component used for user interaction", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" }, "variant": { "type": "string", "title": "Variant", "description": "Variant of button to be used", "enum": [ "primary", "secondary", "tertiary" ], "default": "secondary" }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "size": { "type": "string", "title": "Size", "description": "Size of button to use", "enum": [ "small", "medium", "large" ], "default": "medium" }, "disabled": { "type": "boolean", "title": "Disabled?", "description": "Whether the button should be disabled", "default": false }, "type": { "type": "string", "title": "Button Type", "enum": [ "button", "submit", "reset" ] } }, "additionalProperties": false, "required": [ "label" ] } }, "image": { "title": "Image", "description": "Image displayed alongside the text content", "type": "object", "properties": { "src": { "title": "Image source", "description": "Image source to use", "type": "string", "format": "image" }, "aspectRatio": { "type": "string", "title": "Aspect Ratio", "description": "The aspect ratio of the image", "enum": [ "unset", "square", "wide", "landscape" ], "default": "unset" }, "alt": { "title": "Alt text", "description": "Image description", "type": "string" }, "vAlign": { "title": "Image vertical alignment", "description": "Select a vertical alignment for the image", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "top" } }, "additionalProperties": false }, "textAlign": { "title": "Text Alignment", "description": "Choose the alginment of the text", "enum": [ "left", "center" ], "type": "string", "default": "left" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/image-text.schema.json", "title": "Image Text", "description": "Component used to display an image beside or above/below a text block", "type": "object", "properties": { "text": { "type": "string", "format": "markdown", "title": "Text", "description": "Text content to display beside the image", "examples": [ "This is a sample text" ] }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "image": { "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "Image Source", "description": "URL of the image to display", "examples": [ "http://example.com/image.jpg" ] }, "alt": { "type": "string", "title": "Alt Text", "description": "Alt text of the image", "examples": [ "http://example.com/image.jpg" ] } }, "additionalProperties": false }, "layout": { "type": "string", "enum": [ "above", "below", "beside-right", "beside-left" ], "title": "Layout", "description": "Position of the image relative to the text", "default": "above" } }, "required": [ "text", "image", "layout" ], "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/logos.schema.json", "title": "Logos", "description": "Component used to display a set of logos", "type": "object", "properties": { "tagline": { "type": "string", "title": "Logo Tagline", "description": "A short tagline atop the logos", "examples": [ "Our Customers" ] }, "logo": { "type": "array", "title": "Logos", "description": "The logos to display", "items": { "title": "Logo", "description": "Logo entry for Logos component", "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "URL", "description": "The URL of the logo image", "examples": [ "img/logos/logoipsum-344.svg", "img/logos/logoipsum-347.svg", "img/logos/logoipsum-352.svg", "img/logos/logoipsum-356.svg", "img/logos/logoipsum-358.svg", "img/logos/logoipsum-369.svg" ] }, "alt": { "type": "string", "title": "Caption", "description": "The alt text of the logo", "examples": [ "Logo 1" ] } }, "additionalProperties": false, "required": [ "src" ] }, "minItems": 1 }, "align": { "type": "string", "title": "Alignment", "description": "The alignment of the logo layout", "enum": [ "left", "center" ], "default": "center" }, "logosPerRow": { "type": "integer", "title": "Logos Per Row", "description": "The amount of logos to display per row", "minimum": 2, "maximum": 8, "examples": [ 5 ] }, "cta": { "type": "object", "title": "Call to Action", "description": "The call to action", "properties": { "toggle": { "type": "boolean", "default": false, "title": "CTA Toggle", "description": "Activate/disable the CTA" }, "text": { "type": "string", "title": "Call to Action Text", "description": "A short CTA text", "examples": [ "Explore the success stories of our valued customers and discover more about their journey." ] }, "link": { "type": "string", "title": "Call to Action Link", "description": "The CTA link", "default": "#", "format": "uri" }, "label": { "type": "string", "title": "Link Label", "description": "The text label displayed on the link", "examples": [ "See all customers" ] }, "style": { "type": "string", "enum": [ "button", "text" ], "default": "text" } }, "additionalProperties": false, "required": [ "style", "link", "label" ] } }, "additionalProperties": false, "required": [ "logos" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/mosaic.schema.json", "title": "Mosaic", "description": "Mosaic component for displaying a collection of tiles in various layouts.", "type": "object", "properties": { "layout": { "title": "Layout", "description": "Layout of the mosaic component", "type": "string", "enum": [ "alternate", "textLeft", "textRight" ], "default": "alternate" }, "largeHeadlines": { "type": "boolean", "title": "Large Headlines", "description": "Make the headlines larger", "default": false }, "tile": { "type": "array", "title": "Tiles", "description": "The tiles to display", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/tile.schema.json", "title": "Tile", "type": "object", "properties": { "headline": { "title": "Headline", "description": "Headline for the tile", "type": "string", "format": "markdown" }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the tile headline", "type": "string", "format": "markdown" }, "text": { "title": "Module Text", "description": "Text for tile", "type": "string", "format": "markdown" }, "image": { "type": "object", "properties": { "src": { "title": "Source", "description": "Picture source", "type": "string", "format": "image", "examples": [ "img/close-up-young-business-team-working.png" ] }, "alt": { "title": "Alt text", "description": "Alt text to display for picture", "type": "string" } }, "additionalProperties": false }, "button": { "type": "object", "properties": { "toggle": { "title": "Button Toggle", "description": "Toggle wether the Button is displayed or not", "type": "boolean", "default": true }, "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" } }, "additionalProperties": false }, "backgroundColor": { "title": "Background color", "description": "Background color for the whole element", "type": "string", "format": "color" }, "backgroundImage": { "title": "Background image", "description": "Background image for the whole element", "type": "string", "format": "image" }, "textColor": { "title": "Text color", "description": "Overwrite the color to use for the text content", "type": "string", "format": "color" } }, "additionalProperties": false, "required": [ "headline", "image" ] }, "minItems": 1, "maxItems": 20 } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/slider.schema.json", "title": "Slider", "description": "Slider component for displaying a carousel of content components.", "type": "object", "properties": { "autoplay": { "title": "Auto play", "description": "Automatically move to next slide after 4 seconds without user interaction", "type": "boolean", "default": false }, "nav": { "title": "Show Navigation", "description": "Add bullet navigation", "type": "boolean", "examples": [ true ] }, "teaseNeighbours": { "title": "Tease Neighbour Slides", "type": "boolean", "default": false }, "equalHeight": { "title": "Equalize slides heights", "type": "boolean", "default": true }, "gap": { "title": "Gap", "description": "Size of the gap added between slides in pixels", "type": "number", "default": 0 }, "arrows": { "title": "Show Arrows", "description": "Add arrows on the left and right to navigate to next or previous slide", "type": "boolean", "examples": [ true ] }, "variant": { "title": "Type", "description": "Type of the movement", "type": "string", "enum": [ "slider", "carousel" ], "default": "carousel" }, "className": { "title": "Class", "description": "Additional css classes attached to the wrapping element", "type": "string" }, "components": { "type": "array", "title": "Content", "description": "Allowed components for content", "items": { "anyOf": [ { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/cta.schema.json", "title": "Cta", "description": "Call to Action (CTA) component for prompting users to take specific actions on a website.", "type": "object", "properties": { "headline": { "title": "Component Headline", "description": "Headline for the Component element", "type": "string", "format": "markdown", "examples": [ "Headline" ] }, "sub": { "title": "Component Subheadline", "description": "Subheadline below the component headline", "type": "string", "format": "markdown", "examples": [ "Subheadline" ] }, "text": { "title": "Component Text", "description": "Info text for the component element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "inverted": { "title": "Inverted", "description": "Invert the text and button colors for use on dark backgrounds", "default": false, "type": "boolean" }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "backgroundColor": { "title": "Background color", "description": "Background color for the whole element", "type": "string", "format": "color" }, "backgroundImage": { "title": "Background image", "description": "Background image for the whole element", "type": "string", "format": "image" }, "image": { "title": "Image", "description": "Image displayed alongside the text content", "type": "object", "properties": { "src": { "title": "Image source", "description": "Image source to use", "type": "string", "format": "image" }, "padding": { "title": "Padding", "description": "Toggle padding of the image", "type": "boolean", "default": true }, "alt": { "title": "Alt text", "description": "Image description", "type": "string" }, "align": { "title": "Vertical alignment of the image", "description": "Select a vertical alignment for the image", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "center" } }, "additionalProperties": false }, "order": { "title": "Order", "description": "Choose what comes first on mobile and desktop: image or text", "type": "object", "properties": { "mobileImageLast": { "title": "Mobile image after text", "description": "Switch to displaying the image after the text on mobile", "type": "boolean", "default": false }, "desktopImageLast": { "title": "Desktop image after text", "description": "Switch to displaying the image after the text on desktop", "type": "boolean", "default": true } }, "additionalProperties": false }, "textAlign": { "title": "Text Alignment", "description": "Choose the alginment of the text", "enum": [ "left", "center" ], "type": "string", "default": "left" }, "align": { "title": "Vertical alignment of the content", "description": "Select a vertical alignment for the content", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "center" }, "padding": { "title": "Padding", "description": "Toggle padding of the content", "type": "boolean", "default": false } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/features.schema.json", "title": "Features", "description": "Component used to display a set of features", "type": "object", "properties": { "layout": { "type": "string", "title": "Layout", "description": "The layout variant to use for the features", "enum": [ "largeTiles", "smallTiles", "list" ], "default": "largeTiles" }, "style": { "type": "string", "enum": [ "intext", "stack", "centered", "besideLarge", "besideSmall" ], "default": "stack" }, "ctas": { "type": "object", "properties": { "toggle": { "type": "boolean", "default": true, "title": "CTA Toggle", "description": "Activate/disable the CTAs" }, "style": { "type": "string", "enum": [ "button", "link", "intext" ], "default": "link" } }, "additionalProperties": false }, "feature": { "type": "array", "title": "Features", "description": "The features to display", "items": { "type": "object", "title": "Feature", "properties": { "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "The icon for the feature", "examples": [ "person" ] }, "title": { "type": "string", "title": "Title", "description": "The title of the feature", "examples": [ "Feature 1" ] }, "text": { "type": "string", "title": "Text", "description": "The description of the feature", "format": "markdown", "examples": [ "This is a feature" ] }, "cta": { "type": "object", "properties": { "url": { "type": "string", "title": "Call to Action url", "description": "The CTA url", "default": "#", "format": "uri" }, "label": { "type": "string", "title": "Link Label", "description": "The text label displayed on the link", "default": "See more", "examples": [ "See all our partners" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Icon for the link style of the cta", "examples": [ "arrow-right" ], "default": "arrow-right" } }, "additionalProperties": false } }, "additionalProperties": false }, "minItems": 1, "maxItems": 8 } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/gallery.schema.json", "title": "Gallery", "description": "Component used to display a gallery of images", "type": "object", "properties": { "images": { "type": "array", "title": "Images", "description": "The images to display in the gallery", "items": { "type": "object", "properties": { "src": { "type": "string", "title": "src", "format": "image", "description": "The source of the image", "examples": [ "https://example.com/image1.jpg" ] }, "alt": { "type": "string", "title": "Alt text", "description": "Alt text of the image", "examples": [ "https://example.com/image1.jpg" ] }, "caption": { "type": "string", "format": "markdown", "title": "Caption", "description": "The caption of the image", "examples": [ "Caption Image" ] } }, "additionalProperties": false, "required": [ "src" ] }, "minItems": 1, "maxItems": 10 }, "layout": { "type": "string", "title": "Layout", "description": "The layout of the gallery images", "enum": [ "stack", "smallTiles", "largeTiles" ], "default": "smallTiles" }, "aspectRatio": { "type": "string", "title": "Aspect Ratio", "description": "The aspect ratio of the gallery images", "enum": [ "unset", "square", "wide", "landscape" ], "default": "unset" }, "lightbox": { "type": "boolean", "title": "Lightbox", "description": "Display images in a lightbox gallery", "default": false } }, "additionalProperties": false, "required": [ "images" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/hero.schema.json", "title": "Hero", "description": "Hero component for displaying a prominent visual section with headline, subheadline, text, and call-to-action buttons.", "type": "object", "properties": { "headline": { "title": "Headline", "description": "Headline for the visual", "type": "string", "format": "markdown" }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the module headline", "type": "string", "format": "markdown" }, "text": { "title": "Module Text", "description": "Info text for the module element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "height": { "title": "Height", "type": "string", "enum": [ "small", "default", "fullImage", "fullScreen" ], "default": "default" }, "textbox": { "type": "boolean", "title": "Textbox", "default": true, "description": "Toggle wether you want your text to be displayed within in box" }, "mobileTextBelow": { "type": "boolean", "title": "Mobile Text Below", "description": "On mobile devices, display the text below the image", "default": true }, "invertText": { "type": "boolean", "title": "Invert Text", "description": "Invert the text color for better contrast against the background", "default": false }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "skipButton": { "type": "boolean", "title": "Skip Button", "description": "Add a skip button to the hero module", "default": false }, "overlay": { "title": "Grid layer", "description": "Enable grid layer", "type": "boolean", "default": false }, "image": { "title": "Background image", "description": "Sources of background images for different screen sizes", "type": "object", "required": [ "srcMobile" ], "properties": { "srcMobile": { "title": "Mobile image source", "description": "Background image source for small screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/640/270" ] }, "srcTablet": { "title": "Tablet image source", "description": "Background image source for medium screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/1280/540" ] }, "srcDesktop": { "title": "Desktop image source", "description": "Background image source for large screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/1920/810" ] }, "src": { "title": "Optional source", "description": "Override for img tag of picture element, if needed", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/640/270" ] }, "indent": { "title": "Image indent", "description": "Choose to indent the image horizontally on small screens", "type": "string", "enum": [ "none", "left", "right" ], "default": "none" }, "alt": { "title": "Alt text", "description": "Alt text to display for picture", "type": "string" } }, "additionalProperties": false }, "textPosition": { "title": "Module aligment", "description": "Choose the alginment of the module content", "enum": [ "center", "below", "offset", "left", "right", "corner", "bottom" ], "type": "string", "default": "left" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/image-text.schema.json", "title": "Image Text", "description": "Component used to display an image beside or above/below a text block", "type": "object", "properties": { "text": { "type": "string", "format": "markdown", "title": "Text", "description": "Text content to display beside the image", "examples": [ "This is a sample text" ] }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "image": { "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "Image Source", "description": "URL of the image to display", "examples": [ "http://example.com/image.jpg" ] }, "alt": { "type": "string", "title": "Alt Text", "description": "Alt text of the image", "examples": [ "http://example.com/image.jpg" ] } }, "additionalProperties": false }, "layout": { "type": "string", "enum": [ "above", "below", "beside-right", "beside-left" ], "title": "Layout", "description": "Position of the image relative to the text", "default": "above" } }, "required": [ "text", "image", "layout" ], "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/logos.schema.json", "title": "Logos", "description": "Component used to display a set of logos", "type": "object", "properties": { "tagline": { "type": "string", "title": "Logo Tagline", "description": "A short tagline atop the logos", "examples": [ "Our Customers" ] }, "logo": { "type": "array", "title": "Logos", "description": "The logos to display", "items": { "title": "Logo", "description": "Logo entry for Logos component", "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "URL", "description": "The URL of the logo image", "examples": [ "img/logos/logoipsum-344.svg", "img/logos/logoipsum-347.svg", "img/logos/logoipsum-352.svg", "img/logos/logoipsum-356.svg", "img/logos/logoipsum-358.svg", "img/logos/logoipsum-369.svg" ] }, "alt": { "type": "string", "title": "Caption", "description": "The alt text of the logo", "examples": [ "Logo 1" ] } }, "additionalProperties": false, "required": [ "src" ] }, "minItems": 1 }, "align": { "type": "string", "title": "Alignment", "description": "The alignment of the logo layout", "enum": [ "left", "center" ], "default": "center" }, "logosPerRow": { "type": "integer", "title": "Logos Per Row", "description": "The amount of logos to display per row", "minimum": 2, "maximum": 8, "examples": [ 5 ] }, "cta": { "type": "object", "title": "Call to Action", "description": "The call to action", "properties": { "toggle": { "type": "boolean", "default": false, "title": "CTA Toggle", "description": "Activate/disable the CTA" }, "text": { "type": "string", "title": "Call to Action Text", "description": "A short CTA text", "examples": [ "Explore the success stories of our valued customers and discover more about their journey." ] }, "link": { "type": "string", "title": "Call to Action Link", "description": "The CTA link", "default": "#", "format": "uri" }, "label": { "type": "string", "title": "Link Label", "description": "The text label displayed on the link", "examples": [ "See all customers" ] }, "style": { "type": "string", "enum": [ "button", "text" ], "default": "text" } }, "additionalProperties": false, "required": [ "style", "link", "label" ] } }, "additionalProperties": false, "required": [ "logos" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/stats.schema.json", "title": "Stats", "description": "Component used to display stats with a number upcounter", "type": "object", "properties": { "align": { "title": "Align", "description": "Alignment of the stats content", "type": "string", "enum": [ "left", "center" ], "default": "center" }, "stat": { "title": "Stats", "type": "array", "description": "The stats to display with a number upcounter", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/stat.schema.json", "title": "Stat", "description": "Stat entry of Stats component", "type": "object", "properties": { "number": { "title": "Number", "description": "The number of the stat", "type": "string", "examples": [ "1", "5x", "2", "40%", "bis zu 100" ] }, "description": { "title": "Description", "description": "Optional description of the stat", "type": "string", "format": "markdown" }, "title": { "title": "Title", "description": "Title of the stat", "type": "string", "format": "markdown", "examples": [ "Stat 1", "Stat 2", "Stat 3", "Stat 4" ] }, "icon": { "title": "Icon", "description": "Optional icon of the stat", "type": "string", "format": "icon", "examples": [ "person", "home", "map" ] } }, "additionalProperties": false, "required": [ "number", "label" ], "examples": [ { "number": 1, "label": "Stat 1" }, { "number": 2, "label": "Stat 2" }, { "number": 3, "label": "Stat 3" }, { "value": 4, "label": "Stat 4" } ] }, "minItems": 1, "maxItems": 4 } }, "additionalProperties": false, "required": [ "stats" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/teaser-card.schema.json", "title": "Teaser Card", "description": "Component used to tease content", "type": "object", "properties": { "headline": { "type": "string", "title": "Headline", "description": "Headline for the teaser card", "format": "markdown" }, "text": { "type": "string", "title": "Text", "description": "Body text for the teaser card", "format": "markdown" }, "label": { "type": "string", "title": "Label", "description": "Label for the Teaser Card" }, "layout": { "type": "string", "enum": [ "stack", "row", "compact" ], "description": "Layout for the Teaser Card", "default": "stack" }, "centered": { "type": "boolean", "title": "Centered", "description": "Whether the Teaser Card is centered", "default": false }, "url": { "type": "string", "title": "Url", "description": "Url that should be linked", "format": "uri" }, "button": { "type": "object", "properties": { "label": { "title": "Label", "type": "string", "description": "Label of the button. Still A11Y relevant when the button is hidden." }, "chevron": { "title": "Icon", "description": "Toggle arrow icon", "type": "boolean", "default": false }, "hidden": { "type": "boolean", "title": "Display Button", "description": "Toggle wether you want the card to have a visible button or not", "default": false } }, "required": [ "label" ], "additionalProperties": false }, "image": { "type": "string", "title": "Image", "description": "Image to display as cover", "format": "image" }, "imageAlt": { "type": "string", "title": "Image Alt", "description": "Alternative text for the image, used for accessibility" }, "imageRatio": { "type": "string", "enum": [ "wide", "landscape", "square", "unset" ], "description": "Aspect ratio of the image", "default": "wide" } }, "additionalProperties": false, "required": [ "topic", "url" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/testimonials.schema.json", "title": "Testimonials", "description": "Display testimonials with an optional image and rating", "type": "object", "properties": { "layout": { "title": "Layout", "description": "The testimonial layout", "type": "string", "enum": [ "slider", "list", "alternating" ], "default": "slider" }, "quoteSigns": { "title": "Style of the quote signs", "description": "The style of the quote signs", "type": "string", "enum": [ "normal", "large", "none" ], "default": "normal" }, "testimonial": { "type": "array", "title": "Testimonials", "description": "Add testimonials featuring an image, a quote, a source and a rating", "items": { "title": "Testimonial", "description": "Testimonial entry of Testimonials component", "type": "object", "properties": { "quote": { "title": "Quote", "description": "The testimonial quote", "type": "string", "format": "markdown", "examples": [ "This product is amazing!" ] }, "name": { "title": "Name", "description": "The name of the quote author", "type": "string", "examples": [ "John Doe" ] }, "title": { "title": "Title", "description": "The title of the quote author", "type": "string" }, "image": { "type": "object", "properties": { "src": { "title": "Source", "description": "The image to display with the testimonial", "type": "string", "format": "image", "examples": [ "https://example.com/image.jpg" ] }, "alt": { "title": "Alt Text", "description": "The alt text of the image file", "type": "string" } }, "additionalProperties": false }, "rating": { "title": "Rating", "description": "The rating of the testimonial, from 1 to 5", "type": "integer", "minimum": 1, "maximum": 5 } }, "additionalProperties": false, "required": [ "quote", "name", "image" ] } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/text.schema.json", "title": "Text", "description": "Component used for displaying text in chapters", "type": "object", "properties": { "text": { "type": "string", "format": "markdown", "title": "Text", "description": "Text", "examples": [ "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." ] }, "layout": { "type": "string", "title": "Layout", "description": "Variant of layout to be used", "enum": [ "singleColumn", "multiColumn" ], "default": "singleColumn" }, "align": { "type": "string", "title": "Alignment", "description": "Alignment of text", "enum": [ "left", "center" ], "default": "left" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false } }, "additionalProperties": false, "required": [ "text" ] } ] } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/stats.schema.json", "title": "Stats", "description": "Component used to display stats with a number upcounter", "type": "object", "properties": { "align": { "title": "Align", "description": "Alignment of the stats content", "type": "string", "enum": [ "left", "center" ], "default": "center" }, "stat": { "title": "Stats", "type": "array", "description": "The stats to display with a number upcounter", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/stat.schema.json", "title": "Stat", "description": "Stat entry of Stats component", "type": "object", "properties": { "number": { "title": "Number", "description": "The number of the stat", "type": "string", "examples": [ "1", "5x", "2", "40%", "bis zu 100" ] }, "description": { "title": "Description", "description": "Optional description of the stat", "type": "string", "format": "markdown" }, "title": { "title": "Title", "description": "Title of the stat", "type": "string", "format": "markdown", "examples": [ "Stat 1", "Stat 2", "Stat 3", "Stat 4" ] }, "icon": { "title": "Icon", "description": "Optional icon of the stat", "type": "string", "format": "icon", "examples": [ "person", "home", "map" ] } }, "additionalProperties": false, "required": [ "number", "label" ], "examples": [ { "number": 1, "label": "Stat 1" }, { "number": 2, "label": "Stat 2" }, { "number": 3, "label": "Stat 3" }, { "value": 4, "label": "Stat 4" } ] }, "minItems": 1, "maxItems": 4 } }, "additionalProperties": false, "required": [ "stats" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/teaser-card.schema.json", "title": "Teaser Card", "description": "Component used to tease content", "type": "object", "properties": { "headline": { "type": "string", "title": "Headline", "description": "Headline for the teaser card", "format": "markdown" }, "text": { "type": "string", "title": "Text", "description": "Body text for the teaser card", "format": "markdown" }, "label": { "type": "string", "title": "Label", "description": "Label for the Teaser Card" }, "layout": { "type": "string", "enum": [ "stack", "row", "compact" ], "description": "Layout for the Teaser Card", "default": "stack" }, "centered": { "type": "boolean", "title": "Centered", "description": "Whether the Teaser Card is centered", "default": false }, "url": { "type": "string", "title": "Url", "description": "Url that should be linked", "format": "uri" }, "button": { "type": "object", "properties": { "label": { "title": "Label", "type": "string", "description": "Label of the button. Still A11Y relevant when the button is hidden." }, "chevron": { "title": "Icon", "description": "Toggle arrow icon", "type": "boolean", "default": false }, "hidden": { "type": "boolean", "title": "Display Button", "description": "Toggle wether you want the card to have a visible button or not", "default": false } }, "required": [ "label" ], "additionalProperties": false }, "image": { "type": "string", "title": "Image", "description": "Image to display as cover", "format": "image" }, "imageAlt": { "type": "string", "title": "Image Alt", "description": "Alternative text for the image, used for accessibility" }, "imageRatio": { "type": "string", "enum": [ "wide", "landscape", "square", "unset" ], "description": "Aspect ratio of the image", "default": "wide" } }, "additionalProperties": false, "required": [ "topic", "url" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/testimonials.schema.json", "title": "Testimonials", "description": "Display testimonials with an optional image and rating", "type": "object", "properties": { "layout": { "title": "Layout", "description": "The testimonial layout", "type": "string", "enum": [ "slider", "list", "alternating" ], "default": "slider" }, "quoteSigns": { "title": "Style of the quote signs", "description": "The style of the quote signs", "type": "string", "enum": [ "normal", "large", "none" ], "default": "normal" }, "testimonial": { "type": "array", "title": "Testimonials", "description": "Add testimonials featuring an image, a quote, a source and a rating", "items": { "title": "Testimonial", "description": "Testimonial entry of Testimonials component", "type": "object", "properties": { "quote": { "title": "Quote", "description": "The testimonial quote", "type": "string", "format": "markdown", "examples": [ "This product is amazing!" ] }, "name": { "title": "Name", "description": "The name of the quote author", "type": "string", "examples": [ "John Doe" ] }, "title": { "title": "Title", "description": "The title of the quote author", "type": "string" }, "image": { "type": "object", "properties": { "src": { "title": "Source", "description": "The image to display with the testimonial", "type": "string", "format": "image", "examples": [ "https://example.com/image.jpg" ] }, "alt": { "title": "Alt Text", "description": "The alt text of the image file", "type": "string" } }, "additionalProperties": false }, "rating": { "title": "Rating", "description": "The rating of the testimonial, from 1 to 5", "type": "integer", "minimum": 1, "maximum": 5 } }, "additionalProperties": false, "required": [ "quote", "name", "image" ] } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/text.schema.json", "title": "Text", "description": "Component used for displaying text in chapters", "type": "object", "properties": { "text": { "type": "string", "format": "markdown", "title": "Text", "description": "Text", "examples": [ "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." ] }, "layout": { "type": "string", "title": "Layout", "description": "Variant of layout to be used", "enum": [ "singleColumn", "multiColumn" ], "default": "singleColumn" }, "align": { "type": "string", "title": "Alignment", "description": "Alignment of text", "enum": [ "left", "center" ], "default": "left" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false } }, "additionalProperties": false, "required": [ "text" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/video-curtain.schema.json", "title": "Video Curtain", "description": "Video curtain component for displaying a video background with overlay text and buttons.", "type": "object", "properties": { "headline": { "title": "Headline", "description": "Headline for the visual", "type": "string", "format": "markdown" }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the module headline", "type": "string", "format": "markdown" }, "text": { "title": "Module Text", "description": "Info text for the module element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "overlay": { "title": "Grid layer", "description": "Enable grid layer", "type": "boolean", "default": false }, "video": { "title": "Background video", "description": "Sources of background videos for different screen sizes", "type": "object", "required": [ "srcMobile" ], "properties": { "srcMobile": { "title": "Mobile video source", "description": "Background video source for small screens", "type": "string", "format": "video", "examples": [ "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4" ] }, "srcTablet": { "title": "Tablet video source", "description": "Background video source for medium screens", "type": "string", "format": "video", "examples": [ "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4" ] }, "srcDesktop": { "title": "Desktop video source", "description": "Background video source for large screens", "type": "string", "format": "video", "examples": [ "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4" ] } }, "additionalProperties": false }, "textPosition": { "title": "Module aligment", "description": "Choose the alginment of the module content", "enum": [ "center", "bottom", "left", "right", "corner" ], "type": "string", "default": "center" } }, "additionalProperties": false } ] } }, "asideComponents": { "type": "array", "title": "Aside", "description": "Allowed components for the aside half of the split layout", "items": { "anyOf": [ { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/blog-teaser.schema.json", "title": "Blog Teaser", "description": "Display a blog teaser with date, tags, headline, teaser text and author", "type": "object", "properties": { "date": { "title": "Date", "description": "The date of the blog post", "type": "string", "format": "date", "examples": [ "12/30/2022" ] }, "tags": { "type": "array", "title": "Tags", "description": "The tags for the blog post", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/blog-tag.schema.json", "title": "Blog Tag", "description": "Tag given to a blog post", "type": "object", "properties": { "entry": { "title": "Entry", "description": "Name of the tag entry", "type": "string" } }, "additionalProperties": false, "required": [ "entry" ] } }, "headline": { "title": "Headline", "description": "The headline of the blog post", "type": "string", "format": "markdown", "examples": [ "This is a blog post headline" ] }, "teaserText": { "title": "Teaser Text", "description": "The teaser text of the blog post", "type": "string", "format": "markdown", "examples": [ "This is a teaser text for the blog post" ] }, "image": { "title": "Image", "description": "The preview image for the blog post", "type": "string", "format": "image", "examples": [ "img/close-up-young-business-team-working.png" ] }, "alt": { "title": "Alt", "description": "The alt text for the preview image", "type": "string", "examples": [ "Image of a business team working" ] }, "link": { "type": "object", "title": "Link", "description": "URL and label for the blog post linked", "properties": { "url": { "title": "URL", "description": "The blog entry URL to link", "type": "string", "format": "uri", "examples": [ "https://example.com" ] }, "text": { "title": "Text", "description": "The text for the link", "type": "string", "default": "Read article", "examples": [ "Read article" ] } }, "additionalProperties": false, "required": [ "url" ] }, "readingTime": { "title": "Reading Time", "description": "Time to read for the blog post", "type": "string", "examples": [ "5 min read" ] }, "author": { "type": "object", "title": "Author", "description": "The author of the blog post", "properties": { "name": { "title": "Name", "description": "The name of the author", "type": "string", "examples": [ "John Doe" ] }, "title": { "title": "Title", "description": "The title of the author", "type": "string", "examples": [ "CEO" ] }, "image": { "title": "Image", "description": "The image URL of the author", "type": "string", "format": "image", "examples": [ "img/people/author-emily.png" ] } }, "additionalProperties": false, "required": [ "name" ] }, "className": { "type": "string" } }, "additionalProperties": false, "required": [ "headline", "teaserText" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/business-card.schema.json", "title": "Business Card", "description": "Business card component representing an individual's or company's contact information and branding.", "type": "object", "properties": { "centered": { "type": "boolean", "title": "Centered", "description": "Whether the business card content is centered.", "default": false }, "image": { "type": "object", "title": "Background Image", "description": "A background or feature image displayed on the business card.", "properties": { "src": { "type": "string", "format": "uri", "description": "URL of the background image shown on the business card." }, "alt": { "type": "string", "description": "Alternative text describing the background image." } }, "required": [ "src" ], "additionalProperties": false }, "logo": { "type": "object", "title": "Company Logo", "description": "The logo of the company or organization displayed on the business card.", "properties": { "src": { "type": "string", "format": "uri", "description": "URL of the company or organization logo." }, "alt": { "type": "string", "description": "Alternative text describing the logo." }, "url": { "type": "string", "format": "uri", "description": "URL to the company's website or landing page." } }, "required": [ "src" ], "additionalProperties": false }, "topic": { "type": "string", "title": "Topic", "description": "A headline or main topic for the business card, such as a job title or department." }, "address": { "type": "string", "title": "Address", "description": "The physical or mailing address displayed on the business card." }, "avatar": { "type": "object", "title": "Avatar", "description": "A profile image or avatar representing the person on the business card.", "properties": { "src": { "type": "string", "format": "uri", "description": "URL of the person's avatar or profile image." }, "alt": { "type": "string", "description": "Alternative text describing the avatar." } }, "required": [ "src" ], "additionalProperties": false }, "contact": { "type": "array", "title": "Contact Information", "description": "A list of contact methods for the person or business (e.g., email, phone, website).", "items": { "type": "object", "properties": { "label": { "type": "string", "description": "Label describing the contact method (e.g., 'Email', 'Phone')." }, "icon": { "type": "string", "description": "Icon name or identifier representing the contact method." }, "url": { "type": "string", "format": "uri", "description": "URL or link for the contact method, if applicable." } }, "required": [ "label" ], "additionalProperties": false } }, "buttons": { "type": "array", "title": "Buttons", "description": "A list of action buttons shown on the business card.", "items": { "type": "object", "properties": { "label": { "type": "string", "description": "Text label for the link." }, "url": { "type": "string", "format": "uri", "description": "URL the link points to." } }, "required": [ "label", "url" ], "additionalProperties": false } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/button.schema.json", "title": "Button", "description": "Component used for user interaction", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" }, "variant": { "type": "string", "title": "Variant", "description": "Variant of button to be used", "enum": [ "primary", "secondary", "tertiary" ], "default": "secondary" }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "size": { "type": "string", "title": "Size", "description": "Size of button to use", "enum": [ "small", "medium", "large" ], "default": "medium" }, "disabled": { "type": "boolean", "title": "Disabled?", "description": "Whether the button should be disabled", "default": false }, "type": { "type": "string", "title": "Button Type", "enum": [ "button", "submit", "reset" ] } }, "additionalProperties": false, "required": [ "label" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/contact.schema.json", "title": "Contact", "description": "Component used for user interaction", "type": "object", "properties": { "image": { "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 Isabella Doe" ] }, "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 }, "title": { "title": "Title", "description": "Name, company name, etc.", "type": "string", "examples": [ "Isabella Doe" ] }, "subtitle": { "title": "Subtitle", "description": "Position, profession, department, location, etc.", "type": "string", "examples": [ "CEO at Company" ] }, "links": { "type": "array", "items": { "type": "object", "properties": { "icon": { "type": "string", "format": "icon" }, "label": { "type": "string" }, "url": { "type": "string", "format": "uri" }, "newTab": { "title": "Open link in new Tab", "description": "Open link in new Tab", "type": "boolean", "default": false }, "ariaLabel": { "title": "Aria Label", "description": "Aria label for the link", "type": "string", "examples": [ "Link to Isabella Doe's social media profile" ] } }, "additionalProperties": false }, "examples": [ [ { "icon": "phone", "label": "0228 / 688 966 20", "url": "tel:+4922868896620" }, { "icon": "email", "label": "mail@example.com", "url": "mailto:mail@example.com" } ] ] }, "copy": { "title": "Copy text", "type": "string" }, "className": { "title": "Class", "description": "Additional css classes attached to the wrapping element", "type": "string" }, "component": { "title": "`ks-component` attribute", "description": "Optional custom component identifier", "type": "string" } }, "additionalProperties": false, "required": [ "name" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/content-nav.schema.json", "title": "Content Nav", "description": "Content navigation component for navigating related topics or sections within content.", "type": "object", "properties": { "image": { "type": "object", "properties": { "src": { "type": "string", "format": "uri", "description": "URL of the image to display in the content nav." }, "alt": { "type": "string", "description": "Alternative text for the image." } }, "required": [ "src" ], "additionalProperties": false }, "topic": { "type": "string", "description": "The topic of the content being navigated." }, "links": { "type": "array", "items": { "type": "object", "properties": { "label": { "type": "string", "description": "The text label for the link." }, "url": { "type": "string", "format": "uri", "description": "The URL the link points to." } }, "required": [ "label", "url" ], "additionalProperties": false } }, "initiallyShown": { "type": "number", "default": 4, "description": "Determines how many links are initially shown in the content nav. If there are more links, a 'Show More' button will be displayed." } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/cta.schema.json", "title": "Cta", "description": "Call to Action (CTA) component for prompting users to take specific actions on a website.", "type": "object", "properties": { "headline": { "title": "Component Headline", "description": "Headline for the Component element", "type": "string", "format": "markdown", "examples": [ "Headline" ] }, "sub": { "title": "Component Subheadline", "description": "Subheadline below the component headline", "type": "string", "format": "markdown", "examples": [ "Subheadline" ] }, "text": { "title": "Component Text", "description": "Info text for the component element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "inverted": { "title": "Inverted", "description": "Invert the text and button colors for use on dark backgrounds", "default": false, "type": "boolean" }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "backgroundColor": { "title": "Background color", "description": "Background color for the whole element", "type": "string", "format": "color" }, "backgroundImage": { "title": "Background image", "description": "Background image for the whole element", "type": "string", "format": "image" }, "image": { "title": "Image", "description": "Image displayed alongside the text content", "type": "object", "properties": { "src": { "title": "Image source", "description": "Image source to use", "type": "string", "format": "image" }, "padding": { "title": "Padding", "description": "Toggle padding of the image", "type": "boolean", "default": true }, "alt": { "title": "Alt text", "description": "Image description", "type": "string" }, "align": { "title": "Vertical alignment of the image", "description": "Select a vertical alignment for the image", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "center" } }, "additionalProperties": false }, "order": { "title": "Order", "description": "Choose what comes first on mobile and desktop: image or text", "type": "object", "properties": { "mobileImageLast": { "title": "Mobile image after text", "description": "Switch to displaying the image after the text on mobile", "type": "boolean", "default": false }, "desktopImageLast": { "title": "Desktop image after text", "description": "Switch to displaying the image after the text on desktop", "type": "boolean", "default": true } }, "additionalProperties": false }, "textAlign": { "title": "Text Alignment", "description": "Choose the alginment of the text", "enum": [ "left", "center" ], "type": "string", "default": "left" }, "align": { "title": "Vertical alignment of the content", "description": "Select a vertical alignment for the content", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "center" }, "padding": { "title": "Padding", "description": "Toggle padding of the content", "type": "boolean", "default": false } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/divider.schema.json", "title": "Divider", "description": "Dividers bring clarity to a layout by grouping and dividing content in close proximity.", "type": "object", "properties": { "variant": { "title": "Style of the divider", "type": "string", "description": "Choose a variant for the divider", "enum": [ "default", "accent" ], "default": "default" }, "className": { "type": "string", "title": "Additional Classes", "description": "Add additional css classes that should be applied to the divider" }, "component": { "title": "`ks-component` attribute", "description": "Optional custom component identifier", "type": "string" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/downloads.schema.json", "title": "Downloads", "description": "Downloads component for providing users with downloadable files and resources.", "type": "object", "properties": { "download": { "type": "array", "items": { "type": "object", "properties": { "name": { "type": "string", "description": "The name of the file" }, "description": { "type": "string", "description": "A brief description of the file" }, "previewImage": { "type": "string", "format": "image", "description": "A URL to an image that previews the file." }, "url": { "type": "string", "format": "uri", "description": "The URL to download the file from." }, "size": { "type": [ "string" ], "description": "The size of the download file" }, "format": { "type": [ "string" ], "description": "The format of the download file" } }, "required": [ "name", "url" ], "additionalProperties": false } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/event-latest-teaser.schema.json", "title": "Event Latest Teaser", "description": "Display an event teaser with date, title and location", "type": "object", "properties": { "date": { "title": "Date", "description": "The date of the event", "type": "string", "format": "date", "examples": [ "12.30.2022" ] }, "calendar": { "type": "object", "title": "Calendar", "description": "Calendar icon to display the date", "properties": { "month": { "title": "Month", "description": "The month of the event", "type": "string", "examples": [ "Dec" ] }, "day": { "title": "Day", "description": "The day of the event", "type": "string", "examples": [ "30" ] } }, "additionalProperties": false }, "title": { "title": "Headline", "description": "Title of the event", "type": "string", "format": "markdown", "examples": [ "This is a event teaser title" ] }, "location": { "title": "Location", "description": "Location of the event", "type": "string", "format": "markdown", "examples": [ "This is a location" ] }, "url": { "title": "URL", "description": "The event entry URL to link", "type": "string", "format": "uri", "examples": [ "https://example.com" ] }, "cta": { "title": "Call to Action", "description": "Text for the call to action", "type": "string", "examples": [ "Show event" ] }, "ariaLabel": { "title": "ARIA Label", "description": "ARIA label for accessibility", "type": "string", "examples": [ "Event teaser for " ] }, "className": { "type": "string" } }, "additionalProperties": false, "required": [ "title", "date", "location" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/event-list-teaser.schema.json", "title": "Event List Teaser", "description": "Display an event teaser with date, title and location", "type": "object", "properties": { "category": { "title": "Category", "description": "Category of the event teaser", "type": "string", "examples": [ "Category" ] }, "title": { "title": "Headline", "description": "Title of the event", "type": "string", "format": "markdown", "examples": [ "This is a event teaser title" ] }, "text": { "title": "Text", "description": "Short teaser text for the event", "type": "string", "format": "markdown", "examples": [ "The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence. The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence." ] }, "date": { "title": "Date", "description": "The date of the event", "type": "string", "format": "date", "examples": [ "FRI, JAN 16" ] }, "time": { "title": "Time", "description": "The time of the event", "type": "string", "examples": [ "10:00" ] }, "location": { "title": "Location", "description": "Location of the event", "type": "object", "properties": { "name": { "type": "string", "title": "Location Name", "description": "Name of the location", "examples": [ "Stadthalle" ] }, "address": { "type": "string", "title": "Address", "description": "Address of the location", "examples": [ "Köln" ] } }, "additionalProperties": false }, "tags": { "title": "Tags", "description": "Tags associated with the event", "type": "array", "items": { "type": "string", "examples": [ "AI", "Technology", "Innovation" ] }, "default": [ "Topic 1", "Topic 2" ] }, "image": { "title": "Image", "description": "Image to display in the teaser", "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "Image Source", "description": "URL of the image to display", "examples": [ "https://picsum.photos/seed/flower/800/600" ] }, "alt": { "type": "string", "title": "Alt Text", "description": "Alt text of the image", "examples": [ "This is an image of a flower" ] } }, "additionalProperties": false }, "url": { "title": "URL", "description": "The event entry URL to link", "type": "string", "format": "uri", "examples": [ "https://example.com" ] }, "ctaText": { "title": "Call to Action", "description": "Text for the call to action", "type": "string", "examples": [ "Show event" ] }, "ariaLabel": { "title": "ARIA Label", "description": "ARIA label for accessibility", "type": "string" }, "className": { "type": "string" } }, "additionalProperties": false, "required": [ "title", "date", "location" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/faq.schema.json", "title": "Faq", "description": "Component used to display a Faq section", "type": "object", "properties": { "questions": { "type": "array", "title": "Questions", "description": "The questions and answers in the Faq section", "items": { "title": "Question", "type": "object", "properties": { "question": { "type": "string", "format": "markdown", "title": "Question", "description": "The question", "examples": [ "What is the product made of?" ] }, "answer": { "type": "string", "format": "markdown", "title": "Answer", "description": "The answer to the question", "examples": [ "The product is made of high-quality materials" ] } }, "additionalProperties": false, "required": [ "question" ] }, "minItems": 1 } }, "additionalProperties": false, "required": [ "questions" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/features.schema.json", "title": "Features", "description": "Component used to display a set of features", "type": "object", "properties": { "layout": { "type": "string", "title": "Layout", "description": "The layout variant to use for the features", "enum": [ "largeTiles", "smallTiles", "list" ], "default": "largeTiles" }, "style": { "type": "string", "enum": [ "intext", "stack", "centered", "besideLarge", "besideSmall" ], "default": "stack" }, "ctas": { "type": "object", "properties": { "toggle": { "type": "boolean", "default": true, "title": "CTA Toggle", "description": "Activate/disable the CTAs" }, "style": { "type": "string", "enum": [ "button", "link", "intext" ], "default": "link" } }, "additionalProperties": false }, "feature": { "type": "array", "title": "Features", "description": "The features to display", "items": { "type": "object", "title": "Feature", "properties": { "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "The icon for the feature", "examples": [ "person" ] }, "title": { "type": "string", "title": "Title", "description": "The title of the feature", "examples": [ "Feature 1" ] }, "text": { "type": "string", "title": "Text", "description": "The description of the feature", "format": "markdown", "examples": [ "This is a feature" ] }, "cta": { "type": "object", "properties": { "url": { "type": "string", "title": "Call to Action url", "description": "The CTA url", "default": "#", "format": "uri" }, "label": { "type": "string", "title": "Link Label", "description": "The text label displayed on the link", "default": "See more", "examples": [ "See all our partners" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Icon for the link style of the cta", "examples": [ "arrow-right" ], "default": "arrow-right" } }, "additionalProperties": false } }, "additionalProperties": false }, "minItems": 1, "maxItems": 8 } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/gallery.schema.json", "title": "Gallery", "description": "Component used to display a gallery of images", "type": "object", "properties": { "images": { "type": "array", "title": "Images", "description": "The images to display in the gallery", "items": { "type": "object", "properties": { "src": { "type": "string", "title": "src", "format": "image", "description": "The source of the image", "examples": [ "https://example.com/image1.jpg" ] }, "alt": { "type": "string", "title": "Alt text", "description": "Alt text of the image", "examples": [ "https://example.com/image1.jpg" ] }, "caption": { "type": "string", "format": "markdown", "title": "Caption", "description": "The caption of the image", "examples": [ "Caption Image" ] } }, "additionalProperties": false, "required": [ "src" ] }, "minItems": 1, "maxItems": 10 }, "layout": { "type": "string", "title": "Layout", "description": "The layout of the gallery images", "enum": [ "stack", "smallTiles", "largeTiles" ], "default": "smallTiles" }, "aspectRatio": { "type": "string", "title": "Aspect Ratio", "description": "The aspect ratio of the gallery images", "enum": [ "unset", "square", "wide", "landscape" ], "default": "unset" }, "lightbox": { "type": "boolean", "title": "Lightbox", "description": "Display images in a lightbox gallery", "default": false } }, "additionalProperties": false, "required": [ "images" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/headline.schema.json", "title": "Headline", "description": "Component used for headlines", "type": "object", "properties": { "text": { "type": "string", "title": "Text", "description": "Text content of headline", "format": "markdown" }, "sub": { "type": "string", "title": "Sub", "description": "Subheadline content", "format": "markdown" }, "switchOrder": { "type": "boolean", "title": "Switch order?", "description": "Switch order of headline and subheadline", "default": false }, "align": { "type": "string", "title": "Section alignment", "enum": [ "left", "center", "right" ] }, "level": { "type": "string", "title": "Level", "description": "Level of headline to use", "enum": [ "h1", "h2", "h3", "h4", "p" ], "default": "h2" }, "style": { "type": "string", "title": "Style", "description": "Style of headline to show", "enum": [ "h1", "h2", "h3", "h4", "p" ], "default": "h2" }, "spaceAfter": { "type": "string", "title": "Space after?", "description": "Whether to display space after headline", "enum": [ "minimum", "small", "large" ], "default": "small" }, "className": { "type": "string", "title": "Class Name", "description": "Set a custom class name" }, "id": { "type": "string", "title": "ID", "description": "Set a custom id attribute" } }, "additionalProperties": false, "required": [ "level", "text" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/hero.schema.json", "title": "Hero", "description": "Hero component for displaying a prominent visual section with headline, subheadline, text, and call-to-action buttons.", "type": "object", "properties": { "headline": { "title": "Headline", "description": "Headline for the visual", "type": "string", "format": "markdown" }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the module headline", "type": "string", "format": "markdown" }, "text": { "title": "Module Text", "description": "Info text for the module element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "height": { "title": "Height", "type": "string", "enum": [ "small", "default", "fullImage", "fullScreen" ], "default": "default" }, "textbox": { "type": "boolean", "title": "Textbox", "default": true, "description": "Toggle wether you want your text to be displayed within in box" }, "mobileTextBelow": { "type": "boolean", "title": "Mobile Text Below", "description": "On mobile devices, display the text below the image", "default": true }, "invertText": { "type": "boolean", "title": "Invert Text", "description": "Invert the text color for better contrast against the background", "default": false }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "skipButton": { "type": "boolean", "title": "Skip Button", "description": "Add a skip button to the hero module", "default": false }, "overlay": { "title": "Grid layer", "description": "Enable grid layer", "type": "boolean", "default": false }, "image": { "title": "Background image", "description": "Sources of background images for different screen sizes", "type": "object", "required": [ "srcMobile" ], "properties": { "srcMobile": { "title": "Mobile image source", "description": "Background image source for small screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/640/270" ] }, "srcTablet": { "title": "Tablet image source", "description": "Background image source for medium screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/1280/540" ] }, "srcDesktop": { "title": "Desktop image source", "description": "Background image source for large screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/1920/810" ] }, "src": { "title": "Optional source", "description": "Override for img tag of picture element, if needed", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/640/270" ] }, "indent": { "title": "Image indent", "description": "Choose to indent the image horizontally on small screens", "type": "string", "enum": [ "none", "left", "right" ], "default": "none" }, "alt": { "title": "Alt text", "description": "Alt text to display for picture", "type": "string" } }, "additionalProperties": false }, "textPosition": { "title": "Module aligment", "description": "Choose the alginment of the module content", "enum": [ "center", "below", "offset", "left", "right", "corner", "bottom" ], "type": "string", "default": "left" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/html.schema.json", "title": "Html", "description": "Display raw HTML.", "type": "object", "properties": { "html": { "title": "HTML string", "type": "string", "examples": [ "

Hello World

" ] }, "consent": { "title": "Show HTML after consent", "type": "boolean", "default": false }, "consentText": { "type": "string" }, "consentButtonLabel": { "type": "string" }, "consentBackgroundImage": { "type": "string", "format": "image" }, "consentAspectRatio": { "type": "string", "enum": [ "16:9", "16:10", "4:3", "1:1" ], "default": "16:9" }, "inverted": { "title": "Inverted", "description": "Invert the colors of the HTML", "type": "boolean", "default": false }, "className": { "title": "Additional Classes", "description": "Add additional css classes that should be applied to the element", "type": "string" }, "component": { "title": "`ks-component` attribute", "description": "Optional custom component identifier", "type": "string" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/image-story.schema.json", "title": "Image Story", "description": "Image story component for displaying an image alongside text content with customizable layout and buttons.", "type": "object", "properties": { "headline": { "title": "Module Headline", "description": "Headline for the module element", "type": "string", "format": "markdown", "examples": [ "Headline" ] }, "largeHeadline": { "type": "boolean", "title": "Large Headline", "description": "Make the headline larger", "default": false }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the module headline", "type": "string", "format": "markdown", "examples": [ "Subheadline" ] }, "text": { "title": "Module Text", "description": "Info text for the module element", "type": "string", "format": "markdown" }, "layout": { "type": "string", "title": "Layout", "description": "Choose the layout for the component", "enum": [ "textLeft", "imageLeft" ], "default": "imageLeft" }, "padding": { "type": "boolean", "title": "Padding", "default": false, "description": "Give the component padding" }, "buttons": { "title": "Buttons", "description": "Buttons of the Button Group", "type": "array", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/button.schema.json", "title": "Button", "description": "Component used for user interaction", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" }, "variant": { "type": "string", "title": "Variant", "description": "Variant of button to be used", "enum": [ "primary", "secondary", "tertiary" ], "default": "secondary" }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "size": { "type": "string", "title": "Size", "description": "Size of button to use", "enum": [ "small", "medium", "large" ], "default": "medium" }, "disabled": { "type": "boolean", "title": "Disabled?", "description": "Whether the button should be disabled", "default": false }, "type": { "type": "string", "title": "Button Type", "enum": [ "button", "submit", "reset" ] } }, "additionalProperties": false, "required": [ "label" ] } }, "image": { "title": "Image", "description": "Image displayed alongside the text content", "type": "object", "properties": { "src": { "title": "Image source", "description": "Image source to use", "type": "string", "format": "image" }, "aspectRatio": { "type": "string", "title": "Aspect Ratio", "description": "The aspect ratio of the image", "enum": [ "unset", "square", "wide", "landscape" ], "default": "unset" }, "alt": { "title": "Alt text", "description": "Image description", "type": "string" }, "vAlign": { "title": "Image vertical alignment", "description": "Select a vertical alignment for the image", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "top" } }, "additionalProperties": false }, "textAlign": { "title": "Text Alignment", "description": "Choose the alginment of the text", "enum": [ "left", "center" ], "type": "string", "default": "left" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/image-text.schema.json", "title": "Image Text", "description": "Component used to display an image beside or above/below a text block", "type": "object", "properties": { "text": { "type": "string", "format": "markdown", "title": "Text", "description": "Text content to display beside the image", "examples": [ "This is a sample text" ] }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "image": { "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "Image Source", "description": "URL of the image to display", "examples": [ "http://example.com/image.jpg" ] }, "alt": { "type": "string", "title": "Alt Text", "description": "Alt text of the image", "examples": [ "http://example.com/image.jpg" ] } }, "additionalProperties": false }, "layout": { "type": "string", "enum": [ "above", "below", "beside-right", "beside-left" ], "title": "Layout", "description": "Position of the image relative to the text", "default": "above" } }, "required": [ "text", "image", "layout" ], "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/logos.schema.json", "title": "Logos", "description": "Component used to display a set of logos", "type": "object", "properties": { "tagline": { "type": "string", "title": "Logo Tagline", "description": "A short tagline atop the logos", "examples": [ "Our Customers" ] }, "logo": { "type": "array", "title": "Logos", "description": "The logos to display", "items": { "title": "Logo", "description": "Logo entry for Logos component", "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "URL", "description": "The URL of the logo image", "examples": [ "img/logos/logoipsum-344.svg", "img/logos/logoipsum-347.svg", "img/logos/logoipsum-352.svg", "img/logos/logoipsum-356.svg", "img/logos/logoipsum-358.svg", "img/logos/logoipsum-369.svg" ] }, "alt": { "type": "string", "title": "Caption", "description": "The alt text of the logo", "examples": [ "Logo 1" ] } }, "additionalProperties": false, "required": [ "src" ] }, "minItems": 1 }, "align": { "type": "string", "title": "Alignment", "description": "The alignment of the logo layout", "enum": [ "left", "center" ], "default": "center" }, "logosPerRow": { "type": "integer", "title": "Logos Per Row", "description": "The amount of logos to display per row", "minimum": 2, "maximum": 8, "examples": [ 5 ] }, "cta": { "type": "object", "title": "Call to Action", "description": "The call to action", "properties": { "toggle": { "type": "boolean", "default": false, "title": "CTA Toggle", "description": "Activate/disable the CTA" }, "text": { "type": "string", "title": "Call to Action Text", "description": "A short CTA text", "examples": [ "Explore the success stories of our valued customers and discover more about their journey." ] }, "link": { "type": "string", "title": "Call to Action Link", "description": "The CTA link", "default": "#", "format": "uri" }, "label": { "type": "string", "title": "Link Label", "description": "The text label displayed on the link", "examples": [ "See all customers" ] }, "style": { "type": "string", "enum": [ "button", "text" ], "default": "text" } }, "additionalProperties": false, "required": [ "style", "link", "label" ] } }, "additionalProperties": false, "required": [ "logos" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/mosaic.schema.json", "title": "Mosaic", "description": "Mosaic component for displaying a collection of tiles in various layouts.", "type": "object", "properties": { "layout": { "title": "Layout", "description": "Layout of the mosaic component", "type": "string", "enum": [ "alternate", "textLeft", "textRight" ], "default": "alternate" }, "largeHeadlines": { "type": "boolean", "title": "Large Headlines", "description": "Make the headlines larger", "default": false }, "tile": { "type": "array", "title": "Tiles", "description": "The tiles to display", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/tile.schema.json", "title": "Tile", "type": "object", "properties": { "headline": { "title": "Headline", "description": "Headline for the tile", "type": "string", "format": "markdown" }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the tile headline", "type": "string", "format": "markdown" }, "text": { "title": "Module Text", "description": "Text for tile", "type": "string", "format": "markdown" }, "image": { "type": "object", "properties": { "src": { "title": "Source", "description": "Picture source", "type": "string", "format": "image", "examples": [ "img/close-up-young-business-team-working.png" ] }, "alt": { "title": "Alt text", "description": "Alt text to display for picture", "type": "string" } }, "additionalProperties": false }, "button": { "type": "object", "properties": { "toggle": { "title": "Button Toggle", "description": "Toggle wether the Button is displayed or not", "type": "boolean", "default": true }, "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" } }, "additionalProperties": false }, "backgroundColor": { "title": "Background color", "description": "Background color for the whole element", "type": "string", "format": "color" }, "backgroundImage": { "title": "Background image", "description": "Background image for the whole element", "type": "string", "format": "image" }, "textColor": { "title": "Text color", "description": "Overwrite the color to use for the text content", "type": "string", "format": "color" } }, "additionalProperties": false, "required": [ "headline", "image" ] }, "minItems": 1, "maxItems": 20 } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/slider.schema.json", "title": "Slider", "description": "Slider component for displaying a carousel of content components.", "type": "object", "properties": { "autoplay": { "title": "Auto play", "description": "Automatically move to next slide after 4 seconds without user interaction", "type": "boolean", "default": false }, "nav": { "title": "Show Navigation", "description": "Add bullet navigation", "type": "boolean", "examples": [ true ] }, "teaseNeighbours": { "title": "Tease Neighbour Slides", "type": "boolean", "default": false }, "equalHeight": { "title": "Equalize slides heights", "type": "boolean", "default": true }, "gap": { "title": "Gap", "description": "Size of the gap added between slides in pixels", "type": "number", "default": 0 }, "arrows": { "title": "Show Arrows", "description": "Add arrows on the left and right to navigate to next or previous slide", "type": "boolean", "examples": [ true ] }, "variant": { "title": "Type", "description": "Type of the movement", "type": "string", "enum": [ "slider", "carousel" ], "default": "carousel" }, "className": { "title": "Class", "description": "Additional css classes attached to the wrapping element", "type": "string" }, "components": { "type": "array", "title": "Content", "description": "Allowed components for content", "items": { "anyOf": [ { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/cta.schema.json", "title": "Cta", "description": "Call to Action (CTA) component for prompting users to take specific actions on a website.", "type": "object", "properties": { "headline": { "title": "Component Headline", "description": "Headline for the Component element", "type": "string", "format": "markdown", "examples": [ "Headline" ] }, "sub": { "title": "Component Subheadline", "description": "Subheadline below the component headline", "type": "string", "format": "markdown", "examples": [ "Subheadline" ] }, "text": { "title": "Component Text", "description": "Info text for the component element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "inverted": { "title": "Inverted", "description": "Invert the text and button colors for use on dark backgrounds", "default": false, "type": "boolean" }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "backgroundColor": { "title": "Background color", "description": "Background color for the whole element", "type": "string", "format": "color" }, "backgroundImage": { "title": "Background image", "description": "Background image for the whole element", "type": "string", "format": "image" }, "image": { "title": "Image", "description": "Image displayed alongside the text content", "type": "object", "properties": { "src": { "title": "Image source", "description": "Image source to use", "type": "string", "format": "image" }, "padding": { "title": "Padding", "description": "Toggle padding of the image", "type": "boolean", "default": true }, "alt": { "title": "Alt text", "description": "Image description", "type": "string" }, "align": { "title": "Vertical alignment of the image", "description": "Select a vertical alignment for the image", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "center" } }, "additionalProperties": false }, "order": { "title": "Order", "description": "Choose what comes first on mobile and desktop: image or text", "type": "object", "properties": { "mobileImageLast": { "title": "Mobile image after text", "description": "Switch to displaying the image after the text on mobile", "type": "boolean", "default": false }, "desktopImageLast": { "title": "Desktop image after text", "description": "Switch to displaying the image after the text on desktop", "type": "boolean", "default": true } }, "additionalProperties": false }, "textAlign": { "title": "Text Alignment", "description": "Choose the alginment of the text", "enum": [ "left", "center" ], "type": "string", "default": "left" }, "align": { "title": "Vertical alignment of the content", "description": "Select a vertical alignment for the content", "type": "string", "enum": [ "center", "top", "bottom" ], "default": "center" }, "padding": { "title": "Padding", "description": "Toggle padding of the content", "type": "boolean", "default": false } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/features.schema.json", "title": "Features", "description": "Component used to display a set of features", "type": "object", "properties": { "layout": { "type": "string", "title": "Layout", "description": "The layout variant to use for the features", "enum": [ "largeTiles", "smallTiles", "list" ], "default": "largeTiles" }, "style": { "type": "string", "enum": [ "intext", "stack", "centered", "besideLarge", "besideSmall" ], "default": "stack" }, "ctas": { "type": "object", "properties": { "toggle": { "type": "boolean", "default": true, "title": "CTA Toggle", "description": "Activate/disable the CTAs" }, "style": { "type": "string", "enum": [ "button", "link", "intext" ], "default": "link" } }, "additionalProperties": false }, "feature": { "type": "array", "title": "Features", "description": "The features to display", "items": { "type": "object", "title": "Feature", "properties": { "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "The icon for the feature", "examples": [ "person" ] }, "title": { "type": "string", "title": "Title", "description": "The title of the feature", "examples": [ "Feature 1" ] }, "text": { "type": "string", "title": "Text", "description": "The description of the feature", "format": "markdown", "examples": [ "This is a feature" ] }, "cta": { "type": "object", "properties": { "url": { "type": "string", "title": "Call to Action url", "description": "The CTA url", "default": "#", "format": "uri" }, "label": { "type": "string", "title": "Link Label", "description": "The text label displayed on the link", "default": "See more", "examples": [ "See all our partners" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Icon for the link style of the cta", "examples": [ "arrow-right" ], "default": "arrow-right" } }, "additionalProperties": false } }, "additionalProperties": false }, "minItems": 1, "maxItems": 8 } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/gallery.schema.json", "title": "Gallery", "description": "Component used to display a gallery of images", "type": "object", "properties": { "images": { "type": "array", "title": "Images", "description": "The images to display in the gallery", "items": { "type": "object", "properties": { "src": { "type": "string", "title": "src", "format": "image", "description": "The source of the image", "examples": [ "https://example.com/image1.jpg" ] }, "alt": { "type": "string", "title": "Alt text", "description": "Alt text of the image", "examples": [ "https://example.com/image1.jpg" ] }, "caption": { "type": "string", "format": "markdown", "title": "Caption", "description": "The caption of the image", "examples": [ "Caption Image" ] } }, "additionalProperties": false, "required": [ "src" ] }, "minItems": 1, "maxItems": 10 }, "layout": { "type": "string", "title": "Layout", "description": "The layout of the gallery images", "enum": [ "stack", "smallTiles", "largeTiles" ], "default": "smallTiles" }, "aspectRatio": { "type": "string", "title": "Aspect Ratio", "description": "The aspect ratio of the gallery images", "enum": [ "unset", "square", "wide", "landscape" ], "default": "unset" }, "lightbox": { "type": "boolean", "title": "Lightbox", "description": "Display images in a lightbox gallery", "default": false } }, "additionalProperties": false, "required": [ "images" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/hero.schema.json", "title": "Hero", "description": "Hero component for displaying a prominent visual section with headline, subheadline, text, and call-to-action buttons.", "type": "object", "properties": { "headline": { "title": "Headline", "description": "Headline for the visual", "type": "string", "format": "markdown" }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the module headline", "type": "string", "format": "markdown" }, "text": { "title": "Module Text", "description": "Info text for the module element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "height": { "title": "Height", "type": "string", "enum": [ "small", "default", "fullImage", "fullScreen" ], "default": "default" }, "textbox": { "type": "boolean", "title": "Textbox", "default": true, "description": "Toggle wether you want your text to be displayed within in box" }, "mobileTextBelow": { "type": "boolean", "title": "Mobile Text Below", "description": "On mobile devices, display the text below the image", "default": true }, "invertText": { "type": "boolean", "title": "Invert Text", "description": "Invert the text color for better contrast against the background", "default": false }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "skipButton": { "type": "boolean", "title": "Skip Button", "description": "Add a skip button to the hero module", "default": false }, "overlay": { "title": "Grid layer", "description": "Enable grid layer", "type": "boolean", "default": false }, "image": { "title": "Background image", "description": "Sources of background images for different screen sizes", "type": "object", "required": [ "srcMobile" ], "properties": { "srcMobile": { "title": "Mobile image source", "description": "Background image source for small screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/640/270" ] }, "srcTablet": { "title": "Tablet image source", "description": "Background image source for medium screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/1280/540" ] }, "srcDesktop": { "title": "Desktop image source", "description": "Background image source for large screens", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/1920/810" ] }, "src": { "title": "Optional source", "description": "Override for img tag of picture element, if needed", "type": "string", "format": "image", "examples": [ "https://picsum.photos/seed/kdsvisual/640/270" ] }, "indent": { "title": "Image indent", "description": "Choose to indent the image horizontally on small screens", "type": "string", "enum": [ "none", "left", "right" ], "default": "none" }, "alt": { "title": "Alt text", "description": "Alt text to display for picture", "type": "string" } }, "additionalProperties": false }, "textPosition": { "title": "Module aligment", "description": "Choose the alginment of the module content", "enum": [ "center", "below", "offset", "left", "right", "corner", "bottom" ], "type": "string", "default": "left" } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/image-text.schema.json", "title": "Image Text", "description": "Component used to display an image beside or above/below a text block", "type": "object", "properties": { "text": { "type": "string", "format": "markdown", "title": "Text", "description": "Text content to display beside the image", "examples": [ "This is a sample text" ] }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "image": { "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "Image Source", "description": "URL of the image to display", "examples": [ "http://example.com/image.jpg" ] }, "alt": { "type": "string", "title": "Alt Text", "description": "Alt text of the image", "examples": [ "http://example.com/image.jpg" ] } }, "additionalProperties": false }, "layout": { "type": "string", "enum": [ "above", "below", "beside-right", "beside-left" ], "title": "Layout", "description": "Position of the image relative to the text", "default": "above" } }, "required": [ "text", "image", "layout" ], "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/logos.schema.json", "title": "Logos", "description": "Component used to display a set of logos", "type": "object", "properties": { "tagline": { "type": "string", "title": "Logo Tagline", "description": "A short tagline atop the logos", "examples": [ "Our Customers" ] }, "logo": { "type": "array", "title": "Logos", "description": "The logos to display", "items": { "title": "Logo", "description": "Logo entry for Logos component", "type": "object", "properties": { "src": { "type": "string", "format": "image", "title": "URL", "description": "The URL of the logo image", "examples": [ "img/logos/logoipsum-344.svg", "img/logos/logoipsum-347.svg", "img/logos/logoipsum-352.svg", "img/logos/logoipsum-356.svg", "img/logos/logoipsum-358.svg", "img/logos/logoipsum-369.svg" ] }, "alt": { "type": "string", "title": "Caption", "description": "The alt text of the logo", "examples": [ "Logo 1" ] } }, "additionalProperties": false, "required": [ "src" ] }, "minItems": 1 }, "align": { "type": "string", "title": "Alignment", "description": "The alignment of the logo layout", "enum": [ "left", "center" ], "default": "center" }, "logosPerRow": { "type": "integer", "title": "Logos Per Row", "description": "The amount of logos to display per row", "minimum": 2, "maximum": 8, "examples": [ 5 ] }, "cta": { "type": "object", "title": "Call to Action", "description": "The call to action", "properties": { "toggle": { "type": "boolean", "default": false, "title": "CTA Toggle", "description": "Activate/disable the CTA" }, "text": { "type": "string", "title": "Call to Action Text", "description": "A short CTA text", "examples": [ "Explore the success stories of our valued customers and discover more about their journey." ] }, "link": { "type": "string", "title": "Call to Action Link", "description": "The CTA link", "default": "#", "format": "uri" }, "label": { "type": "string", "title": "Link Label", "description": "The text label displayed on the link", "examples": [ "See all customers" ] }, "style": { "type": "string", "enum": [ "button", "text" ], "default": "text" } }, "additionalProperties": false, "required": [ "style", "link", "label" ] } }, "additionalProperties": false, "required": [ "logos" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/stats.schema.json", "title": "Stats", "description": "Component used to display stats with a number upcounter", "type": "object", "properties": { "align": { "title": "Align", "description": "Alignment of the stats content", "type": "string", "enum": [ "left", "center" ], "default": "center" }, "stat": { "title": "Stats", "type": "array", "description": "The stats to display with a number upcounter", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/stat.schema.json", "title": "Stat", "description": "Stat entry of Stats component", "type": "object", "properties": { "number": { "title": "Number", "description": "The number of the stat", "type": "string", "examples": [ "1", "5x", "2", "40%", "bis zu 100" ] }, "description": { "title": "Description", "description": "Optional description of the stat", "type": "string", "format": "markdown" }, "title": { "title": "Title", "description": "Title of the stat", "type": "string", "format": "markdown", "examples": [ "Stat 1", "Stat 2", "Stat 3", "Stat 4" ] }, "icon": { "title": "Icon", "description": "Optional icon of the stat", "type": "string", "format": "icon", "examples": [ "person", "home", "map" ] } }, "additionalProperties": false, "required": [ "number", "label" ], "examples": [ { "number": 1, "label": "Stat 1" }, { "number": 2, "label": "Stat 2" }, { "number": 3, "label": "Stat 3" }, { "value": 4, "label": "Stat 4" } ] }, "minItems": 1, "maxItems": 4 } }, "additionalProperties": false, "required": [ "stats" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/teaser-card.schema.json", "title": "Teaser Card", "description": "Component used to tease content", "type": "object", "properties": { "headline": { "type": "string", "title": "Headline", "description": "Headline for the teaser card", "format": "markdown" }, "text": { "type": "string", "title": "Text", "description": "Body text for the teaser card", "format": "markdown" }, "label": { "type": "string", "title": "Label", "description": "Label for the Teaser Card" }, "layout": { "type": "string", "enum": [ "stack", "row", "compact" ], "description": "Layout for the Teaser Card", "default": "stack" }, "centered": { "type": "boolean", "title": "Centered", "description": "Whether the Teaser Card is centered", "default": false }, "url": { "type": "string", "title": "Url", "description": "Url that should be linked", "format": "uri" }, "button": { "type": "object", "properties": { "label": { "title": "Label", "type": "string", "description": "Label of the button. Still A11Y relevant when the button is hidden." }, "chevron": { "title": "Icon", "description": "Toggle arrow icon", "type": "boolean", "default": false }, "hidden": { "type": "boolean", "title": "Display Button", "description": "Toggle wether you want the card to have a visible button or not", "default": false } }, "required": [ "label" ], "additionalProperties": false }, "image": { "type": "string", "title": "Image", "description": "Image to display as cover", "format": "image" }, "imageAlt": { "type": "string", "title": "Image Alt", "description": "Alternative text for the image, used for accessibility" }, "imageRatio": { "type": "string", "enum": [ "wide", "landscape", "square", "unset" ], "description": "Aspect ratio of the image", "default": "wide" } }, "additionalProperties": false, "required": [ "topic", "url" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/testimonials.schema.json", "title": "Testimonials", "description": "Display testimonials with an optional image and rating", "type": "object", "properties": { "layout": { "title": "Layout", "description": "The testimonial layout", "type": "string", "enum": [ "slider", "list", "alternating" ], "default": "slider" }, "quoteSigns": { "title": "Style of the quote signs", "description": "The style of the quote signs", "type": "string", "enum": [ "normal", "large", "none" ], "default": "normal" }, "testimonial": { "type": "array", "title": "Testimonials", "description": "Add testimonials featuring an image, a quote, a source and a rating", "items": { "title": "Testimonial", "description": "Testimonial entry of Testimonials component", "type": "object", "properties": { "quote": { "title": "Quote", "description": "The testimonial quote", "type": "string", "format": "markdown", "examples": [ "This product is amazing!" ] }, "name": { "title": "Name", "description": "The name of the quote author", "type": "string", "examples": [ "John Doe" ] }, "title": { "title": "Title", "description": "The title of the quote author", "type": "string" }, "image": { "type": "object", "properties": { "src": { "title": "Source", "description": "The image to display with the testimonial", "type": "string", "format": "image", "examples": [ "https://example.com/image.jpg" ] }, "alt": { "title": "Alt Text", "description": "The alt text of the image file", "type": "string" } }, "additionalProperties": false }, "rating": { "title": "Rating", "description": "The rating of the testimonial, from 1 to 5", "type": "integer", "minimum": 1, "maximum": 5 } }, "additionalProperties": false, "required": [ "quote", "name", "image" ] } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/text.schema.json", "title": "Text", "description": "Component used for displaying text in chapters", "type": "object", "properties": { "text": { "type": "string", "format": "markdown", "title": "Text", "description": "Text", "examples": [ "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." ] }, "layout": { "type": "string", "title": "Layout", "description": "Variant of layout to be used", "enum": [ "singleColumn", "multiColumn" ], "default": "singleColumn" }, "align": { "type": "string", "title": "Alignment", "description": "Alignment of text", "enum": [ "left", "center" ], "default": "left" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false } }, "additionalProperties": false, "required": [ "text" ] } ] } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/stats.schema.json", "title": "Stats", "description": "Component used to display stats with a number upcounter", "type": "object", "properties": { "align": { "title": "Align", "description": "Alignment of the stats content", "type": "string", "enum": [ "left", "center" ], "default": "center" }, "stat": { "title": "Stats", "type": "array", "description": "The stats to display with a number upcounter", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/stat.schema.json", "title": "Stat", "description": "Stat entry of Stats component", "type": "object", "properties": { "number": { "title": "Number", "description": "The number of the stat", "type": "string", "examples": [ "1", "5x", "2", "40%", "bis zu 100" ] }, "description": { "title": "Description", "description": "Optional description of the stat", "type": "string", "format": "markdown" }, "title": { "title": "Title", "description": "Title of the stat", "type": "string", "format": "markdown", "examples": [ "Stat 1", "Stat 2", "Stat 3", "Stat 4" ] }, "icon": { "title": "Icon", "description": "Optional icon of the stat", "type": "string", "format": "icon", "examples": [ "person", "home", "map" ] } }, "additionalProperties": false, "required": [ "number", "label" ], "examples": [ { "number": 1, "label": "Stat 1" }, { "number": 2, "label": "Stat 2" }, { "number": 3, "label": "Stat 3" }, { "value": 4, "label": "Stat 4" } ] }, "minItems": 1, "maxItems": 4 } }, "additionalProperties": false, "required": [ "stats" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/teaser-card.schema.json", "title": "Teaser Card", "description": "Component used to tease content", "type": "object", "properties": { "headline": { "type": "string", "title": "Headline", "description": "Headline for the teaser card", "format": "markdown" }, "text": { "type": "string", "title": "Text", "description": "Body text for the teaser card", "format": "markdown" }, "label": { "type": "string", "title": "Label", "description": "Label for the Teaser Card" }, "layout": { "type": "string", "enum": [ "stack", "row", "compact" ], "description": "Layout for the Teaser Card", "default": "stack" }, "centered": { "type": "boolean", "title": "Centered", "description": "Whether the Teaser Card is centered", "default": false }, "url": { "type": "string", "title": "Url", "description": "Url that should be linked", "format": "uri" }, "button": { "type": "object", "properties": { "label": { "title": "Label", "type": "string", "description": "Label of the button. Still A11Y relevant when the button is hidden." }, "chevron": { "title": "Icon", "description": "Toggle arrow icon", "type": "boolean", "default": false }, "hidden": { "type": "boolean", "title": "Display Button", "description": "Toggle wether you want the card to have a visible button or not", "default": false } }, "required": [ "label" ], "additionalProperties": false }, "image": { "type": "string", "title": "Image", "description": "Image to display as cover", "format": "image" }, "imageAlt": { "type": "string", "title": "Image Alt", "description": "Alternative text for the image, used for accessibility" }, "imageRatio": { "type": "string", "enum": [ "wide", "landscape", "square", "unset" ], "description": "Aspect ratio of the image", "default": "wide" } }, "additionalProperties": false, "required": [ "topic", "url" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/testimonials.schema.json", "title": "Testimonials", "description": "Display testimonials with an optional image and rating", "type": "object", "properties": { "layout": { "title": "Layout", "description": "The testimonial layout", "type": "string", "enum": [ "slider", "list", "alternating" ], "default": "slider" }, "quoteSigns": { "title": "Style of the quote signs", "description": "The style of the quote signs", "type": "string", "enum": [ "normal", "large", "none" ], "default": "normal" }, "testimonial": { "type": "array", "title": "Testimonials", "description": "Add testimonials featuring an image, a quote, a source and a rating", "items": { "title": "Testimonial", "description": "Testimonial entry of Testimonials component", "type": "object", "properties": { "quote": { "title": "Quote", "description": "The testimonial quote", "type": "string", "format": "markdown", "examples": [ "This product is amazing!" ] }, "name": { "title": "Name", "description": "The name of the quote author", "type": "string", "examples": [ "John Doe" ] }, "title": { "title": "Title", "description": "The title of the quote author", "type": "string" }, "image": { "type": "object", "properties": { "src": { "title": "Source", "description": "The image to display with the testimonial", "type": "string", "format": "image", "examples": [ "https://example.com/image.jpg" ] }, "alt": { "title": "Alt Text", "description": "The alt text of the image file", "type": "string" } }, "additionalProperties": false }, "rating": { "title": "Rating", "description": "The rating of the testimonial, from 1 to 5", "type": "integer", "minimum": 1, "maximum": 5 } }, "additionalProperties": false, "required": [ "quote", "name", "image" ] } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/text.schema.json", "title": "Text", "description": "Component used for displaying text in chapters", "type": "object", "properties": { "text": { "type": "string", "format": "markdown", "title": "Text", "description": "Text", "examples": [ "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." ] }, "layout": { "type": "string", "title": "Layout", "description": "Variant of layout to be used", "enum": [ "singleColumn", "multiColumn" ], "default": "singleColumn" }, "align": { "type": "string", "title": "Alignment", "description": "Alignment of text", "enum": [ "left", "center" ], "default": "left" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false } }, "additionalProperties": false, "required": [ "text" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/video-curtain.schema.json", "title": "Video Curtain", "description": "Video curtain component for displaying a video background with overlay text and buttons.", "type": "object", "properties": { "headline": { "title": "Headline", "description": "Headline for the visual", "type": "string", "format": "markdown" }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the module headline", "type": "string", "format": "markdown" }, "text": { "title": "Module Text", "description": "Info text for the module element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "overlay": { "title": "Grid layer", "description": "Enable grid layer", "type": "boolean", "default": false }, "video": { "title": "Background video", "description": "Sources of background videos for different screen sizes", "type": "object", "required": [ "srcMobile" ], "properties": { "srcMobile": { "title": "Mobile video source", "description": "Background video source for small screens", "type": "string", "format": "video", "examples": [ "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4" ] }, "srcTablet": { "title": "Tablet video source", "description": "Background video source for medium screens", "type": "string", "format": "video", "examples": [ "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4" ] }, "srcDesktop": { "title": "Desktop video source", "description": "Background video source for large screens", "type": "string", "format": "video", "examples": [ "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4" ] } }, "additionalProperties": false }, "textPosition": { "title": "Module aligment", "description": "Choose the alginment of the module content", "enum": [ "center", "bottom", "left", "right", "corner" ], "type": "string", "default": "center" } }, "additionalProperties": false } ] } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/stats.schema.json", "title": "Stats", "description": "Component used to display stats with a number upcounter", "type": "object", "properties": { "align": { "title": "Align", "description": "Alignment of the stats content", "type": "string", "enum": [ "left", "center" ], "default": "center" }, "stat": { "title": "Stats", "type": "array", "description": "The stats to display with a number upcounter", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/stat.schema.json", "title": "Stat", "description": "Stat entry of Stats component", "type": "object", "properties": { "number": { "title": "Number", "description": "The number of the stat", "type": "string", "examples": [ "1", "5x", "2", "40%", "bis zu 100" ] }, "description": { "title": "Description", "description": "Optional description of the stat", "type": "string", "format": "markdown" }, "title": { "title": "Title", "description": "Title of the stat", "type": "string", "format": "markdown", "examples": [ "Stat 1", "Stat 2", "Stat 3", "Stat 4" ] }, "icon": { "title": "Icon", "description": "Optional icon of the stat", "type": "string", "format": "icon", "examples": [ "person", "home", "map" ] } }, "additionalProperties": false, "required": [ "number", "label" ], "examples": [ { "number": 1, "label": "Stat 1" }, { "number": 2, "label": "Stat 2" }, { "number": 3, "label": "Stat 3" }, { "value": 4, "label": "Stat 4" } ] }, "minItems": 1, "maxItems": 4 } }, "additionalProperties": false, "required": [ "stats" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/teaser-card.schema.json", "title": "Teaser Card", "description": "Component used to tease content", "type": "object", "properties": { "headline": { "type": "string", "title": "Headline", "description": "Headline for the teaser card", "format": "markdown" }, "text": { "type": "string", "title": "Text", "description": "Body text for the teaser card", "format": "markdown" }, "label": { "type": "string", "title": "Label", "description": "Label for the Teaser Card" }, "layout": { "type": "string", "enum": [ "stack", "row", "compact" ], "description": "Layout for the Teaser Card", "default": "stack" }, "centered": { "type": "boolean", "title": "Centered", "description": "Whether the Teaser Card is centered", "default": false }, "url": { "type": "string", "title": "Url", "description": "Url that should be linked", "format": "uri" }, "button": { "type": "object", "properties": { "label": { "title": "Label", "type": "string", "description": "Label of the button. Still A11Y relevant when the button is hidden." }, "chevron": { "title": "Icon", "description": "Toggle arrow icon", "type": "boolean", "default": false }, "hidden": { "type": "boolean", "title": "Display Button", "description": "Toggle wether you want the card to have a visible button or not", "default": false } }, "required": [ "label" ], "additionalProperties": false }, "image": { "type": "string", "title": "Image", "description": "Image to display as cover", "format": "image" }, "imageAlt": { "type": "string", "title": "Image Alt", "description": "Alternative text for the image, used for accessibility" }, "imageRatio": { "type": "string", "enum": [ "wide", "landscape", "square", "unset" ], "description": "Aspect ratio of the image", "default": "wide" } }, "additionalProperties": false, "required": [ "topic", "url" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/testimonials.schema.json", "title": "Testimonials", "description": "Display testimonials with an optional image and rating", "type": "object", "properties": { "layout": { "title": "Layout", "description": "The testimonial layout", "type": "string", "enum": [ "slider", "list", "alternating" ], "default": "slider" }, "quoteSigns": { "title": "Style of the quote signs", "description": "The style of the quote signs", "type": "string", "enum": [ "normal", "large", "none" ], "default": "normal" }, "testimonial": { "type": "array", "title": "Testimonials", "description": "Add testimonials featuring an image, a quote, a source and a rating", "items": { "title": "Testimonial", "description": "Testimonial entry of Testimonials component", "type": "object", "properties": { "quote": { "title": "Quote", "description": "The testimonial quote", "type": "string", "format": "markdown", "examples": [ "This product is amazing!" ] }, "name": { "title": "Name", "description": "The name of the quote author", "type": "string", "examples": [ "John Doe" ] }, "title": { "title": "Title", "description": "The title of the quote author", "type": "string" }, "image": { "type": "object", "properties": { "src": { "title": "Source", "description": "The image to display with the testimonial", "type": "string", "format": "image", "examples": [ "https://example.com/image.jpg" ] }, "alt": { "title": "Alt Text", "description": "The alt text of the image file", "type": "string" } }, "additionalProperties": false }, "rating": { "title": "Rating", "description": "The rating of the testimonial, from 1 to 5", "type": "integer", "minimum": 1, "maximum": 5 } }, "additionalProperties": false, "required": [ "quote", "name", "image" ] } } }, "additionalProperties": false }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/text.schema.json", "title": "Text", "description": "Component used for displaying text in chapters", "type": "object", "properties": { "text": { "type": "string", "format": "markdown", "title": "Text", "description": "Text", "examples": [ "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." ] }, "layout": { "type": "string", "title": "Layout", "description": "Variant of layout to be used", "enum": [ "singleColumn", "multiColumn" ], "default": "singleColumn" }, "align": { "type": "string", "title": "Alignment", "description": "Alignment of text", "enum": [ "left", "center" ], "default": "left" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false } }, "additionalProperties": false, "required": [ "text" ] }, { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/video-curtain.schema.json", "title": "Video Curtain", "description": "Video curtain component for displaying a video background with overlay text and buttons.", "type": "object", "properties": { "headline": { "title": "Headline", "description": "Headline for the visual", "type": "string", "format": "markdown" }, "sub": { "title": "Module Subheadline", "description": "Subheadline below the module headline", "type": "string", "format": "markdown" }, "text": { "title": "Module Text", "description": "Info text for the module element", "type": "string", "format": "markdown" }, "highlightText": { "type": "boolean", "title": "Highlight Text", "description": "Visually highlight the text", "default": false }, "colorNeutral": { "title": "Color Neutral", "description": "Make the text and buttons color neutral", "default": false, "type": "boolean" }, "buttons": { "type": "array", "items": { "title": "Button", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" } }, "additionalProperties": false } }, "overlay": { "title": "Grid layer", "description": "Enable grid layer", "type": "boolean", "default": false }, "video": { "title": "Background video", "description": "Sources of background videos for different screen sizes", "type": "object", "required": [ "srcMobile" ], "properties": { "srcMobile": { "title": "Mobile video source", "description": "Background video source for small screens", "type": "string", "format": "video", "examples": [ "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4" ] }, "srcTablet": { "title": "Tablet video source", "description": "Background video source for medium screens", "type": "string", "format": "video", "examples": [ "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4" ] }, "srcDesktop": { "title": "Desktop video source", "description": "Background video source for large screens", "type": "string", "format": "video", "examples": [ "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4" ] } }, "additionalProperties": false }, "textPosition": { "title": "Module aligment", "description": "Choose the alginment of the module content", "enum": [ "center", "bottom", "left", "right", "corner" ], "type": "string", "default": "center" } }, "additionalProperties": false } ] } }, "buttons": { "title": "Buttons", "description": "Buttons of the Button Group", "type": "array", "items": { "$schema": "http://json-schema.org/draft-07/schema#", "$id": "http://schema.mydesignsystem.com/button.schema.json", "title": "Button", "description": "Component used for user interaction", "type": "object", "properties": { "label": { "type": "string", "title": "Label", "description": "Text content to display inside the button", "examples": [ "Book a meeting" ] }, "url": { "type": "string", "title": "URL", "description": "The URL to link to when the button is clicked", "format": "uri" }, "variant": { "type": "string", "title": "Variant", "description": "Variant of button to be used", "enum": [ "primary", "secondary", "tertiary" ], "default": "secondary" }, "icon": { "type": "string", "format": "icon", "title": "Icon", "description": "Choose an icon" }, "size": { "type": "string", "title": "Size", "description": "Size of button to use", "enum": [ "small", "medium", "large" ], "default": "medium" }, "disabled": { "type": "boolean", "title": "Disabled?", "description": "Whether the button should be disabled", "default": false }, "type": { "type": "string", "title": "Button Type", "enum": [ "button", "submit", "reset" ] } }, "additionalProperties": false, "required": [ "label" ] } }, "aiDraft": { "title": "AI Draft?", "description": "If true, the section is marked as an AI-generated draft", "type": "boolean", "default": false } }, "additionalProperties": false, "required": [] }