@repobit/dex-system-design 0.23.64 → 0.23.65

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.23.65](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.64...@repobit/dex-system-design@0.23.65) (2026-07-03)
+
+### Bug Fixes
+
+* **DEX-1014:** css adjustments for cards component
+* **DEX-1014:** css adjustments for cards component
+
+
 ## [0.23.64](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.63...@repobit/dex-system-design@0.23.64) (2026-07-03)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.64",
+  "version": "0.23.65",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -70,8 +70,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.3.60",
-    "@repobit/dex-store-elements": "1.4.52",
+    "@repobit/dex-store": "1.3.61",
+    "@repobit/dex-store-elements": "1.4.53",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -88,5 +88,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "d2ffeffa127085b7c0af844f9965b13afdfd7bd8"
+  "gitHead": "798ae4c67c57d8932da4962aea6c451315865638"
 }

package/src/components/cards/card.css.js

@@ -12,9 +12,12 @@ export default css`
   }
 
   ::slotted([slot="icon"]) {
-    width: 48px !important;
-    height: 48px !important;
-    flex-shrink: 0;
+    max-width: 120px !important;
+    max-height: 120px !important;
+    width: auto !important;
+    height: auto !important;
+    object-fit: contain !important;
+    display: block !important;
   }
 
   .bd-section-title-s {
@@ -35,8 +38,6 @@ export default css`
     position: relative;
     width: 100%;
     flex-direction: column;
-    padding-left: var(--spacing-14);
-    padding-right: var(--spacing-14);
     max-width: 1400px;
     margin: 0 auto;
   }
@@ -64,7 +65,6 @@ export default css`
     scroll-snap-type: x mandatory;
     display: grid;
     gap: 1.5rem;
-    /* grid-template-columns vine din JS */
   }
 
   .bd-light-carousel-track-s::-webkit-scrollbar {
@@ -72,13 +72,12 @@ export default css`
   }
 
   .bd-light-box-s {
-    flex: var(--spacing-0) var(--spacing-0) auto;
     background: var(--background-card-grey);
     border-radius: var(--spacing-20);
     padding: var(--spacing-32);
     display: flex;
     flex-direction: column;
-    align-items: start;
+    align-items: flex-start;
     justify-content: flex-start;
     text-align: start;
     transition: transform 0.2s ease-in-out;
@@ -132,30 +131,32 @@ export default css`
     text-align: center !important;
   }
 
-  .bd-light-icon-s {
-    position: relative;
-    max-width: 100%;
-    height: var(--spacing-44);
-    width: var(--spacing-44);
-  }
+ .bd-light-icon-s {
+  max-width: 120px;
+  max-height: 120px;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  display: block;
+}
 
   .bd-light-box-no-content .bd-light-icon-s {
     margin: 0 !important;
-    bottom: 0;
   }
 
   .bd-light-box-header-s {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    justify-content: flex-start;
     gap: var(--spacing-8);
     padding-bottom: var(--spacing-8);
-    left: -5px;
     position: relative;
   }
 
   .bd-light-box-no-content .bd-light-box-header-s {
     align-items: center !important;
+    justify-content: center !important;
     margin: 0 !important;
   }
 
@@ -166,8 +167,9 @@ export default css`
 
   .bd-light-title-badge-wrapper-s {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     gap: var(--spacing-4, 4px);
+    overflow: hidden;
   }
 
   .bd-light-title-no-content {
@@ -176,9 +178,26 @@ export default css`
     justify-content: center;
   }
 
+  .bd-card-content-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .bd-card-cta-wrapper {
+    margin-top: var(--spacing-16);
+    padding-top: var(--spacing-8);
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .bd-card-cta-wrapper:empty {
+    display: none;
+  }
+
   @media (max-width: 1024px) {
     .bd-light-box-s {
-      width: 380px;
       padding: 1.5em;
     }
 
@@ -229,10 +248,6 @@ export default css`
     .bd-light-box-s p {
       font-size: 0.9em;
     }
-
-    .bd-light-icon-s {
-      bottom: var(--spacing-10);
-    }
   }
 
   @media (max-width: 600px) {

package/src/components/cards/card.js

@@ -1,5 +1,6 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import "../button/button.js";
 import "../heading/heading.js";
 import carouselCSS from "./card.css.js";
 
@@ -25,20 +26,68 @@ class Card extends LitElement {
     if (!items.length) return;
 
     items.forEach(item => {
-      const box = item.renderRoot?.querySelector(".bd-light-box-s");
-      if (box) {
-        box.style.height    = "auto";
-        box.style.minHeight = "0";
-      }
+      const box      = item.renderRoot?.querySelector(".bd-light-box-s");
+      const iconW    = item.renderRoot?.querySelector(".bd-light-box-header-s");
+      const titleW   = item.renderRoot?.querySelector(".bd-light-title-badge-wrapper-s");
+      const contentW = item.renderRoot?.querySelector(".bd-card-content-wrapper");
+
+      if (box)      { box.style.height = "auto"; box.style.minHeight = "0"; box.style.width = "auto"; }
+      if (iconW)    { iconW.style.height = "auto"; }
+      if (titleW)   { titleW.style.height = "auto"; }
+      if (contentW) { contentW.style.height = "auto"; }
     });
 
     requestAnimationFrame(() => {
+      let maxIcon = 0;
+      items.forEach(item => {
+        const el = item.renderRoot?.querySelector(".bd-light-box-header-s");
+        if (!el) return;
+        const h = el.getBoundingClientRect().height;
+        if (h > maxIcon) maxIcon = h;
+      });
+      if (maxIcon > 0) {
+        items.forEach(item => {
+          const el = item.renderRoot?.querySelector(".bd-light-box-header-s");
+          if (el) el.style.height = `${maxIcon}px`;
+        });
+      }
+
+      let maxTitle = 0;
+      items.forEach(item => {
+        const el = item.renderRoot?.querySelector(".bd-light-title-badge-wrapper-s");
+        if (!el) return;
+        const h = el.getBoundingClientRect().height;
+        if (h > maxTitle) maxTitle = h;
+      });
+      if (maxTitle > 0) {
+        items.forEach(item => {
+          const el = item.renderRoot?.querySelector(".bd-light-title-badge-wrapper-s");
+          if (el) el.style.height = `${maxTitle}px`;
+        });
+      }
+
+      let maxContent = 0;
+      items.forEach(item => {
+        const el = item.renderRoot?.querySelector(".bd-card-content-wrapper");
+        if (!el) return;
+        const h = el.getBoundingClientRect().height;
+        if (h > maxContent) maxContent = h;
+      });
+      if (maxContent > 0) {
+        items.forEach(item => {
+          const el = item.renderRoot?.querySelector(".bd-card-content-wrapper");
+          if (el) el.style.height = `${maxContent}px`;
+        });
+      }
+
+      let maxW = 0;
       let maxH = 0;
       items.forEach(item => {
         const box = item.renderRoot?.querySelector(".bd-light-box-s");
         if (!box) return;
-        const h = box.getBoundingClientRect().height;
-        if (h > maxH) maxH = h;
+        const rect = box.getBoundingClientRect();
+        if (rect.height > maxH) maxH = rect.height;
+        if (rect.width  > maxW) maxW = rect.width;
       });
 
       if (maxH > 0) {
@@ -50,6 +99,16 @@ class Card extends LitElement {
           }
         });
       }
+
+      if (maxW > 0) {
+        items.forEach(item => {
+          const box = item.renderRoot?.querySelector(".bd-light-box-s");
+          if (box) {
+            box.style.width    = `${maxW}px`;
+            box.style.minWidth = `${maxW}px`;
+          }
+        });
+      }
     });
   }
 
@@ -116,15 +175,22 @@ class CardItem extends LitElement {
     const iconEl = this.querySelector("[slot='icon']");
 
     if (iconEl) {
-      return iconEl.cloneNode(true);
+      const clone = iconEl.cloneNode(true);
+      clone.style.maxWidth  = "120px";
+      clone.style.maxHeight = "120px";
+      clone.style.width     = "auto";
+      clone.style.height    = "auto";
+      clone.style.objectFit = "contain";
+      clone.style.display   = "block";
+      return clone;
     }
 
     if (this.icon) {
       return html`<img
-        src="${this.icon}"
-        alt="icon"
-        class="bd-light-icon-s"
-      />`;
+    src="${this.icon}"
+    alt="icon"
+    class="bd-light-icon-s"
+  />`;
     }
 
     return "";
@@ -133,7 +199,8 @@ class CardItem extends LitElement {
   _hasContent() {
     const slottedNodes = [...this.childNodes].filter((node) => {
       if (node.nodeType === Node.ELEMENT_NODE) {
-        return node.getAttribute("slot") !== "icon";
+        const slot = node.getAttribute("slot");
+        return slot !== "icon" && slot !== "cta";
       }
       return node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== "";
     });
@@ -147,9 +214,13 @@ class CardItem extends LitElement {
 
     return html`
       <div class="bd-light-box-s ${isCentered ? "bd-light-box-center" : ""} ${!hasContent ? "bd-light-box-no-content" : ""}">
+
+        <!-- Icon -->
         <div class="bd-light-box-header-s ${isCentered ? "bd-light-box-header-center" : ""}">
           ${this._renderIcon()}
         </div>
+
+        <!-- Titlu -->
         ${this.title
           ? html`
               <div class="bd-light-title-badge-wrapper-s ${!hasContent ? "bd-light-title-no-content" : ""}">
@@ -157,7 +228,17 @@ class CardItem extends LitElement {
               </div>
             `
           : ""}
-        <slot></slot>
+
+        <!-- Content -->
+        <div class="bd-card-content-wrapper">
+          <slot></slot>
+        </div>
+
+        <!-- CTA Button -->
+        <div class="bd-card-cta-wrapper">
+          <slot name="cta"></slot>
+        </div>
+
       </div>
     `;
   }

package/src/components/cards/card.stories.js

@@ -1,9 +1,8 @@
 import { html } from 'lit';
+import '../button/button.js';
 import '../heading/heading.js';
 import '../icons/analysis-icon.js';
-import '../icons/arrow-down-icon.js';
 import '../icons/arrow-up-icon.js';
-import '../icons/close-icon.js';
 import '../icons/family-icon.js';
 import '../icons/globe-icon.js';
 import '../icons/individual-icon.js';
@@ -20,25 +19,33 @@ export default {
         component: `
 **Card** and **CardItem** are Lit components for a static card grid layout.
 
-- \`<bd-card-section>\` — a section wrapper with an optional title and a flex/grid track
-- \`<bd-card-item>\` — individual card with optional icon, title, alignment, and slotted content
+- \`<bd-card-section>\` — a section wrapper with an optional title and a grid track
+- \`<bd-card-item>\` — individual card with optional icon, title, alignment, slotted content, and CTA button
 
 ### Usage
 \`\`\`html
 <bd-card-section title="Why Bitdefender">
-  <bd-card-item title="AI Protectionn" align="center">
+  <bd-card-item title="AI Protection" align="center">
     <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
     <bd-p>Powered by machine learning.</bd-p>
-        <bd-p>Powered by machine learning.</bd-p>
+    <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
   </bd-card-item>
 </bd-card-section>
 \`\`\`
 
-### CardItem Behavior
-- If \`align="center"\` — applies \`bd-light-box-center\` and \`bd-light-box-header-center\` classes
-- If no slotted content (besides icon) — applies \`bd-light-box-no-content\` and \`bd-light-title-no-content\` classes
-- Icon is rendered from a \`slot="icon"\` element if present, otherwise falls back to the \`icon\` prop as an image path
-- Title uses \`<bd-h as="h4">\` with 10px vertical padding
+### CardItem Slots
+| Slot | Descriere |
+|---|---|
+| \`icon\` | Iconiță sau imagine (max 120x120px automat) |
+| default | Conținut text — \`bd-p\`, liste, etc. |
+| \`cta\` | Buton CTA jos stânga — \`bd-button-link\` sau \`bd-button\` |
+
+### CardItem Props
+| Prop | Valori | Default |
+|---|---|---|
+| \`title\` | String | \`''\` |
+| \`align\` | \`start\`, \`center\` | \`start\` |
+| \`icon\` | String (path) | \`''\` |
         `
       }
     }
@@ -46,25 +53,23 @@ export default {
   argTypes: {
     sectionTitle: {
       control    : 'text',
-      description: 'Optional title for the card section, rendered as `<h1>`',
+      description: 'Optional title for the card section',
       table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'CardSection' }
     },
     itemTitle: {
       control    : 'text',
-      description: 'Title of the card item, rendered using `<bd-h as="h4">`',
+      description: 'Title of the card item',
       table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'CardItem' }
     },
     align: {
       control    : { type: 'select' },
       options    : ['start', 'center'],
-      description: 'Alignment of card content. `"center"` applies centering CSS classes.',
+      description: 'Alignment of card content.',
       table      : { type: { summary: "'start' | 'center'" }, defaultValue: { summary: 'start' }, category: 'CardItem' }
     }
   }
 };
 
-// ─── Stories ───────────────────────────────────────────────────────────────
-
 export const Default = {
   name  : 'Default (4 items)',
   render: () => html`
@@ -87,7 +92,65 @@ export const Default = {
       </bd-card-item>
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'Four card items with icons, titles, and slotted `bd-p` content inside a section with a title.' } } }
+  parameters: { docs: { description: { story: 'Four card items with icons, titles, and content.' } } }
+};
+
+export const WithCTA = {
+  name  : 'With CTA Button',
+  render: () => html`
+    <bd-card-section title="Why Bitdefender">
+      <bd-card-item title="AI Protection">
+        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
+        <bd-p>Powered by machine learning and behavioral analysis to stop threats before they reach you.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
+      </bd-card-item>
+      <bd-card-item title="Multi-layer Security">
+        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
+        <bd-p>Multiple independent protection layers stop any attack.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
+      </bd-card-item>
+      <bd-card-item title="VPN Included">
+        <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
+        <bd-p>Unlimited encrypted VPN traffic for all your devices, anywhere.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
+      </bd-card-item>
+      <bd-card-item title="Parental Controls">
+        <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
+        <bd-p>Advanced controls to protect your children online.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
+      </bd-card-item>
+    </bd-card-section>
+  `,
+  parameters: { docs: { description: { story: 'Cards with CTA button in the bottom-left via `slot="cta"`.' } } }
+};
+
+export const WithCTAUnevenContent = {
+  name  : 'With CTA — Uneven Content (alignment test)',
+  render: () => html`
+    <bd-card-section title="Features">
+      <bd-card-item title="AI Protection">
+        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
+        <bd-p>Powered by machine learning and behavioral analysis to stop threats before they reach you. Our AI engine learns from billions of threat signals every day.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
+      </bd-card-item>
+      <bd-card-item title="Multi-layer Security — Advanced Protection Suite">
+        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
+        <bd-p>Stop any attack.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
+      </bd-card-item>
+      <bd-card-item title="VPN">
+        <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
+        <bd-p>Unlimited encrypted VPN traffic for all your devices, anywhere in the world, at any time.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
+      </bd-card-item>
+      <bd-card-item title="Parental Controls">
+        <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
+        <bd-p>Advanced controls to protect your children online and monitor their activity.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
+      </bd-card-item>
+    </bd-card-section>
+  `,
+  parameters: { docs: { description: { story: 'Cards with uneven title and content lengths — tests row alignment equalization. CTA buttons should always align at the same vertical position.' } } }
 };
 
 export const NoSectionTitle = {
@@ -112,7 +175,7 @@ export const NoSectionTitle = {
       </bd-card-item>
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'Section without `title` prop — the header div is conditionally omitted.' } } }
+  parameters: { docs: { description: { story: 'Section without title prop.' } } }
 };
 
 export const CenteredAlignment = {
@@ -137,7 +200,7 @@ export const CenteredAlignment = {
       </bd-card-item>
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: '`align="center"` applied to all items — centers icon, title, and content.' } } }
+  parameters: { docs: { description: { story: '`align="center"` applied to all items.' } } }
 };
 
 export const MixedAlignment = {
@@ -154,7 +217,7 @@ export const MixedAlignment = {
       </bd-card-item>
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'Two items side by side with different alignment values.' } } }
+  parameters: { docs: { description: { story: 'Two items with different alignment values.' } } }
 };
 
 export const NoIcon = {
@@ -175,7 +238,7 @@ export const NoIcon = {
       </bd-card-item>
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'Items without a `slot="icon"` element — the icon wrapper renders empty.' } } }
+  parameters: { docs: { description: { story: 'Items without icon.' } } }
 };
 
 export const NoSlottedContent = {
@@ -196,11 +259,11 @@ export const NoSlottedContent = {
       </bd-card-item>
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'Items with only an icon and title — applies `bd-light-box-no-content` and `bd-light-title-no-content` CSS classes.' } } }
+  parameters: { docs: { description: { story: 'Items with only icon and title.' } } }
 };
 
 export const TitleOnly = {
-  name  : 'Title Only (no icon, no content)',
+  name  : 'Title Only',
   render: () => html`
     <bd-card-section title="Features">
       <bd-card-item title="AI Protection"></bd-card-item>
@@ -208,7 +271,7 @@ export const TitleOnly = {
       <bd-card-item title="Parental Controls"></bd-card-item>
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'Minimal cards with only a title — no icon, no slotted content.' } } }
+  parameters: { docs: { description: { story: 'Minimal cards with only a title.' } } }
 };
 
 export const RichContent = {
@@ -220,15 +283,16 @@ export const RichContent = {
         <bd-p>Antivirus & Anti-malware</bd-p>
         <bd-p>VPN (200+ servers)</bd-p>
         <bd-p>Password Manager</bd-p>
+        <bd-button-link slot="cta" href="#" kind="primary" size="sm">See all features</bd-button-link>
       </bd-card-item>
       <bd-card-item title="Supported Platforms">
         <bd-arrow-up-icon slot="icon" width="32" height="32" color="#006DFF"></bd-arrow-up-icon>
         <bd-p>Windows, macOS, Android, iOS</bd-p>
-        <a href="#">View all platforms</a>
+        <bd-button-link slot="cta" href="#" kind="primary" size="sm">View all platforms</bd-button-link>
       </bd-card-item>
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'Rich slotted content using multiple `bd-p` elements and a link.' } } }
+  parameters: { docs: { description: { story: 'Rich content with multiple bd-p elements and CTA buttons.' } } }
 };
 
 export const SingleItem = {
@@ -238,12 +302,64 @@ export const SingleItem = {
       <bd-card-item title="AI Protection">
         <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
         <bd-p>Machine learning-powered protection.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
       </bd-card-item>
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'Edge case: only one card item inside the section.' } } }
+  parameters: { docs: { description: { story: 'Edge case: only one card item.' } } }
+};
+export const WithImages = {
+  name  : 'With Images (large + small)',
+  render: () => html`
+    <bd-card-section title="Our Products">
+      <bd-card-item title="Total Security">
+        <img slot="icon" src="/assets/tabs-img1.png" alt="Total Security" />
+        <bd-p>Complete protection for all your devices with advanced threat detection and real-time security updates.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
+      </bd-card-item>
+      <bd-card-item title="Internet Security">
+        <img slot="icon" src="/assets/tabs-img2.png" alt="Internet Security" />
+        <bd-p>Stay safe online.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
+      </bd-card-item>
+      <bd-card-item title="Antivirus Plus">
+        <img slot="icon" src="/assets/tabs-img3.png" alt="Antivirus Plus" />
+        <bd-p>Essential protection for your Windows PC with real-time antivirus and anti-phishing.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
+      </bd-card-item>
+    </bd-card-section>
+  `,
+  parameters: { docs: { description: { story: 'Cards with large images via `slot="icon"` — max-width/max-height 120px applied automatically.' } } }
 };
 
+export const MixedIconsAndImages = {
+  name  : 'Mixed — Icons and Images',
+  render: () => html`
+    <bd-card-section title="Mixed Media">
+      <bd-card-item title="AI Protection">
+        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
+        <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
+      </bd-card-item>
+      <bd-card-item title="Total Security">
+        <img slot="icon" src="/assets/tabs-img1.png" alt="Total Security" />
+        <bd-p>Complete protection for all your devices.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
+      </bd-card-item>
+      <bd-card-item title="VPN Included">
+        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
+        <bd-p>Unlimited encrypted VPN traffic for all your devices, anywhere.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
+      </bd-card-item>
+      <bd-card-item title="Internet Security">
+        <img slot="icon" src="/assets/tabs-img2.png" alt="Internet Security" />
+        <bd-p>Stay safe online with advanced threat detection.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
+      </bd-card-item>
+    </bd-card-section>
+  `,
+  parameters: { docs: { description: { story: 'Mix of SVG icons and large images in the same grid — tests consistent icon row height equalization.' } } }
+};
 export const Playground = {
   name: '🛝 Playground',
   args: {
@@ -256,12 +372,14 @@ export const Playground = {
       <bd-card-item title="${args.itemTitle}" align="${args.align}">
         <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
         <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
       </bd-card-item>
       <bd-card-item title="VPN Included" align="${args.align}">
         <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
         <bd-p>Unlimited encrypted VPN traffic.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
       </bd-card-item>
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'Interactive playground. Adjust section title, item title, and alignment via Controls.' } } }
+  parameters: { docs: { description: { story: 'Interactive playground.' } } }
 };