@ebrains/components 0.9.2-beta → 1.0.0

package/dist/collection/eds-docs-ui/logo/logo-wrong-usage/logo-wrong-usage.css

@@ -0,0 +1,240 @@
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.bg-accent {
+  background-color: var(--green-500);
+}
+
+.bg-dark {
+  background-color: var(--grey-300);
+}
+
+.bg-strongest {
+  background-color: var(--black);
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-default {
+  color: var(--black);
+}
+
+.text-inverse {
+  color: var(--white);
+}
+
+.p-8 {
+  padding: 0.5rem;
+}
+
+.p-16 {
+  padding: 1rem;
+}
+
+.logo {
+  width: 100%;
+  height: auto;
+}
+
+.bg-dark {
+  background-color: #333;
+}
+
+.bg-light {
+  background-color: #f3f3f3;
+}
+
+.bg-white {
+  background-color: white;
+}
+
+/* Wrong Usage: Non-brand colors */
+.non-brand-color {
+  fill: purple;
+  /* Non-brand color */
+}
+
+/* Wrong Usage: Distorted logo */
+.distorted {
+  transform: scaleX(0.5);
+}
+
+/* Wrong Usage: Adding effects */
+.effects {
+  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5));
+}
+
+/* Wrong Usage: Rotated logo */
+.rotated {
+  transform: rotate(15deg);
+}
+
+.no-other-bg-color {
+  background-color: var(--purple-200);
+}
+
+.no-other-color {
+  color: var(--red-700);
+}
+
+/* Wrong Usage: Applying outlines */
+.outlined {
+  stroke: red;
+  /* Outline color */
+  stroke-width: 2px;
+  /* Thickness of the outline */
+  fill: none;
+  /* Remove the fill to emphasize the outline */
+}
+
+/* Wrong Usage: Changing the font */
+.custom-font {
+  font-family: 'Comic Sans MS', cursive;
+  /* An incorrect font choice */
+  font-size: 20px;
+  /* Modify font size */
+  color: #333;
+  /* Incorrect text color */
+}
+
+.container {
+  width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.container>* {
+  --container-outer-gutter: 0;
+  --breakout-container-outer-gutter: 0;
+}
+
+.grid-layout {
+  --grid-columns: 6;
+  display: grid;
+  grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);
+  grid-gap: var(--inner-gutter);
+}
+
+.grid-cols-6[class*="grid-line-x"][class*="grid-line-x"]>*:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+
+.grid-cols-6[class*="grid-line-xfull"]>*:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+1)::before {
+  inset-inline-start: 0;
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+6)::before {
+  inset-inline-end: 0;
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+1):nth-last-child(-n+6)::before {
+  border-bottom-width: 0;
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+1):nth-last-child(-n+6)~*::before {
+  border-bottom-width: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(6n+6)::after {
+  border-inline-end-width: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(-n+6)::after {
+  top: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(6n+1):nth-last-child(-n+6)::after {
+  bottom: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(6n+1):nth-last-child(-n+6)~li::after {
+  bottom: 0;
+}
+
+.grid-col-span-6 {
+  --container-grid-columns: 6;
+  grid-column: span 6 / span 6;
+}
+
+.gap-y-8 {
+  row-gap: 0.5rem;
+}
+
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.f-ui-02 {
+  font-family: var(--f-ui-02-fontFamily);
+  font-weight: var(--f-ui-02-fontWeight);
+  font-size: var(--f-ui-02-fontSize);
+  line-height: var(--f-ui-02-lineHeight);
+  letter-spacing: var(--f-ui-02-letterSpacing);
+}
+
+@media (min-width: 750px) {
+  .md\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
+  }
+
+  .md\:gap-y-12 {
+    row-gap: 0.75rem;
+  }
+}
+
+@media (min-width: 900px) {
+  .lg\:gap-y-16 {
+    row-gap: 1rem;
+  }
+
+  .lg\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
+  }
+}
+
+@media (min-width: 1024px) {
+  .xl\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
+  }
+}
+
+@media (min-width: 1280px) {
+  .xxl\:grid-col-span-2 {
+    --container-grid-columns: 2;
+    grid-column: span 2 / span 2;
+  }
+
+  .xxl\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
+  }
+}

package/dist/collection/eds-docs-ui/logo/logo-wrong-usage/logo-wrong-usage.js

@@ -0,0 +1,22 @@
+import { h } from "@stencil/core";
+import { hLogoColor } from "../../../../../../../../packages/svgs/src/index";
+/**
+ * @internal
+ */
+export class LogoWrongUsage {
+    render() {
+        return (h("div", { key: '40d75361172edb23a89faa173ce3518c8750f0f0', class: "container" }, h("ul", { key: '064c760800e2aceba08c3953292f421eae003896', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'd3213a50ed4d217c195bd9a9f1eff60406027892', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '4a3cd51e083d28149bc96c611d2fb4bbb7db37b3', class: "mx-auto no-other-bg-color logo", innerHTML: hLogoColor }), h("p", { key: '81ec640d08f3aa79098e02ecbf0575787c61cd5a', class: "f-ui-02 text-center" }, "Do not use with backgrounds that make legibility difficult")), h("li", { key: '7eb0f204779fe3852ce732fec83cf7efccc8bfd7', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '1e287231328b32ce97aee6c2d793b2a4885e5434', class: "mx-auto no-other-color logo non-brand-color", innerHTML: hLogoColor }), h("p", { key: 'f68bd11f49ca1fc5998ce9dbbd7d062ac30170cd', class: "f-ui-02 text-center" }, "Do not apply other colors")), h("li", { key: '06c5eb937c3ca8e556a987905281e3196c67da5c', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'a165382706515bcff0f4acdfc5ee505021ef8ec3', class: "mx-auto distorted logo", innerHTML: hLogoColor }), h("p", { key: '9675a3a6f0e52db908fdac0e34dc307c2ea85235', class: "f-ui-02 text-center" }, "Do not deform the logo")), h("li", { key: 'c7f53a6c25eeafb8704c500c6daa07746c493d1f', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '2f8e8be3799a2eaae186412fd923da15ecd7ba14', class: "mx-auto effects logo", innerHTML: hLogoColor }), h("p", { key: '725a2a98e0c221d3edfda11b709ae9c9d4bc07b6', class: "f-ui-02 text-center" }, "Do not apply effects")), h("li", { key: 'e8de87168e68efaf2afe99fe83e4d336a5c0a106', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'f1e0aa5ed1f402bdb6314c156d2f554626701123', class: "mx-auto rotated logo", innerHTML: hLogoColor }), h("p", { key: '5360e8d9dc65987adbe5b689a7dbf97a27d47aba', class: "f-ui-02 text-center" }, "Do not rotate the logo")), h("li", { key: '8e21d4edf6a714c41f6add93d70996abd8ad23aa', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '9510ae79414b2b74d15f8c3fafa92cb2a9b34959', class: "mx-auto outlined logo", innerHTML: hLogoColor }), h("p", { key: 'ef077ee715e907cd5d6e22f03f1f490ed1e159a3', class: "f-ui-02 text-center" }, "Do not apply outlines")), h("li", { key: '397110091fb08f7e34c16c8a264314153ac16ac3', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '0b8e2644362c8131f6df52af19aaa0b37fb3331a', class: "mx-auto" }, h("div", { key: '7d8b31e4b27bcc28847dd6c912a95bb1b9c08694', class: "bg-accent p-16" }, h("div", { key: '29b1988e197e997ce13c962dd872310bd61a545a', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: '6336def9b4ada2e13a43c037aec0ff59aa142e8c', class: "f-ui-02 text-center" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones"))))));
+    }
+    static get is() { return "logo-wrong-usage"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["logo-wrong-usage.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["logo-wrong-usage.css"]
+        };
+    }
+}

package/dist/collection/eds-docs-ui/svg-repository/svg-repository.css

@@ -0,0 +1,5 @@
+:host, .full-width {
+    display: block;
+    width: 100%;
+  }
+  

package/dist/{components/svg-repository.entry.js → collection/eds-docs-ui/svg-repository/svg-repository.js}

@@ -1,12 +1,9 @@
-import { r as registerInstance, h, g as getElement } from './index-9d277061.js';
-import { L as svgs } from './index-7281d120.js';
-
-const svgRepositoryCss = ":host,.full-width{display:block;width:100%}";
-
-const SvgRepository = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
+import { h } from "@stencil/core";
+import * as svgs from "../../../../../../../packages/svgs/src/index";
+/**
+ * @internal
+ */
+export class SvgRepository {
     // Convert SVG data to a format usable by `eds-table`
     getSvgData() {
         return Object.entries(svgs)
@@ -28,10 +25,19 @@ const SvgRepository = class {
             icon: { format: 'svg' },
             name: { format: 'bold' }
         };
-        return (h("div", { key: 'f9b58e4ab1104753ef5e26fa70af162d9e5ddb1c', class: "full-width" }, h("eds-table", { key: 'fe21b6043cc0fc6f96cb8359f3e7ace75d3f4639', "table-data": JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true })));
+        return (h("div", { key: '48b9bd49dc2521db7fc1676544530f6bd9cd6287', class: "full-width" }, h("eds-table", { key: 'c3b5bdecde28ad6ec8a5172d883d49a8b0436f18', "table-data": JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true })));
+    }
+    static get is() { return "svg-repository"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["svg-repository.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["svg-repository.css"]
+        };
     }
-    get hostEl() { return getElement(this); }
-};
-SvgRepository.style = svgRepositoryCss;
-
-export { SvgRepository as svg_repository };
+    static get elementRef() { return "hostEl"; }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/collection/shared-ui/eds-card-section/eds-card-section.css

@@ -0,0 +1,249 @@
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.grid-layout {
+  display: grid;
+  grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);
+  grid-gap: var(--inner-gutter);
+}
+
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.grid-cols-4[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-4[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+4)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(4n+4)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+4)::after {
+  top: 0;
+}
+.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {
+  bottom: 0;
+}
+.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {
+  bottom: 0;
+}
+
+.grid-col-span-4 {
+  --container-grid-columns: 4;
+  grid-column: span 4 / span 4;
+}
+
+.gap-y-4 {
+  row-gap: 0.25rem;
+}
+
+.gap-y-8 {
+  row-gap: 0.5rem;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.inline {
+  display: inline;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+@media (min-width: 750px) {
+  .md\:flex {
+    display: flex;
+  }
+
+  .md\:hidden {
+    display: none;
+  }
+
+  .md\:gap-y-12 {
+    row-gap: 0.75rem;
+  }
+
+  .md\:pt-28 {
+    padding-top: 1.75rem;
+  }
+
+}
+
+@media (min-width: 750px) {
+  .md\:grid-col-span-1 {
+    --container-grid-columns: 1;
+    grid-column: span 1 / span 1;
+  }
+
+  .md\:grid-col-span-2 {
+    --container-grid-columns: 2;
+    grid-column: span 2 / span 2;
+  }
+
+  .md\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
+  }
+
+  .md\:grid-col-span-4 {
+    --container-grid-columns: 4;
+    grid-column: span 4 / span 4;
+  }
+
+  .md\:w-10-cols {
+    width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
+  }
+
+  .cols-container>.md\:w-10-cols {
+    width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
+  }
+
+  .md\:w-10-cols>* {
+    --container-grid-columns: 10;
+  }
+}
+
+@media (min-width: 900px) {
+  .lg\:grid-col-span-5 {
+    --container-grid-columns: 5;
+    grid-column: span 5 / span 5;
+  }
+
+  .lg\:grid-col-span-6 {
+    --container-grid-columns: 6;
+    grid-column: span 6 / span 6;
+  }
+
+  .lg\:grid-col-start-7 {
+    grid-column-start: 7;
+  }
+
+  .lg\:w-8-cols {
+    width: calc(((8 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
+  }
+
+  .cols-container>.lg\:w-8-cols {
+    width: calc(((8 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
+  }
+
+  .lg\:w-8-cols>* {
+    --container-grid-columns: 8;
+  }
+
+  .lg\:w-10-cols {
+    width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
+  }
+
+  .cols-container>.lg\:w-10-cols {
+    width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
+  }
+
+  .lg\:w-10-cols>* {
+    --container-grid-columns: 10;
+  }
+}
+
+@media (min-width: 900px) {
+  .lg\:order-last {
+    order: 9999;
+  }
+
+  .lg\:order-none {
+    order: 0;
+  }
+
+  .lg\:mt-0 {
+    margin-top: 0rem;
+  }
+
+  .lg\:block {
+    display: block;
+  }
+
+  .lg\:flex {
+    display: flex;
+  }
+
+  .lg\:hidden {
+    display: none;
+  }
+
+  .lg\:w-\[150px\] {
+    width: 150px;
+  }
+
+  .lg\:w-auto {
+    width: auto;
+  }
+
+  .lg\:max-w-\[720px\] {
+    max-width: 720px;
+  }
+
+  .lg\:flex-row {
+    flex-direction: row;
+  }
+
+  .lg\:flex-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  .lg\:gap-y-16 {
+    row-gap: 1rem;
+  }
+
+  .lg\:px-28 {
+    padding-left: 1.75rem;
+    padding-right: 1.75rem;
+  }
+
+  .lg\:\!pl-12 {
+    padding-left: 0.75rem !important;
+  }
+
+  .lg\:\!pr-12 {
+    padding-right: 0.75rem !important;
+  }
+}

package/dist/collection/shared-ui/eds-card-section/eds-card-section.js

@@ -0,0 +1,95 @@
+import { h } from "@stencil/core";
+import { parseData } from "../../utils/sharedUtils";
+/**
+ * `EdsCardSection` is a component that renders a section of cards in a customizable grid layout of 4 columns (grid-cols-4).
+ * Each card within the section can display various properties such as title, description, avatar, and additional content.
+ *
+ * Key Features:
+ * - Accepts a JSON string or array of card objects, each defining its properties like title, description, avatar, tags, URL, and image.
+ * - Configurable grid layout with adjustable column span for each card, optimizing display on different screen sizes.
+ *
+ * This component is ideal for displaying a structured section of cards with varying content in a responsive grid format.
+ */
+export class EdsCardSection {
+    constructor() {
+        this.cards = [];
+        this.occupyCols = 1;
+    }
+    /**
+     * Parses the `cards` JSON string prop into an array of card objects.
+     * If parsing fails, returns an empty array.
+     *
+     * @returns {any[]} An array of parsed card objects.
+     */
+    get parsedCards() {
+        return parseData(this.cards);
+    }
+    /**
+     * Renders the card section as a grid layout.
+     * Each parsed card object is mapped to an `<eds-card-generic>` component,
+     * displaying card details such as title, description, avatar, etc.
+     *
+     * @returns {JSX.Element} The rendered section containing a list of cards.
+     */
+    render() {
+        return (h("section", { key: 'eb64be830a5a1b752fadd0a8a76be9240b70cfe8', class: "w-full" }, h("ul", { key: 'd4eb8d8492a67f7491535953e0e37172fc9e09ff', class: "grid-layout grid-cols-4 gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.parsedCards.map((card) => (h("li", { class: `grid-col-span-4 md:grid-col-span-${this.occupyCols} flex flex-col` }, h("eds-card-generic", { cardTitle: card.title, description: card.description, avatar: card.avatar, headingLevel: card.headingLevel, tags: card.tags, url: card.url, bg: card.bg, tiny: card.tiny, image: card.image, withHover: card.withHover })))))));
+    }
+    static get is() { return "eds-card-section"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-card-section.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-card-section.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "cards": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Card[]",
+                    "resolved": "Card[] | string",
+                    "references": {
+                        "Card": {
+                            "location": "local",
+                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/shared-ui/eds-card-section/eds-card-section.tsx",
+                            "id": "../../../packages/components/src/shared-ui/eds-card-section/eds-card-section.tsx::Card"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "JSON string representing an array of card objects.\nEach card object can contain properties like `title`, `description`, `avatar`, `headingLevel`, `tags`, `url`, `bg`, `tiny`, and `image`.\n\nExample:\n```json\n'[{\"title\": \"Card Title\", \"description\": \"Description\", \"avatar\": \"/path/to/avatar.jpg\", \"url\": \"http://example.com\"}]'\n```"
+                },
+                "attribute": "cards",
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "occupyCols": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "1 | 2 | 3 | 4",
+                    "resolved": "1 | 2 | 3 | 4",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of columns to span for each card in the grid layout four.\nThis value sets the column span on medium (md) and larger screen sizes.\nDefault is `1`."
+                },
+                "attribute": "occupy-cols",
+                "reflect": false,
+                "defaultValue": "1"
+            }
+        };
+    }
+}