srcdev-nuxt-components 9.1.22 → 9.1.24

package/.claude/settings.json

@@ -27,7 +27,16 @@
       "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 5597a15 -- \"*.vue\" \"*.css\")",
       "Bash(npm install:*)",
       "Bash(npm run:*)",
-      "Bash(git add:*)"
+      "Bash(git add:*)",
+      "Bash(ls /Users/simoncornforth/websites/nuxt-components/*.md)",
+      "Bash(gh release:*)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components status)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components add .claude/skills/components/services-section.md .claude/skills/components/services-section-grid.md .claude/skills/index.md app/components/03.organisms/services/services-grids/ServicesSectionGrid.vue app/components/03.organisms/services/services-section/ServicesSection.vue app/components/03.organisms/services/services-card/stories/ app/components/03.organisms/services/services-card/tests/ app/components/03.organisms/services/services-grids/stories/ app/components/03.organisms/services/services-grids/tests/ app/components/03.organisms/services/services-section/stories/ app/components/03.organisms/services/services-section/tests/)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components commit -m ':*)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline v9.1.22..HEAD)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline c401cea..HEAD)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 3058d63 --stat)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 0f99d7a --stat)"
     ],
     "additionalDirectories": [
       "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/content-wrappers/content-width",

package/.claude/skills/components/services-section-grid.md

@@ -0,0 +1,130 @@
+# ServicesSectionGrid Component
+
+## Overview
+
+`ServicesSectionGrid` renders a vertical stack of `ServicesSection` components (in summary mode) from a `Service[]` array. Each section includes a hardcoded `summary-link` (navigates to the service detail page) and a `cta` button. Column order can be alternated on every other section via `useAlternateReverse`.
+
+All routing and CTA decisions are delegated to the consumer via scoped slots — the grid forwards `serviceData` from each `ServicesSection` iteration so the consumer can build hrefs, labels, and choose components freely.
+
+## Props
+
+| Prop                    | Type                           | Default     | Required |
+| ----------------------- | ------------------------------ | ----------- | -------- |
+| `servicesData`          | `Service[]`                    | —           | **yes**  |
+| `tag`                   | `"div" \| "section" \| "main"` | `"div"`     | no       |
+| `useAlternateReverse`   | `boolean`                      | `false`     | no       |
+| `summaryAlignment`      | `"start" \| "center" \| "end"` | `"center"`  | no       |
+| `styleClassPassthrough` | `string \| string[]`           | `[]`        | no       |
+
+### `useAlternateReverse`
+
+When `true`, odd-indexed sections flip their image/content column order (`reverse` prop on each `ServicesSection`), creating a visual zigzag layout. Commonly used on services landing pages with three or more services.
+
+### `summaryAlignment`
+
+Passed to every `ServicesSection` as `summaryAlignment` — controls vertical alignment of the info column content within the grid cell.
+
+## Slots
+
+| Slot           | Slot props                 | Purpose                                                   |
+| -------------- | -------------------------- | --------------------------------------------------------- |
+| `summary-link` | `{ serviceData: Service }` | Navigation link below the `whatIsIt` text in each section |
+
+The slot is forwarded from the inner `ServicesSection` and receives the current iteration's `serviceData` as a scoped prop. It is optional — omitting it leaves that area empty.
+
+> **Note**: `ServicesSectionGrid` always renders sections in summary mode (`isSummary: true`), so only `summary-link` is available. The `cta` slot (which lives inside a full-mode `GlassPanel`) is not reachable from this component.
+
+## Basic usage
+
+```vue
+<ServicesSectionGrid
+  :services-data="servicesData ?? []"
+  :use-alternate-reverse="true"
+  tag="section"
+>
+  <template #summary-link="{ serviceData }">
+    <LinkText
+      :to="`/services/${serviceData.slug}`"
+      :link-text="`More about ${serviceData.title}`"
+      :style-class-passthrough="['mb-20']"
+    />
+  </template>
+</ServicesSectionGrid>
+```
+
+## Alternate reverse (zigzag) layout
+
+```vue
+<ServicesSectionGrid
+  :services-data="servicesData ?? []"
+  :use-alternate-reverse="true"
+  tag="section"
+>
+  <!-- slots as above -->
+</ServicesSectionGrid>
+```
+
+## Consumer page boilerplate
+
+```vue
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-1">Our Services</h1>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <ServicesSectionGrid
+            :services-data="servicesData ?? []"
+            :use-alternate-reverse="true"
+            tag="section"
+          >
+            <template #summary-link="{ serviceData }">
+              <LinkText
+                :to="`/services/${serviceData.slug}`"
+                :link-text="`More about ${serviceData.title}`"
+                :style-class-passthrough="['mb-20']"
+              />
+            </template>
+          </ServicesSectionGrid>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: false });
+
+useHead({
+  title: "Services",
+  meta: [{ name: "description", content: "Browse our services" }],
+  bodyAttrs: { class: "page-services" },
+});
+
+const store = useServicesStore();
+const { servicesData } = storeToRefs(store);
+
+if (servicesData.value.length === 0) {
+  await store.fetchServicesData();
+}
+</script>
+
+<style lang="css">
+.page-services {
+  .services-grid {
+    gap: 6rem;
+  }
+}
+</style>
+```
+
+## Notes
+
+- Component is auto-imported in Nuxt — no import needed.
+- The `Service` type is imported from `~/types/types.services`.
+- Each `ServicesSection` receives its array `index` for eager/lazy image loading decisions (first two sections load eagerly).
+- Pass `servicesData ?? []` as a safe fallback while data loads asynchronously.
+- See [services-section.md](./services-section.md) for the full `ServicesSection` prop and slot API.

package/.claude/skills/components/services-section.md

@@ -19,8 +19,24 @@ All routing and CTA decisions are delegated to the consumer via slots.
 | `isSummary` | `boolean` | `false` | no |
 | `summaryAlignment` | `"start" \| "center" \| "end"` | `"center"` | no |
 | `reverse` | `boolean` | `false` | no |
+| `durationIcon` | `string` | `"mdi:clock-time-four-outline"` | no |
+| `priceIcon` | `string` | `"mdi:currency-gbp"` | no |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | no |
 
+### Icon customisation
+
+The two icons in the price/duration row default to `mdi:clock-time-four-outline` and `mdi:currency-gbp`. Override them for a different currency or icon style:
+
+```vue
+<ServicesSection
+  :service-data="service"
+  duration-icon="mdi:timer-outline"
+  price-icon="mdi:currency-eur"
+/>
+```
+
+Any [Iconify](https://icon-sets.iconify.design/) icon name is accepted. See `.claude/skills/icon-sets.md` for the icon packages available in this layer.
+
 ### `index` and image loading
 
 The `index` prop controls eager vs lazy image loading. The first two sections (`index` 0 and 1) load eagerly; all others load lazily. Pass the loop index when rendering a list of sections.

package/.claude/skills/index.md

@@ -51,8 +51,9 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── link-text.md            — LinkText props, slots, usage patterns, styling
     ├── page-hero-highlights.md — PageHeroHighlights template: hero + highlights strip grid, CSS custom property theming
     ├── services-card.md        — ServicesCard props (incl. eyebrowConfig/heroConfig), actions slot, CSS tokens, page boilerplate
-    ├── services-card-grid.md   — ServicesCardGrid props, config pass-through, CSS tokens, full page boilerplate
-    ├── services-section.md     — ServicesSection props, summary-link/cta slots, summary vs full mode
+    ├── services-card-grid.md        — ServicesCardGrid props, config pass-through, CSS tokens, full page boilerplate
+    ├── services-section-grid.md     — ServicesSectionGrid props, useAlternateReverse zigzag layout, page boilerplate
+    ├── services-section.md          — ServicesSection props, summary-link/cta slots, summary vs full mode
     ├── contact-section.md      — ContactSection props (stepperIndicatorSize pass-through), 3-item info+form layout, slot API
     ├── stepper-list.md         — StepperList dynamic slots (item-{n}/indicator-{n}), props, connector behaviour
     ├── expanding-panel.md      — ExpandingPanel v-model, forceOpened, slots (summary/icon/content), ARIA wiring

package/app/assets/styles/setup/06.utility-classes/animations/_entry-slide-in.css

@@ -9,7 +9,9 @@
   }
 }
 
-.entry-slide-in {
-  animation: entrySlideInAnimation both;
-  animation-timeline: view(70% 5%);
+@media (prefers-reduced-motion: no-preference) {
+  .entry-slide-in {
+    animation: entrySlideInAnimation both;
+    animation-timeline: view(70% 5%);
+  }
 }

package/app/components/03.organisms/services/services-card/stories/ServicesCard.stories.ts

@@ -0,0 +1,193 @@
+import ServicesCard from "../ServicesCard.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { Service } from "~/types/types.services";
+
+const meta: Meta<typeof ServicesCard> = {
+  title: "Organisms/Services/Services Card",
+  component: ServicesCard,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "section", "article"],
+      description: "HTML element rendered as the root",
+    },
+    eyebrowConfig: {
+      control: "object",
+      description: "Override eyebrow tag and fontSize — omit keys to use defaults",
+    },
+    heroConfig: {
+      control: "object",
+      description: "Override hero tag and fontSize — omit keys to use defaults",
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional CSS classes applied to the root element",
+    },
+  },
+  args: {
+    tag: "div",
+    eyebrowConfig: {},
+    heroConfig: {},
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Portrait card for a single service: image, subtitle (eyebrow), title, short description, and an `actions` slot for CTA content. Heading levels and eyebrow sizing are configurable via `eyebrowConfig` and `heroConfig`. Usually consumed via `ServicesCardGrid`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ServicesCard>;
+
+// ─── Fixtures ─────────────────────────────────────────────────────────────────
+
+const sampleService: Service = {
+  slug: "locs-installation",
+  title: "Locs Installation",
+  subtitle: "Start your loc journey",
+  price: "£120",
+  duration: "3–4 hours",
+  image: "https://picsum.photos/seed/locs-card/600/800",
+  shortDescription:
+    "Professional loc installation tailored to your hair type. We work with all textures and lengths to create beautiful, long-lasting locs.",
+  longDescription: "Full description not used in card view.",
+  heroHeading: [{ text: "Why choose locs?", styleClass: "normal" }],
+  whatIsIt: "Locs are a protective hairstyle.",
+  process: ["Consultation", "Cleanse", "Palm-roll", "Dry & finish"],
+  idealFor: ["Natural hair", "Low maintenance seekers"],
+  maintenance: "Re-twist every 4–6 weeks.",
+  faqs: [{ question: "How long do locs take to mature?", answer: "12–18 months." }],
+  seoTitle: "Locs Installation",
+  seoDescription: "Professional locs installation service.",
+};
+
+// ─── Stories ──────────────────────────────────────────────────────────────────
+
+export const WithActions: Story = {
+  name: "With Actions Slot",
+  render: (args) => ({
+    components: { ServicesCard },
+    setup() {
+      return { args, sampleService };
+    },
+    template: `
+      <div style="max-width:320px">
+        <ServicesCard v-bind="args" :service-data="sampleService">
+          <template #actions="{ serviceData }">
+            <a
+              :href="'/services/' + serviceData.slug"
+              style="display:inline-flex;align-items:center;gap:0.6rem;margin-top:1.6rem;padding:1.2rem 2.4rem;background:#333;color:#fff;border-radius:0.4rem;text-decoration:none;font-size:1.4rem;"
+            >
+              More about {{ serviceData.title }}
+            </a>
+          </template>
+        </ServicesCard>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "Standard usage — actions slot receives serviceData as a scoped prop for constructing hrefs and labels.",
+      },
+    },
+  },
+};
+
+export const WithoutActions: Story = {
+  name: "Without Actions Slot",
+  render: (args) => ({
+    components: { ServicesCard },
+    setup() {
+      return { args, sampleService };
+    },
+    template: `
+      <div style="max-width:320px">
+        <ServicesCard v-bind="args" :service-data="sampleService" />
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "The actions slot is optional — card renders cleanly without it.",
+      },
+    },
+  },
+};
+
+export const ConfigOverrides: Story = {
+  name: "Config Overrides",
+  args: {
+    eyebrowConfig: { tag: "p", fontSize: "small" },
+    heroConfig: { tag: "h3", fontSize: "title" },
+  },
+  render: (args) => ({
+    components: { ServicesCard },
+    setup() {
+      return { args, sampleService };
+    },
+    template: `
+      <div style="max-width:320px">
+        <ServicesCard v-bind="args" :service-data="sampleService">
+          <template #actions="{ serviceData }">
+            <a
+              :href="'/services/' + serviceData.slug"
+              style="display:inline-flex;margin-top:1.6rem;padding:1.2rem 2.4rem;background:#333;color:#fff;border-radius:0.4rem;text-decoration:none;font-size:1.4rem;"
+            >
+              Enquire
+            </a>
+          </template>
+        </ServicesCard>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "eyebrowConfig and heroConfig let consumers adjust heading levels and text sizing without touching the component — useful when multiple cards are nested inside a page with its own heading hierarchy.",
+      },
+    },
+  },
+};
+
+export const AsArticle: Story = {
+  name: "As Article Element",
+  args: {
+    tag: "article",
+    heroConfig: { tag: "h3" },
+  },
+  render: (args) => ({
+    components: { ServicesCard },
+    setup() {
+      return { args, sampleService };
+    },
+    template: `
+      <div style="max-width:320px">
+        <ServicesCard v-bind="args" :service-data="sampleService">
+          <template #actions="{ serviceData }">
+            <a
+              :href="'/services/' + serviceData.slug"
+              style="display:inline-flex;margin-top:1.6rem;padding:1.2rem 2.4rem;background:#333;color:#fff;border-radius:0.4rem;text-decoration:none;font-size:1.4rem;"
+            >
+              View service
+            </a>
+          </template>
+        </ServicesCard>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Use tag=\"article\" with heroConfig.tag=\"h3\" when cards are inside a section that already has an h2 — keeps the heading hierarchy correct.",
+      },
+    },
+  },
+};

package/app/components/03.organisms/services/services-card/tests/ServicesCard.spec.ts

@@ -0,0 +1,202 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ServicesCard from "../ServicesCard.vue";
+import type { Service } from "~/types/types.services";
+
+// ─── Fixtures ─────────────────────────────────────────────────────────────────
+
+const mockService: Service = {
+  slug: "test-service",
+  title: "Test Service",
+  subtitle: "A subtitle",
+  price: "£50",
+  duration: "60 mins",
+  image: "/images/test.jpg",
+  shortDescription: "A short description of the service.",
+  longDescription: "Long description text",
+  heroHeading: [{ text: "A great heading", styleClass: "normal" }],
+  whatIsIt: "What this service is",
+  process: ["Step one", "Step two"],
+  idealFor: ["Person A", "Person B"],
+  maintenance: "Maintenance advice",
+  faqs: [{ question: "FAQ question?", answer: "FAQ answer." }],
+  seoTitle: "SEO Title",
+  seoDescription: "SEO description",
+};
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe("ServicesCard", () => {
+  // ─── Mount ─────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Root element ───────────────────────────────────────────────────────
+
+  it("has services-card class on root", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.classes()).toContain("services-card");
+  });
+
+  it("renders as a div by default", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it("renders the tag prop as the root element", async () => {
+    for (const tag of ["section", "article"] as const) {
+      const wrapper = await mountSuspended(ServicesCard, {
+        props: { serviceData: mockService, tag },
+      });
+      expect(wrapper.element.tagName).toBe(tag.toUpperCase());
+    }
+  });
+
+  // ─── Service data ───────────────────────────────────────────────────────
+
+  it("renders the service title", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.text()).toContain(mockService.title);
+  });
+
+  it("renders the service subtitle via eyebrow", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.text()).toContain(mockService.subtitle);
+  });
+
+  it("renders the short description", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.find(".description").text()).toBe(mockService.shortDescription);
+  });
+
+  it("passes image src and alt to the image element", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService },
+    });
+    const img = wrapper.find(".image-wrapper img");
+    expect(img.attributes("src")).toContain(mockService.image);
+    expect(img.attributes("alt")).toBe(mockService.title);
+  });
+
+  it("loads the image lazily", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.find(".image-wrapper img").attributes("loading")).toBe("lazy");
+  });
+
+  // ─── Actions slot ───────────────────────────────────────────────────────
+
+  it("renders the actions slot", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService },
+      slots: {
+        actions: '<button class="test-cta">Book now</button>',
+      },
+    });
+    expect(wrapper.find(".test-cta").exists()).toBe(true);
+    expect(wrapper.find(".test-cta").text()).toBe("Book now");
+  });
+
+  it("renders without error when no actions slot is provided", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── eyebrowConfig ──────────────────────────────────────────────────────
+
+  it("uses default eyebrow fontSize of large", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.find(".eyebrow-text").classes()).toContain("large");
+  });
+
+  it("applies eyebrowConfig.fontSize override", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService, eyebrowConfig: { fontSize: "small" } },
+    });
+    expect(wrapper.find(".eyebrow-text").classes()).toContain("small");
+  });
+
+  it("applies eyebrowConfig.tag override", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService, eyebrowConfig: { tag: "p" } },
+    });
+    expect(wrapper.find(".eyebrow-text").element.tagName).toBe("P");
+  });
+
+  // ─── heroConfig ─────────────────────────────────────────────────────────
+
+  it("uses default hero tag of h2", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.find(".hero-text").element.tagName).toBe("H2");
+  });
+
+  it("applies heroConfig.tag override", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService, heroConfig: { tag: "h3" } },
+    });
+    expect(wrapper.find(".hero-text").element.tagName).toBe("H3");
+  });
+
+  it("applies heroConfig.fontSize override", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService, heroConfig: { fontSize: "title" } },
+    });
+    expect(wrapper.find(".hero-text").classes()).toContain("title");
+  });
+
+  // ─── styleClassPassthrough ──────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService, styleClassPassthrough: "custom-card" },
+    });
+    expect(wrapper.classes()).toContain("custom-card");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService, styleClassPassthrough: ["class-a", "class-b"] },
+    });
+    expect(wrapper.classes()).toContain("class-a");
+    expect(wrapper.classes()).toContain("class-b");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService, styleClassPassthrough: ["original"] },
+    });
+    expect(wrapper.classes()).toContain("original");
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+});

package/app/components/03.organisms/services/services-card/tests/__snapshots__/ServicesCard.spec.ts.snap

@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ServicesCard > renders correct HTML structure 1`] = `
+"<div class="services-card">
+  <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/test.jpg 1x, /_ipx/_/images/test.jpg 2x" alt="Test Service" loading="lazy" class="image" src="/_ipx/_/images/test.jpg"></div>
+  <div class="eyebrow-text large">A subtitle</div>
+  <h2 class="hero-text heading axis-horizontal">
+    <!--v-if--><span class="text-block-0 normal">Test Service</span>
+  </h2>
+  <div class="description">A short description of the service.</div>
+</div>"
+`;

package/app/components/03.organisms/services/services-grids/ServicesSectionGrid.vue

@@ -10,23 +10,7 @@
       :summary-alignment="summaryAlignment"
     >
       <template #summary-link="{ serviceData }">
-        <LinkText
-          :to="`/ui/services/services-section/${serviceData.slug}`"
-          :link-text="`More about ${serviceData.title}`"
-          :style-class-passthrough="['mb-20']"
-        />
-      </template>
-      <template #cta="{ serviceData }">
-        <InputButtonCore
-          variant="secondary"
-          :button-text="`Enquire about ${serviceData.title}`"
-          href="#"
-          :style-class-passthrough="['mbs-24']"
-        >
-          <template #right>
-            <Icon name="mdi:arrow-right" class="icon" />
-          </template>
-        </InputButtonCore>
+        <slot name="summary-link" :service-data="serviceData"></slot>
       </template>
     </ServicesSection>
   </component>