srcdev-nuxt-components 9.3.6 → 9.3.8

package/app/components/03.organisms/services/services-card/CONSUMER-STYLING.md

@@ -0,0 +1,129 @@
+# ServicesCard — Consumer Styling Guide
+
+## Public token API
+
+Every token below is consumed directly at its point of use (`var(--services-card-gap, 1rem)`,
+etc.) — there is no `--_`-prefixed private indirection layer, since none of these values are
+reused across multiple declarations or computed from something else. Set the token globally in
+a theme file, scoped to a page wrapper, or per-instance via `styleClassPassthrough` — no
+`:deep()` needed, component styles are unscoped.
+
+### Interaction states (whole-card-clickable only)
+
+Only visible when the card is in whole-card-clickable mode (see the component skill doc) —
+i.e. `is-clickable` is on the root — since these all default to `transparent`/`0` and only
+`.is-clickable` has a `:hover`/`:focus-visible` rule at all.
+
+| Token | Default | Controls |
+|---|---|---|
+| `--services-card-border-radius` | `0` | Root corner radius — also clips `.image-wrapper` (root has `overflow: hidden`), so set `--image-wrapper-border-radius` to match if you want the image's own corners rounded consistently with a rounded root |
+| `--services-card-border-width` | `1px` | Border thickness |
+| `--services-card-border-colour` | `transparent` | Resting (non-hover) border colour |
+| `--services-card-border-colour-hover` | resting border colour | Border colour on `:hover`/`:focus-visible` — defaults to whatever `--services-card-border-colour` resolves to, so setting only the resting colour keeps the border visible on hover instead of it vanishing |
+| `--services-card-outline-width` | `2px` | Outline thickness |
+| `--services-card-outline-colour` | `transparent` | Resting (non-hover) outline colour |
+| `--services-card-outline-colour-hover` | `transparent` | Outline colour on `:hover`/`:focus-visible` |
+| `--services-card-outline-offset` | `0px` | Resting outline offset |
+| `--services-card-outline-offset-hover` | `0px` | Outline offset on `:hover`/`:focus-visible` — e.g. set to a larger value than the resting offset for an outline that grows outward on hover |
+
+```css
+/* A card that gets a visible border + outline ring when it's a whole-card link */
+.services-card {
+  --services-card-border-colour: var(--theme-border);
+  --services-card-outline-colour-hover: var(--theme-border-focus);
+  --services-card-outline-offset-hover: 4px;
+}
+```
+
+### Layout & sizing
+
+| Token | Default | Controls |
+|---|---|---|
+| `--services-card-gap` | `1rem` | Gap between the image row and the details row |
+| `--image-wrapper-aspect-ratio` | `3/4` | Image aspect ratio |
+| `--image-wrapper-border-radius` | `8px` | Image corner radius |
+| `--image-wrapper-padding-block` | `0 0` | Padding inside the image wrapper (block axis) |
+| `--image-wrapper-padding-inline` | `0 0` | Padding inside the image wrapper (inline axis) |
+| `--image-wrapper-border-image-zoom-transform` | `scale(1.05)` | Transform applied to the image on hover |
+| `--details-wrapper-grid-gap` | `1rem` | Gap between eyebrow/title/description/footer |
+| `--details-wrapper-padding-block` | `0` | Padding inside the details wrapper (block axis) |
+| `--details-wrapper-padding-inline` | `0` | Padding inside the details wrapper (inline axis) |
+| `--eyebrow-text-padding-block` | `0.8rem 0` | Padding above/below the eyebrow |
+| `--hero-text-padding-block` | `2rem 1rem` | Padding above/below the title |
+| `--description-padding-block` | `0 0` | Padding on the description text |
+| `--description-text-colour` | `var(--colour-text-secondary)` | Description paragraph colour |
+| `--description-line-height` | `1.4` | Description line height |
+| `--description-line-clamp` | `100` | Number of lines the description clamps to — default is effectively unclamped; set e.g. `3` to clamp |
+| `--meta-padding-block` | `1.6rem 0` | Padding above/below the meta row's divider line |
+| `--meta-border-colour` | `var(--theme-border)` | Meta row's top divider colour |
+| `--meta-text-colour` | `inherit` | Duration/price text colour |
+| `--meta-font-size` | `1.4rem` | Duration/price text size |
+| `--meta-text-transform` | `uppercase` | Text transform on the duration/price meta row |
+| `--footer-padding-block` | `0` | Padding on the `.footer` wrapper (meta row + actions slot) |
+| `--footer-wrapper-grid-gap` | `1rem` | Gap between the meta row and the actions slot inside `.footer` |
+
+```css
+/* assets/styles/setup/07.components/services-card.css */
+:root {
+  --services-card-gap: 1.4rem;
+  --description-line-clamp: 3;
+  --meta-text-transform: none;
+}
+```
+
+---
+
+## Text content — props/slots, not CSS
+
+Duration and price text come from `serviceData.duration`/`serviceData.price` by default, or
+`durationText`/`priceText` props, or the `duration`/`price` scoped slots (for icons or other
+custom markup) — there is nothing to override in CSS for the text itself, only its styling via
+the tokens above. See the component skill doc for slot/prop usage examples.
+
+---
+
+## Per-instance overrides via styleClassPassthrough
+
+Use sparingly — prefer global or page-scoped CSS. When a single instance needs a distinct look:
+
+```vue
+<ServicesCard :style-class-passthrough="['featured-service']" :service-data="service" />
+```
+
+```css
+.services-card.featured-service {
+  --services-card-gap: 1.6rem;
+  --meta-border-colour: var(--color-accent);
+}
+```
+
+---
+
+## Footer bottom-alignment (row-of-cards use)
+
+`.footer` (the meta row + `actions` slot, grouped together) gets `margin-block-start: auto`
+and the root uses `grid-template-rows: auto 1fr`, so when `ServicesCardGrid`'s default
+`align-items: stretch` makes a card taller than its own content (to match a taller sibling in
+the same row), the extra height goes to `.footer`'s top margin instead of leaving whitespace
+below the actions slot. This keeps the meta row and actions/button aligned across a row of
+cards regardless of each card's description length, without needing CSS subgrid.
+
+`.services-card`, `.image-wrapper`, `.details-wrapper`, and `.footer` all set
+`min-inline-size: 0`. Without it, an unbreakable child — most commonly a long `actions` slot
+button label, since `InputButtonCore`'s `.button-text` is `white-space: nowrap` with no
+ellipsis — forces its content's min-content width up through the flex/grid chain and widens
+that one card's grid column in `ServicesCardGrid` wider than its siblings. If a card/column
+ever looks wider than the rest with content cut off at the edge, check for a long unbreakable
+string in a slot before assuming it's an image sizing issue — the image is just riding along
+on the widened column, not the cause.
+
+---
+
+## Notes
+
+- `--details-wrapper-grid-gap` (details-wrapper's own children) and `--footer-wrapper-grid-gap`
+  (the meta row ↔ actions slot gap inside `.footer`) are separate tokens — overriding one does
+  not affect the other.
+- `.meta`'s internal gap (between the duration and price text) is a fixed `1rem`, not a token.
+- Root element tag, `href`/`external` (whole-card-clickable), `eyebrowConfig`, and `heroConfig`
+  are props, not CSS — see the component skill doc.

package/app/components/03.organisms/services/services-card/ServicesCard.vue

@@ -1,23 +1,44 @@
 <template>
-  <component :is="tag" class="services-card" :class="[elementClasses]">
+  <component
+    :is="resolvedTag"
+    :href="isClickable ? props.href : undefined"
+    class="services-card"
+    :class="[elementClasses, { 'is-clickable': isClickable }]"
+  >
     <div class="image-wrapper">
       <NuxtImg :src="serviceData.image" :alt="serviceData.title" loading="lazy" class="image" />
     </div>
-    <EyebrowText :font-size="eyebrowConfig.fontSize ?? 'large'" :tag="eyebrowConfig.tag ?? 'div'" :text-content="serviceData.subtitle" />
-    <HeroText
-      :tag="heroConfig.tag ?? 'h2'"
-      :font-size="heroConfig.fontSize ?? 'heading'"
-      :text-content="[
-        {
-          text: serviceData.title,
-          styleClass: 'normal',
-        },
-      ]"
-    />
-    <div class="description">
-      {{ serviceData.shortDescription }}
+    <div class="details-wrapper">
+      <EyebrowText
+        :font-size="eyebrowConfig.fontSize ?? 'large'"
+        :tag="eyebrowConfig.tag ?? 'div'"
+        :text-content="serviceData.subtitle"
+      />
+      <HeroText
+        :tag="heroConfig.tag ?? 'h2'"
+        :font-size="heroConfig.fontSize ?? 'heading'"
+        :text-content="[
+          {
+            text: serviceData.title,
+            styleClass: 'normal',
+          },
+        ]"
+      />
+      <div class="description">
+        {{ serviceData.shortDescription }}
+      </div>
+      <div v-if="hasFooter" class="footer">
+        <div v-if="hasMeta" class="meta">
+          <div class="meta-duration">
+            <slot name="duration" :service-data="serviceData">{{ durationText }}</slot>
+          </div>
+          <div class="meta-price">
+            <slot name="price" :service-data="serviceData">{{ priceText }}</slot>
+          </div>
+        </div>
+        <slot name="actions" :service-data="serviceData"></slot>
+      </div>
     </div>
-    <slot name="actions" :service-data="serviceData"></slot>
   </component>
 </template>
 
@@ -37,18 +58,53 @@ interface HeroConfig {
 interface Props {
   tag?: "div" | "section" | "article";
   serviceData: Service;
+  href?: string;
+  /**
+   * Force a real browser navigation instead of client-side routing, even for a same-origin
+   * href starting with "/". See InputButtonCore's `external` prop for the full rationale.
+   */
+  external?: boolean;
   eyebrowConfig?: EyebrowConfig;
   heroConfig?: HeroConfig;
+  /** Overrides serviceData.duration. Ignored if the `duration` slot is used. */
+  durationText?: string;
+  /** Overrides serviceData.price. Ignored if the `price` slot is used. */
+  priceText?: string;
   styleClassPassthrough?: string | string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   tag: "div",
+  href: undefined,
+  external: false,
   eyebrowConfig: () => ({}),
   heroConfig: () => ({}),
+  durationText: undefined,
+  priceText: undefined,
   styleClassPassthrough: () => [],
 });
 
+const slots = useSlots();
+const NuxtLink = resolveComponent("NuxtLink");
+
+const durationText = computed(() => props.durationText ?? props.serviceData.duration);
+const priceText = computed(() => props.priceText ?? props.serviceData.price);
+const hasMeta = computed(() => Boolean(slots.duration || slots.price || durationText.value || priceText.value));
+// Groups the meta row and actions slot so they can be pushed to the bottom of the card as
+// one unit — keeps them aligned across a row of cards in ServicesCardGrid regardless of how
+// long each card's description is, without needing per-row CSS subgrid across components.
+const hasFooter = computed(() => Boolean(hasMeta.value || slots.actions));
+
+// Whole card is clickable only when there's no actions slot to hold its own interactive
+// content (which would otherwise end up nested inside the card's own anchor) and an href is set
+const isClickable = computed(() => Boolean(!slots.actions && props.href));
+const isInternalLink = computed(() => isClickable.value && props.href!.startsWith("/") && !props.external);
+const resolvedTag = computed(() => {
+  if (!isClickable.value) return props.tag;
+  if (isInternalLink.value) return NuxtLink;
+  return "a";
+});
+
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(
@@ -62,19 +118,44 @@ watch(
 <style lang="css">
 @layer components {
   .services-card {
-    /* Consumer definable css tokens */
-    --_eyebrow-text-margin-block: 0.8rem 0;
-    --_hero-text-margin-block: 2rem 1rem;
-    --_description-text-colour: var(--colour-text-secondary);
-
     display: grid;
-    grid-template-rows: auto auto auto 5lh auto;
-    gap: 1rem;
+    grid-template-rows: auto 1fr;
+    gap: var(--services-card-gap, 1rem);
+    min-inline-size: 0;
+
+    border-radius: var(--services-card-border-radius, 0);
+    border: var(--services-card-border-width, 1px) solid var(--services-card-border-colour, transparent);
+    outline: var(--services-card-outline-width, 2px) solid var(--services-card-outline-colour, transparent);
+    outline-offset: var(--services-card-outline-offset, 0px);
+    overflow: hidden;
+
+    transition:
+      border-color 0.3s ease-in-out,
+      outline-color 0.3s ease-in-out,
+      outline-offset 0.3s ease-in-out;
+
+    &.is-clickable {
+      color: inherit;
+      text-decoration: none;
+      cursor: pointer;
+
+      &:hover,
+      &:focus-visible {
+        /* Falls back to the resting border colour (not transparent) so setting only
+           --services-card-border-colour doesn't make the border vanish on hover/focus. */
+        border-color: var(--services-card-border-colour-hover, var(--services-card-border-colour, transparent));
+        outline-color: var(--services-card-outline-colour-hover, transparent);
+        outline-offset: var(--services-card-outline-offset-hover, 0px);
+      }
+    }
 
     .image-wrapper {
-      aspect-ratio: 3/4;
-      border-radius: 8px;
+      aspect-ratio: var(--image-wrapper-aspect-ratio, 3/4);
+      border-radius: var(--image-wrapper-border-radius, 8px);
       overflow: hidden;
+      min-inline-size: 0;
+      padding-block: var(--image-wrapper-padding-block, 0 0);
+      padding-inline: var(--image-wrapper-padding-inline, 0 0);
 
       .image {
         display: block;
@@ -84,28 +165,61 @@ watch(
         transition: transform 0.3s ease-in-out;
 
         &:hover {
-          transform: scale(1.1);
+          transform: var(--image-wrapper-border-image-zoom-transform, scale(1.05));
         }
       }
     }
 
-    .eyebrow-text {
-      margin-block: var(--_eyebrow-text-margin-block);
-    }
+    .details-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: var(--details-wrapper-grid-gap, 1rem);
+      min-inline-size: 0;
 
-    .hero-text {
-      margin-block: var(--_hero-text-margin-block);
-    }
+      padding-block: var(--details-wrapper-padding-block, 0);
+      padding-inline: var(--details-wrapper-padding-inline, 0);
 
-    .description {
-      color: var(--_description-text-colour);
+      .eyebrow-text {
+        padding-block: var(--eyebrow-text-padding-block, 0.8rem 0);
+      }
 
-      /* display: -webkit-box;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    text-overflow: ellipsis; */
+      .hero-text {
+        padding-block: var(--hero-text-padding-block, 2rem 1rem);
+      }
+
+      .description {
+        color: var(--description-text-colour, var(--colour-text-secondary));
+        line-height: var(--description-line-height, 1.4);
+        padding-block: var(--description-padding-block, 0 0);
+
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        -webkit-line-clamp: var(--description-line-clamp, 100);
+        line-clamp: var(--description-line-clamp, 100);
+        text-overflow: ellipsis;
+      }
+
+      .footer {
+        display: flex;
+        flex-direction: column;
+        gap: var(--footer-wrapper-grid-gap, 1rem);
+        margin-block-start: auto;
+        min-inline-size: 0;
+        padding-block: var(--footer-padding-block, 0);
+      }
+
+      .meta {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1rem;
+        padding-block: var(--meta-padding-block, 1.6rem 0);
+        border-block-start: 1px solid var(--meta-border-colour, var(--theme-border));
+        color: var(--meta-text-colour, inherit);
+        font-size: var(--meta-font-size, 1.4rem);
+        text-transform: var(--meta-text-transform, uppercase);
+      }
     }
   }
 }

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

@@ -19,6 +19,22 @@ const meta: Meta<typeof ServicesCard> = {
       control: "object",
       description: "Override hero tag and fontSize — omit keys to use defaults",
     },
+    href: {
+      control: "text",
+      description: "When set and no actions slot is provided, the whole card becomes a link",
+    },
+    external: {
+      control: "boolean",
+      description: "Force a plain <a> instead of NuxtLink for an internal-looking href",
+    },
+    durationText: {
+      control: "text",
+      description: "Overrides serviceData.duration in the meta row",
+    },
+    priceText: {
+      control: "text",
+      description: "Overrides serviceData.price in the meta row",
+    },
     styleClassPassthrough: {
       control: "object",
       description: "Additional CSS classes applied to the root element",
@@ -31,6 +47,12 @@ const meta: Meta<typeof ServicesCard> = {
     styleClassPassthrough: [],
   },
   parameters: {
+    backgrounds: {
+      default: "storybook-canvas",
+      options: {
+        "storybook-canvas": { name: "Canvas", value: "oklch(0.163 0.005 17)" },
+      },
+    },
     docs: {
       description: {
         component:
@@ -66,6 +88,26 @@ const sampleService: Service = {
   seoDescription: "Professional locs installation service.",
 };
 
+const balayageService: Service = {
+  slug: "balayage",
+  category: "hair",
+  title: "Balayage",
+  subtitle: "Freehand Colour Artistry",
+  price: "From £95",
+  duration: "2.5 - 3.5 hours",
+  image: "https://picsum.photos/seed/balayage-card/600/800",
+  shortDescription: "Colour swept on by hand, bespoke to your hair's natural fall and texture.",
+  longDescription: "Full description not used in card view.",
+  heroHeading: [{ text: "Why choose balayage?", styleClass: "normal" }],
+  whatIsIt: "A freehand colour technique for a natural, sun-kissed result.",
+  process: ["Consultation", "Freehand application", "Toner", "Finish & style"],
+  idealFor: ["Low-maintenance colour", "Natural-looking dimension"],
+  maintenance: "Refresh every 3–4 months.",
+  faqs: [{ question: "Does balayage damage hair?", answer: "No more than any other lightening service when done correctly." }],
+  seoTitle: "Balayage",
+  seoDescription: "Freehand balayage colour service.",
+};
+
 // ─── Stories ──────────────────────────────────────────────────────────────────
 
 export const WithActions: Story = {
@@ -192,3 +234,26 @@ export const AsArticle: Story = {
     },
   },
 };
+
+export const DesignReplica: Story = {
+  name: "Design Replica — Dark Card With Meta Row",
+  render: (args) => ({
+    components: { ServicesCard },
+    setup() {
+      return { args, balayageService };
+    },
+    template: `
+      <div style="color-scheme:dark; background:#141414; max-width:360px; padding:2.4rem;">
+        <ServicesCard v-bind="args" :service-data="balayageService" />
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Reproduces the reference design: dark background, no actions slot, and the duration/price meta row sourced from serviceData.duration/serviceData.price (uppercased via CSS).",
+      },
+    },
+  },
+};

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

@@ -108,6 +108,44 @@ describe("ServicesCard", () => {
     expect(wrapper.find(".image-wrapper img").attributes("loading")).toBe("lazy");
   });
 
+  // ─── Meta row (duration / price) ───────────────────────────────────────
+
+  it("renders serviceData.duration and serviceData.price by default", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.find(".meta-duration").text()).toBe(mockService.duration);
+    expect(wrapper.find(".meta-price").text()).toBe(mockService.price);
+  });
+
+  it("overrides duration/price text with durationText/priceText props", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService, durationText: "1 hour", priceText: "£75" },
+    });
+    expect(wrapper.find(".meta-duration").text()).toBe("1 hour");
+    expect(wrapper.find(".meta-price").text()).toBe("£75");
+  });
+
+  it("overrides duration/price content with duration/price slots", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService },
+      slots: {
+        duration: '<span class="custom-duration">Quick</span>',
+        price: '<span class="custom-price">Free</span>',
+      },
+    });
+    expect(wrapper.find(".custom-duration").text()).toBe("Quick");
+    expect(wrapper.find(".custom-price").text()).toBe("Free");
+  });
+
+  it("hides the meta row when there is no duration, price, or slot content", async () => {
+    const serviceWithoutMeta: Service = { ...mockService, duration: "", price: "" };
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: serviceWithoutMeta },
+    });
+    expect(wrapper.find(".meta").exists()).toBe(false);
+  });
+
   // ─── Actions slot ───────────────────────────────────────────────────────
 
   it("renders the actions slot", async () => {
@@ -128,6 +166,50 @@ describe("ServicesCard", () => {
     expect(wrapper.vm).toBeTruthy();
   });
 
+  // ─── Whole-card clickable (href, no actions slot) ──────────────────────
+
+  it("stays as the tag prop when href is not set", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.element.tagName).toBe("DIV");
+    expect(wrapper.attributes("href")).toBeUndefined();
+  });
+
+  it("stays as the tag prop when href is set but an actions slot is provided", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService, href: "/services/test-service" },
+      slots: { actions: '<button class="test-cta">Book now</button>' },
+    });
+    expect(wrapper.element.tagName).toBe("DIV");
+    expect(wrapper.attributes("href")).toBeUndefined();
+  });
+
+  it("renders as an anchor with href when href is set and no actions slot is provided", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService, href: "https://example.com/book" },
+    });
+    expect(wrapper.element.tagName).toBe("A");
+    expect(wrapper.attributes("href")).toBe("https://example.com/book");
+    expect(wrapper.classes()).toContain("is-clickable");
+  });
+
+  it("renders as NuxtLink for an internal href", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService, href: "/services/test-service" },
+    });
+    expect(wrapper.element.tagName).toBe("A");
+    expect(wrapper.attributes("href")).toBe("/services/test-service");
+  });
+
+  it("renders as a plain anchor for an internal href when external is true", async () => {
+    const wrapper = await mountSuspended(ServicesCard, {
+      props: { serviceData: mockService, href: "/api/auth/github", external: true },
+    });
+    expect(wrapper.element.tagName).toBe("A");
+    expect(wrapper.attributes("href")).toBe("/api/auth/github");
+  });
+
   // ─── eyebrowConfig ──────────────────────────────────────────────────────
 
   it("uses default eyebrow fontSize of large", async () => {

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

@@ -3,10 +3,18 @@
 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 class="details-wrapper">
+    <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 class="footer">
+      <div class="meta">
+        <div class="meta-duration">60 mins</div>
+        <div class="meta-price">£50</div>
+      </div>
+    </div>
+  </div>
 </div>"
 `;

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

@@ -50,7 +50,7 @@ const props = withDefaults(defineProps<Props>(), {
   tag: "div",
   eyebrowConfig: () => ({}),
   heroConfig: () => ({}),
-  hrefBase: "/ui/services/services-section/",
+  hrefBase: "/services/",
   buttonTextPrefix: "Enquire about",
   styleClassPassthrough: () => [],
 });
@@ -68,13 +68,9 @@ watch(
 <style lang="css">
 @layer components {
   .services-card-grid {
-    /* Consumer definable css tokens */
-    --_gap: 4rem;
-    --_column-min-width: 250px;
-
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(var(--_column-min-width), 1fr));
-    gap: var(--_gap);
+    grid-template-columns: repeat(auto-fit, minmax(var(--services-card-grid-column-min-width, 250px), 1fr));
+    gap: var(--services-card-grid-gap, 4rem);
   }
 }
 </style>