@eox/pages-theme-eox 1.1.2 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [1.2.1](https://gitlab.eox.at/eox/hub/eoxhub-portal/compare/v1.2.0...v1.2.1) (2026-03-23)
+
+### Bug Fixes
+
+- add `logo.target` prop to LogoSection ([8b664b4](https://gitlab.eox.at/eox/hub/eoxhub-portal/commit/8b664b4f981a200d6bf28ea53999035850698a49))
+
+## [1.2.0](https://gitlab.eox.at/eox/hub/eoxhub-portal/compare/v1.1.2...v1.2.0) (2026-03-19)
+
+### Features
+
+- introduce FeatureCards variants ([#10](https://gitlab.eox.at/eox/hub/eoxhub-portal/pages-theme-eox/-/merge_requests/10))
+
+### Miscellaneous chores
+
+- update @eox/ui and add required adjustments ([3dae8d2d](https://gitlab.eox.at/eox/hub/eoxhub-portal/pages-theme-eox/-/commit/3dae8d2d2d2619667e8334c91d492def4981421b))
+
 ## [1.1.2](https://gitlab.eox.at/eox/hub/eoxhub-portal/compare/v1.1.1...v1.1.2) (2026-03-16)
 
 ### Bug Fixes

package/README.md

@@ -238,7 +238,12 @@ Displays a grid of client or partner logos. It automatically handles logo sizing
 ```html
 <LogoSection
   :logos="[
-    { image: '/logos/client1.png', alt: 'Client 1', link: 'https://client1.com' },
+    {
+      image: '/logos/client1.png',
+      alt: 'Client 1',
+      link: 'https://client1.com',
+      target: '_blank'
+    },
     { image: '/logos/client2.png', alt: 'Client 2' }
   ]"
   base-height="4"
@@ -270,22 +275,97 @@ An interactive table with expandable rows. The `summary` object keys must match
 
 A grid layout for feature cards. Automatically used on pages under `features/`, but can be used manually with custom cards.
 
+##### Gallery Props
+
+| Prop             | Type              | Default                         | Description                                                                                                                                                        |
+| :--------------- | :---------------- | :------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `sectionTitle`   | `String\|Boolean` | `"More {site.title} features:"` | Title displayed above the grid. Set to `false` to hide it.                                                                                                         |
+| `variant`        | `String`          | `"default"`                     | Card variant to use. Supported values: `"default"`, `"poster"`.                                                                                                    |
+| `columns`        | `String\|Number`  | `"4/2/1"`                       | Number of columns at large/medium/small breakpoints in `"L/M/S"` format, e.g. `"3/2/1"`. A single number applies to large only (medium defaults to 2, small to 1). |
+| `cards`          | `Array`           | —                               | Array of card objects (see **Card Properties** below). Falls back to auto-collected `<FeatureSection>` data if omitted.                                            |
+| `background`     | `String`          | `"primary primary-gradient-bg"` | CSS class(es) applied to the section background.                                                                                                                   |
+| `cardBackground` | `String`          | `"surface-container-low"`       | CSS class(es) applied to each card.                                                                                                                                |
+
+##### Card Properties
+
+Each object in the `cards` array supports the following properties:
+
+| Property        | Type                                | Required | Description                                                                                                                 |
+| :-------------- | :---------------------------------- | :------- | :-------------------------------------------------------------------------------------------------------------------------- |
+| `id`            | `String\|Number`                    | ✅       | Unique identifier for the card.                                                                                             |
+| `title`         | `String`                            | ✅       | Card heading text.                                                                                                          |
+| `content`       | `String`                            | ✅       | Card body text (supports HTML).                                                                                             |
+| `icon`          | `String\|{ html, width?, height? }` | —        | Icon to display. Use an `mdi-*` class string for Material Design icons, or an object with `html` for custom SVG/HTML icons. |
+| `image`         | `String`                            | —        | URL of an image. Used as a fallback icon in the `default` variant, and as a background in the `poster` variant.             |
+| `chips`         | `{ text, class? }[]`                | —        | Array of chip/badge objects rendered above the title.                                                                       |
+| `metadata`      | `{ text, icon? }[]`                 | —        | Array of metadata items (e.g. date, author) rendered with an optional `mdi-*` icon.                                         |
+| `link`          | `{ text, href, target? }`           | —        | Primary call-to-action link. `target` defaults to `_blank`.                                                                 |
+| `secondaryLink` | `{ text, href, target? }`           | —        | Secondary link rendered alongside the primary link. `target` defaults to `_blank`.                                          |
+
+##### Card Variants
+
+###### `default` (default)
+
+A standard content card with an icon or image, title, optional chips, metadata, body text and links.
+
 ```html
 <FeaturesGallery
   section-title="All Features"
+  variant="default"
+  columns="3/2/1"
   background="surface-container-low"
   :cards="[
     {
       id: 1,
       title: 'Global Coverage',
-      content: 'Access data from anywhere.',
-      icon: 'mdi-earth'
+      content: 'Access satellite data from anywhere on the globe.',
+      icon: 'mdi-earth',
+      chips: [{ text: 'New', class: 'primary' }],
+      metadata: [{ text: '2024-01-15', icon: 'mdi-calendar' }],
+      link: { text: 'Learn more', href: '/coverage' },
+      secondaryLink: { text: 'API docs', href: '/api', target: '_self' }
     },
     {
       id: 2,
-      title: 'Real-time',
-      content: 'Updates as they happen.',
+      title: 'Real-time Updates',
+      content: 'Data refreshed as events happen.',
+      icon: { html: '<img src=\"/icons/realtime.svg\" alt=\"\" />', width: 48, height: 48 },
       link: { text: 'Learn more', href: '/real-time' }
+    },
+    {
+      id: 3,
+      title: 'Archive Access',
+      content: 'Query decades of historical imagery.',
+      image: '/images/archive-thumb.png',
+      link: { text: 'Explore', href: '/archive' }
+    }
+  ]"
+/>
+```
+
+###### `poster`
+
+An image-overlay card where a background image fills the card and text is rendered on top with a dark gradient. Adds one extra prop:
+
+| Prop        | Type     | Default   | Description                            |
+| :---------- | :------- | :-------- | :------------------------------------- |
+| `minHeight` | `String` | `"20rem"` | Minimum CSS height of the poster card. |
+
+```html
+<FeaturesGallery
+  section-title="Case Studies"
+  variant="poster"
+  columns="3/2/1"
+  :cards="[
+    {
+      id: 1,
+      title: 'Arctic Monitoring',
+      content: 'Year-round ice extent tracking.',
+      image: '/images/arctic.jpg',
+      chips: [{ text: 'Featured' }],
+      metadata: [{ text: 'Jan 2024', icon: 'mdi-calendar' }],
+      link: { text: 'Read case study', href: '/arctic' },
+      secondaryLink: { text: 'Dataset', href: '/datasets/arctic' }
     }
   ]"
 />

package/cypress/support/mocks/features.data.js

@@ -1,6 +1,7 @@
 export const data = [
   {
     id: 1,
+    url: "/features/mock-feature-1",
     title: "Mock Feature 1",
     content: "Content 1",
     html: "<featuresection><h1>Mock Feature 1</h1><p>Content 1</p></featuresection>",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eox/pages-theme-eox",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "type": "module",
   "description": "Vitepress Theme with EOX branding",
   "main": "src/index.js",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@eox/eslint-config": "^2.0.0",
-    "@eox/ui": "^0.3.7",
+    "@eox/ui": "^1.0.1",
     "vitepress": "^1.6.3"
   },
   "devDependencies": {

package/src/components/FeatureCard/Index.cy.js

@@ -0,0 +1,156 @@
+import FeatureCard from "./Index.vue";
+
+describe("<FeatureCard />", () => {
+  const baseProps = {
+    title: "Test Feature",
+    content: "This is a test feature content.",
+  };
+
+  it("renders title and content using props", () => {
+    cy.mount(FeatureCard, {
+      props: baseProps,
+    });
+
+    cy.get("h5").should("contain", baseProps.title);
+    cy.contains(baseProps.content).should("exist");
+    cy.get("article").should("have.class", "vertical");
+    cy.get("article").should("have.class", "large-padding");
+  });
+
+  it("renders content in a paragraph when using slots", () => {
+    const slotContent = "This is content from a slot.";
+
+    cy.mount(FeatureCard, {
+      props: {
+        ...baseProps,
+        content: "Fallback content",
+      },
+      slots: {
+        default: slotContent,
+      },
+    });
+
+    cy.get("h5").should("contain", baseProps.title);
+    cy.get("p").should("contain", slotContent);
+    cy.contains("Fallback content").should("not.exist");
+  });
+
+  it("renders primary link with explicit target", () => {
+    const link = {
+      text: "Learn More",
+      href: "https://example.com",
+      target: "_blank",
+    };
+
+    cy.mount(FeatureCard, {
+      props: {
+        ...baseProps,
+        link,
+      },
+    });
+
+    cy.get("nav").should("exist");
+    cy.contains("a", "Learn More")
+      .should("have.attr", "href", "https://example.com")
+      .and("have.attr", "target", "_blank");
+    cy.get(".arrow").should("exist");
+  });
+
+  it("defaults primary link target to _blank", () => {
+    cy.mount(FeatureCard, {
+      props: {
+        ...baseProps,
+        link: {
+          text: "Read",
+          href: "/docs",
+        },
+      },
+    });
+
+    cy.contains("a", "Read")
+      .should("have.attr", "target", "_blank")
+      .and("have.attr", "href", "/docs");
+  });
+
+  it("renders secondary link and nav layout when provided", () => {
+    cy.mount(FeatureCard, {
+      props: {
+        ...baseProps,
+        secondaryLink: {
+          text: "Docs",
+          href: "/docs",
+          target: "_self",
+        },
+      },
+    });
+
+    cy.get("nav").should("exist");
+    cy.get(".secondary-link")
+      .should("contain", "Docs")
+      .and("have.attr", "href", "/docs")
+      .and("have.attr", "target", "_self");
+  });
+
+  it("renders icon from class string", () => {
+    cy.mount(FeatureCard, {
+      props: {
+        ...baseProps,
+        icon: "mdi-home",
+      },
+    });
+
+    cy.get("i.mdi.mdi-home").should("exist");
+  });
+
+  it("renders html icon", () => {
+    const iconHtml = '<svg><circle cx="50" cy="50" r="40" /></svg>';
+    cy.mount(FeatureCard, {
+      props: {
+        ...baseProps,
+        icon: { html: iconHtml },
+      },
+    });
+
+    cy.get(".icon").should("exist");
+    cy.get(".icon").find("svg").should("exist");
+  });
+
+  it("renders image fallback when no icon is provided", () => {
+    cy.mount(FeatureCard, {
+      props: {
+        ...baseProps,
+        image: "/feature.png",
+      },
+    });
+
+    cy.get("img.icon").should("have.attr", "src", "/feature.png");
+  });
+
+  it("renders chips and metadata", () => {
+    cy.mount(FeatureCard, {
+      props: {
+        ...baseProps,
+        chips: [{ text: "New", class: "primary" }, { text: "Popular" }],
+        metadata: [
+          { text: "5 min read", icon: "mdi-clock-outline" },
+          { text: "Updated weekly" },
+        ],
+      },
+    });
+
+    cy.get(".small-chip").should("have.length", 2);
+    cy.contains(".small-chip", "New").should("have.class", "primary");
+    cy.contains(".small-chip", "Popular").should("exist");
+    cy.get(".metadata-item").should("have.length", 2);
+    cy.get(".metadata-item .mdi-clock-outline").should("exist");
+    cy.contains("Updated weekly").should("exist");
+  });
+
+  it("does not render nav when no links are provided", () => {
+    cy.mount(FeatureCard, {
+      props: baseProps,
+    });
+
+    cy.get("nav").should("not.exist");
+  });
+});

package/src/components/FeatureCard/Index.vue

@@ -0,0 +1,163 @@
+<script setup>
+const { title, content, link, secondaryLink, icon } = defineProps({
+  title: String,
+  content: String,
+  image: {
+    type: String,
+    required: false,
+  },
+  chips: {
+    /** @type {import('vue').PropType<{ text: string; class?: string }[]>} */
+    type: Array,
+    required: false,
+    default: () => [],
+  },
+  metadata: {
+    /** @type {import('vue').PropType<{ text: string; icon?: string }[]>} */
+    type: Array,
+    required: false,
+    default: () => [],
+  },
+  link: {
+    /** @type {import('vue').PropType<{ text:string ,href: string,target?: string }>} */
+    type: Object,
+    required: false,
+  },
+  secondaryLink: {
+    /** @type {import('vue').PropType<{ text:string ,href: string,target?: string }>} */
+    type: Object,
+    required: false,
+  },
+  icon: {
+    /** @type {import('vue').PropType<{ html: string, width?: number, height?: number }>} */
+    type: Object,
+    required: false,
+  },
+});
+const iconStyle = {
+  width: (icon?.width ?? 40) + "px",
+  height: (icon?.height ?? 40) + "px",
+};
+</script>
+<template>
+  <article class="vertical large-padding">
+    <div>
+      <i
+        v-if="typeof icon === 'string' && icon.startsWith('mdi-')"
+        :class="`mdi ${icon}`"
+      ></i>
+      <div
+        v-else-if="icon"
+        :style="iconStyle"
+        v-html="icon.html"
+        class="icon"
+      ></div>
+      <img v-else-if="image" :src="image" alt="" class="icon" />
+      <h5 class="small">{{ title }}</h5>
+      <div
+        v-if="chips && chips.length"
+        class="row wrap"
+        style="gap: 0.5rem; margin-bottom: 0.5rem"
+      >
+        <span
+          v-for="chip in chips"
+          :key="chip.text"
+          class="chip small-chip border"
+          :class="chip.class"
+        >
+          {{ chip.text }}
+        </span>
+      </div>
+      <p v-if="metadata && metadata.length" class="small-text">
+        <span
+          v-for="(item, index) in metadata"
+          :key="index"
+          class="metadata-item"
+        >
+          <i
+            v-if="item.icon"
+            :class="`small mdi ${item.icon}`"
+            style="transform: translateY(-1px)"
+          ></i>
+          {{ item.text }}
+          <br v-if="index < metadata.length - 1" />
+        </span>
+      </p>
+
+      <p v-if="$slots.default">
+        <slot>{{ content }}</slot>
+      </p>
+      <div v-else v-html="content"></div>
+    </div>
+    <nav
+      v-if="link || secondaryLink"
+      class="row wrap align-center"
+      style="gap: 1.5rem; margin-right: auto"
+    >
+      <a
+        v-if="link"
+        :href="link.href"
+        :target="link.target ?? '_blank'"
+        class="button transparent bold primary-text no-padding"
+      >
+        <span>
+          {{ link.text }}
+        </span>
+        <i class="mdi mdi-chevron-right arrow"></i>
+      </a>
+      <a
+        v-if="secondaryLink"
+        :href="secondaryLink.href"
+        :target="secondaryLink.target ?? '_blank'"
+        class="button transparent primary-text no-padding secondary-link"
+      >
+        <span>
+          {{ secondaryLink.text }}
+        </span>
+      </a>
+    </nav>
+  </article>
+</template>
+<style scoped>
+/**
+* Undo Vitepress missing with @eox/ui styles
+*/
+.VPHome .vp-doc a.button.bold {
+  font-weight: bold;
+}
+.secondary-link {
+  font-weight: normal;
+  opacity: 0.8;
+}
+.secondary-link:hover {
+  opacity: 1;
+}
+.VPHome .vp-doc h5.small {
+  font-size: 1.25rem;
+}
+
+/**
+ * Custom styles
+ */
+article {
+  justify-content: space-between;
+  transition: all 0.3s ease-in-out;
+  width: 100%;
+}
+.small-chip {
+  font-size: 0.75rem;
+  padding: 0.125rem 0.375rem;
+  height: auto;
+  line-height: normal;
+  margin: 0;
+}
+.arrow {
+  transition: transform 0.2s;
+}
+.button:hover .arrow {
+  transform: translateX(4px);
+}
+.button.transparent:hover:after {
+  background: none;
+}
+</style>

package/src/components/FeatureCard/Poster.cy.js

@@ -0,0 +1,137 @@
+import PosterCard from "./Poster.vue";
+
+describe("<FeatureCard Poster />", () => {
+  const baseProps = {
+    title: "Poster Feature",
+    content: "Poster content",
+  };
+
+  it("renders title and content using props", () => {
+    cy.mount(PosterCard, {
+      props: baseProps,
+    });
+
+    cy.get("article.image-overlay-card").should("exist");
+    cy.get("h5").should("contain", baseProps.title);
+    cy.contains(baseProps.content).should("exist");
+    cy.get(".image-overlay-card-overlay").should("exist");
+    cy.get(".image-overlay-card-content").should("exist");
+  });
+
+  it("renders slot content over content prop when slot exists", () => {
+    const slotContent = "This is content from a slot.";
+
+    cy.mount(PosterCard, {
+      props: {
+        ...baseProps,
+        content: "Fallback content",
+      },
+      slots: {
+        default: slotContent,
+      },
+    });
+
+    cy.get("p").should("contain", slotContent);
+    cy.contains("Fallback content").should("not.exist");
+  });
+
+  it("renders poster image when image prop is set", () => {
+    cy.mount(PosterCard, {
+      props: {
+        ...baseProps,
+        image: "/poster.png",
+      },
+    });
+
+    cy.get("img.image-overlay-card-image").should(
+      "have.attr",
+      "src",
+      "/poster.png",
+    );
+  });
+
+  it("applies custom minHeight", () => {
+    cy.mount(PosterCard, {
+      props: {
+        ...baseProps,
+        minHeight: "28rem",
+      },
+    });
+
+    cy.get("article.image-overlay-card")
+      .should("have.attr", "style")
+      .and("include", "min-height: 28rem");
+  });
+
+  it("renders primary and secondary links with targets", () => {
+    const link = {
+      text: "Learn More",
+      href: "https://example.com",
+      target: "_blank",
+    };
+
+    const secondaryLink = {
+      text: "Docs",
+      href: "/docs",
+      target: "_self",
+    };
+
+    cy.mount(PosterCard, {
+      props: {
+        ...baseProps,
+        link,
+        secondaryLink,
+      },
+    });
+
+    cy.get("nav").should("exist");
+    cy.contains("a", "Learn More")
+      .should("have.attr", "href", "https://example.com")
+      .and("have.attr", "target", "_blank");
+    cy.contains("a", "Docs")
+      .should("have.attr", "href", "/docs")
+      .and("have.attr", "target", "_self");
+  });
+
+  it("defaults link target to _blank when omitted", () => {
+    cy.mount(PosterCard, {
+      props: {
+        ...baseProps,
+        link: {
+          text: "Read",
+          href: "/read",
+        },
+      },
+    });
+
+    cy.contains("a", "Read")
+      .should("have.attr", "href", "/read")
+      .and("have.attr", "target", "_blank");
+  });
+
+  it("renders chips and metadata", () => {
+    cy.mount(PosterCard, {
+      props: {
+        ...baseProps,
+        chips: [{ text: "Launch" }, { text: "EOX", class: "primary" }],
+        metadata: [
+          { text: "10 min", icon: "mdi-clock-outline" },
+          { text: "Advanced" },
+        ],
+      },
+    });
+
+    cy.get(".small-chip").should("have.length", 2);
+    cy.contains(".small-chip", "EOX").should("have.class", "primary");
+    cy.get(".metadata-item").should("have.length", 2);
+    cy.get(".metadata-item .mdi-clock-outline").should("exist");
+  });
+
+  it("does not render nav when links are not provided", () => {
+    cy.mount(PosterCard, {
+      props: baseProps,
+    });
+
+    cy.get("nav").should("not.exist");
+  });
+});

package/src/components/FeatureCard/Poster.vue

@@ -0,0 +1,172 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  title: String,
+  content: String,
+  link: {
+    /** @type {import('vue').PropType<{ text:string ,href: string,target?: string }>} */
+    type: Object,
+    required: false,
+  },
+  icon: {
+    /** @type {import('vue').PropType<string | { html: string, width?: number, height?: number }>} */
+    type: [String, Object],
+    required: false,
+  },
+  image: {
+    type: String,
+    required: false,
+  },
+  chips: {
+    /** @type {import('vue').PropType<{ text: string; class?: string }[]>} */
+    type: Array,
+    required: false,
+    default: () => [],
+  },
+  metadata: {
+    /** @type {import('vue').PropType<{ text: string; icon?: string }[]>} */
+    type: Array,
+    required: false,
+    default: () => [],
+  },
+  secondaryLink: {
+    /** @type {import('vue').PropType<{ text: string, href: string, target?: string }>} */
+    type: Object,
+    required: false,
+  },
+  minHeight: {
+    type: String,
+    default: "20rem",
+  },
+});
+
+const cardStyle = computed(() => ({
+  minHeight: props.minHeight,
+}));
+</script>
+
+<template>
+  <article
+    class="no-padding fill small-elevate image-overlay-card"
+    :style="cardStyle"
+  >
+    <img v-if="image" :src="image" alt="" class="image-overlay-card-image" />
+    <div class="image-overlay-card-overlay"></div>
+    <div class="image-overlay-card-content padding">
+      <div style="padding-top: 3rem">
+        <div
+          v-if="chips && chips.length"
+          class="row wrap absolute top"
+          style="gap: 0.5rem; margin-top: 1.5rem"
+        >
+          <span
+            v-for="chip in chips"
+            :key="chip.text"
+            class="chip small-chip border white-text"
+            :class="chip.class"
+          >
+            {{ chip.text }}
+          </span>
+        </div>
+        <h5 class="small white-text">{{ title }}</h5>
+        <p v-if="metadata && metadata.length" class="small-text white-text">
+          <span
+            v-for="(item, index) in metadata"
+            :key="index"
+            class="metadata-item"
+          >
+            <i
+              v-if="item.icon"
+              :class="`small mdi ${item.icon}`"
+              style="transform: translateY(-1px)"
+            ></i>
+            {{ item.text }}
+            <br v-if="index < metadata.length - 1" />
+          </span>
+        </p>
+        <p v-if="$slots.default" class="medium-text white-text">
+          <slot>{{ content }}</slot>
+        </p>
+        <p
+          v-else-if="content"
+          class="medium-text white-text"
+          v-html="content"
+        ></p>
+      </div>
+      <nav
+        v-if="link || secondaryLink"
+        class="row wrap align-center"
+        style="gap: 0.5rem"
+      >
+        <a
+          v-if="link"
+          class="button small white black-text"
+          :href="link.href"
+          :target="link.target ?? '_blank'"
+        >
+          {{ link.text }}
+        </a>
+        <a
+          v-if="secondaryLink"
+          class="button small border white-text secondary-link"
+          :href="secondaryLink.href"
+          :target="secondaryLink.target ?? '_blank'"
+        >
+          {{ secondaryLink.text }}
+        </a>
+      </nav>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.image-overlay-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
+  overflow: hidden;
+}
+
+.image-overlay-card-image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
+}
+
+.image-overlay-card-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.1) 0%,
+    rgba(0, 0, 0, 0.6) 40%,
+    rgba(0, 0, 0, 0.9) 100%
+  );
+  border-radius: inherit;
+  z-index: 1;
+}
+
+.image-overlay-card-content {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  flex: 1;
+}
+.small-chip {
+  font-size: 0.75rem;
+  padding: 0.125rem 0.375rem;
+  height: auto;
+  line-height: normal;
+  margin: 0;
+  pointer-events: none;
+}
+</style>

package/src/components/FeaturesGallery.cy.js

@@ -3,8 +3,23 @@ import { __setMockData } from "../../cypress/support/mocks/vitepress";
 
 describe("<FeaturesGallery />", () => {
   const cards = [
-    { id: 1, title: "Card 1", content: "Content 1", icon: "mdi-home" },
-    { id: 2, title: "Card 2", content: "Content 2" },
+    {
+      id: 1,
+      title: "Card 1",
+      content: "Content 1",
+      icon: "mdi-home",
+      chips: [{ text: "New", class: "primary" }],
+      metadata: [{ text: "5 min", icon: "mdi-clock-outline" }],
+      link: { text: "Read more", href: "/feature-1", target: "_self" },
+      secondaryLink: { text: "Docs", href: "/docs", target: "_self" },
+    },
+    {
+      id: 2,
+      title: "Card 2",
+      content: "Content 2",
+      image: "/image.png",
+      link: { href: "/card-2", target: "_self" },
+    },
   ];
 
   beforeEach(() => {
@@ -22,6 +37,17 @@ describe("<FeaturesGallery />", () => {
     cy.contains("h5", "My Gallery").should("be.visible");
   });
 
+  it("hides section title when sectionTitle is false", () => {
+    cy.mount(FeaturesGallery, {
+      props: {
+        cards,
+        sectionTitle: false,
+      },
+    });
+
+    cy.get(".holder > h5").should("not.exist");
+  });
+
   it("renders feature cards", () => {
     cy.mount(FeaturesGallery, {
       props: { cards },
@@ -30,16 +56,100 @@ describe("<FeaturesGallery />", () => {
     cy.contains("Card 1").should("exist");
     cy.contains("Content 1").should("exist");
     cy.contains("Card 2").should("exist");
+    cy.get(".card-wrapper").should("have.length", 2);
   });
 
-  it("applies background classes", () => {
+  it("applies background and card background classes", () => {
     cy.mount(FeaturesGallery, {
       props: {
         cards,
         background: "custom-bg-class",
+        cardBackground: "surface-container",
       },
     });
 
-    cy.get("section").should("have.class", "custom-bg-class");
+    cy.get("section")
+      .should("have.class", "custom-bg-class")
+      .and("have.class", "full-width");
+    cy.get(".card-wrapper article")
+      .first()
+      .should("have.class", "surface-container");
+  });
+
+  it("uses provided columns to set css variables", () => {
+    cy.mount(FeaturesGallery, {
+      props: {
+        cards: [cards[0]],
+        columns: "3/2/1",
+      },
+    });
+
+    cy.get(".cards-gallery")
+      .should("have.attr", "style")
+      .and("include", "--cols-l: 3")
+      .and("include", "--cols-m: 2")
+      .and("include", "--cols-s: 1");
+  });
+
+  it("wraps cards in anchor when link has no text", () => {
+    cy.mount(FeaturesGallery, {
+      props: {
+        cards: [cards[1]],
+      },
+    });
+
+    cy.get("a.link-card")
+      .should("have.attr", "href", "/card-2")
+      .and("have.attr", "target", "_self");
+    cy.get("a.link-card article").should("exist");
+  });
+
+  it("does not wrap card when link has text", () => {
+    cy.mount(FeaturesGallery, {
+      props: {
+        cards: [cards[0]],
+      },
+    });
+
+    cy.get("a.link-card").should("not.exist");
+    cy.contains("a", "Read more")
+      .should("have.attr", "href", "/feature-1")
+      .and("have.attr", "target", "_self");
+  });
+
+  it("renders poster variant when selected", () => {
+    cy.mount(FeaturesGallery, {
+      props: {
+        cards: [cards[0]],
+        variant: "poster",
+      },
+    });
+
+    cy.get("article.image-overlay-card").should("exist");
+  });
+
+  it("falls back to default variant for unknown variant", () => {
+    cy.mount(FeaturesGallery, {
+      props: {
+        cards: [cards[0]],
+        variant: "does-not-exist",
+      },
+    });
+
+    cy.get("article.image-overlay-card").should("not.exist");
+    cy.get("article.vertical.large-padding").should("exist");
+  });
+
+  it("renders cards from mocked features data when cards prop is missing", () => {
+    __setMockData({
+      page: {
+        relativePath: "index.md",
+      },
+    });
+
+    cy.mount(FeaturesGallery);
+
+    cy.get(".card-wrapper").should("have.length.at.least", 1);
+    cy.contains("Read more").should("exist");
   });
 });

package/src/components/FeaturesGallery.vue

@@ -1,11 +1,22 @@
 <script setup>
 import { useData, withBase } from "vitepress";
 import { data as features } from "../features.data.js";
-import FeatureCard from "./FeatureCard.vue";
+import FeatureCardDefault from "./FeatureCard/Index.vue";
+import { defineAsyncComponent, computed } from "vue";
 
-const { cards, sectionTitle, background } = defineProps({
+const { cards, sectionTitle, background, variant, columns } = defineProps({
   sectionTitle: {
-    type: String,
+    type: [String, Boolean],
+  },
+  variant: {
+    type: /** @type {import('vue').PropType<keyof typeof cardComponents>} */ (
+      String
+    ),
+    default: "default",
+  },
+  columns: {
+    type: [String, Number],
+    default: "4/2/1",
   },
   cards: {
     /** 
@@ -13,8 +24,12 @@ const { cards, sectionTitle, background } = defineProps({
             id: number | string,
             title: string,
             content: string,
-            link?: { text: string, href: string,target?: string },
-            icon?: string | {
+           image?: string,
+           chips?: { text: string; class?: string }[],
+           metadata?: { text: string; icon?: string }[],
+           link?: { text: string, href: string,target?: string },
+           secondaryLink?: { text: string, href: string,target?: string },
+           icon?: string | {
               html: string,
               width?: number,
               height?: number,
@@ -33,6 +48,19 @@ const { cards, sectionTitle, background } = defineProps({
   },
 });
 
+const cardComponents = {
+  default: FeatureCardDefault,
+  poster: defineAsyncComponent(() => import("./FeatureCard/Poster.vue")),
+};
+
+/** @param {keyof typeof cardComponents | undefined} variant */
+const resolveCardComponent = (variant) => {
+  if (!variant) {
+    return FeatureCardDefault;
+  }
+  return cardComponents[variant] || FeatureCardDefault;
+};
+
 const { page, site } = useData();
 
 const featuresExcerpts =
@@ -73,6 +101,19 @@ const siteTitle =
   sectionTitle !== false
     ? sectionTitle || `More ${site.value.title} features:`
     : false;
+
+const gridCols = computed(() => {
+  let colsStr = String(columns || "4/2/1");
+  if (!colsStr.includes("/")) {
+    colsStr = `${colsStr}/2/1`;
+  }
+  const [l, m, s] = colsStr.split("/");
+  return {
+    "--cols-l": l || 4,
+    "--cols-m": m || 2,
+    "--cols-s": s || 1,
+  };
+});
 </script>
 
 <template>
@@ -82,31 +123,42 @@ const siteTitle =
         <h5>{{ siteTitle }}</h5>
         <div class="medium-space"></div>
       </template>
-      <div class="cards-gallery">
+      <div class="cards-gallery" :style="gridCols">
         <div
           v-for="feature in featuresExcerpts"
           :key="feature.id"
           class="card-wrapper"
         >
-          <a
-            v-if="feature.link && !feature.link.text"
-            :href="feature.link.href"
-            :target="feature.link.target"
-            class="link-card"
-          >
-            <FeatureCard
+          <div v-if="feature.link && !feature.link.text" class="link-card">
+            <a
+              :href="feature.link.href"
+              :target="feature.link.target"
+              class="link-overlay"
+            ></a>
+            <component
+              :is="resolveCardComponent(variant)"
               :title="feature.title"
               :content="feature.content"
               :icon="feature.icon"
+              :image="feature.image"
+              :chips="feature.chips"
+              :metadata="feature.metadata"
+              :link="feature.link"
+              :secondaryLink="feature.secondaryLink"
               :class="`${cardBackground}`"
             />
-          </a>
-          <FeatureCard
+          </div>
+          <component
             v-else
+            :is="resolveCardComponent(variant)"
             :title="feature.title"
             :content="feature.content"
             :icon="feature.icon"
-            :link="feature.link?.text ? feature.link : undefined"
+            :image="feature.image"
+            :chips="feature.chips"
+            :metadata="feature.metadata"
+            :link="feature.link"
+            :secondaryLink="feature.secondaryLink"
             :class="`${cardBackground}`"
           />
         </div>
@@ -130,6 +182,12 @@ section {
   display: block;
   text-decoration: none;
   border: 0.0625rem solid transparent;
+  position: relative;
+}
+.link-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
 }
 .link-card:hover article {
   box-shadow: none;
@@ -138,24 +196,19 @@ section {
 
 .card-wrapper {
   display: flex;
-  flex: 0 0 calc(25% - 18px);
-}
-
-@media (max-width: 1280px) {
-  .card-wrapper {
-    flex: 0 0 calc(33.333% - 16px);
-  }
+  --cols: var(--cols-l, 4);
+  flex: 0 0 calc(100% / var(--cols) - (24px * (var(--cols) - 1) / var(--cols)));
 }
 
 @media (max-width: 960px) {
   .card-wrapper {
-    flex: 0 0 calc(50% - 12px);
+    --cols: var(--cols-m, 2);
   }
 }
 
 @media (max-width: 640px) {
   .card-wrapper {
-    flex: 0 0 100%;
+    --cols: var(--cols-s, 1);
   }
 }
 </style>

package/src/components/LogoSection.vue

@@ -5,6 +5,7 @@
         v-for="logo in logos"
         :is="logo.link ? 'a' : 'div'"
         :href="logo.link || undefined"
+        :target="logo.target || undefined"
         class="logo"
       >
         <img :src="logo.image" :alt="logo.alt" />

package/src/components/NavBar.vue

@@ -136,17 +136,18 @@
       <nav>
         <ul class="left-align no-margin">
           <li v-for="item in theme.nav.filter((i) => !i.action)">
-            <button
-              v-if="item.items"
-              class="button text"
-              :class="{ active: isActive(item, route.path) }"
-            >
-              <span>{{ t(item.text, theme.i18n) }}</span>
-              <i class="mdi mdi-chevron-down"></i>
+            <div v-if="item.items">
+              <button
+                class="button text"
+                :class="{ active: isActive(item, route.path) }"
+              >
+                <span>{{ t(item.text, theme.i18n) }}</span>
+                <i class="mdi mdi-chevron-down"></i>
+              </button>
               <menu class="no-wrap surface-container-lowest">
                 <NavDropdown :items="item.items" />
               </menu>
-            </button>
+            </div>
             <a
               v-else
               class="button text"
@@ -197,9 +198,11 @@
         </ul>
         <ul class="left-align no-margin" v-if="langs && langs.length > 1">
           <li>
-            <button class="button text">
-              <i class="mdi mdi-translate small"></i>
-              <i class="mdi mdi-chevron-down small"></i>
+            <div>
+              <button class="button text">
+                <i class="mdi mdi-translate small"></i>
+                <i class="mdi mdi-chevron-down small"></i>
+              </button>
               <menu class="no-wrap surface-container-lowest">
                 <li
                   v-for="lang in langs"
@@ -211,7 +214,7 @@
                   </a>
                 </li>
               </menu>
-            </button>
+            </div>
           </li>
         </ul>
       </nav>

package/src/components/PricingTable.vue

@@ -19,9 +19,9 @@
             @change="updatePrices"
           />
           <span class="margin" :for="option.id"
-            ><h6 :class="`bold ${isMobile ? 'medium-text' : ''}`">
+            ><span :class="`bold ${isMobile ? 'medium-text' : ''}`">
               + {{ option.label }}
-            </h6></span
+            </span></span
           >
         </label>
       </div>
@@ -122,9 +122,9 @@
                   @change="updatePrices"
                 />
                 <span :for="`${plan.name}-${row}`"
-                  ><h6 class="small bold">
+                  ><span class="small bold">
                     {{ plan.details[row].alternative.name }}
-                  </h6></span
+                  </span></span
                 >
               </label>
               <span

package/src/components/FeatureCard.cy.js

@@ -1,83 +0,0 @@
-import FeatureCard from "./FeatureCard.vue";
-
-describe("<FeatureCard />", () => {
-  it("renders title and content using props", () => {
-    const title = "Test Feature";
-    const content = "This is a test feature content.";
-
-    cy.mount(FeatureCard, {
-      props: {
-        title,
-        content,
-      },
-    });
-
-    cy.get("h5").should("contain", title);
-    // When using content prop without slots, it renders a div with v-html
-    cy.contains(content).should("exist");
-  });
-
-  it("renders content in a paragraph when using slots", () => {
-    const title = "Slot Feature";
-    const slotContent = "This is content from a slot.";
-
-    cy.mount(FeatureCard, {
-      props: {
-        title,
-      },
-      slots: {
-        default: slotContent,
-      },
-    });
-
-    cy.get("h5").should("contain", title);
-    // When using slots, it renders a p tag
-    cy.get("p").should("contain", slotContent);
-  });
-
-  it("renders link when provided", () => {
-    const link = {
-      text: "Learn More",
-      href: "https://example.com",
-      target: "_blank",
-    };
-
-    cy.mount(FeatureCard, {
-      props: {
-        title: "With Link",
-        content: "Content",
-        link,
-      },
-    });
-
-    cy.get("a").should("have.attr", "href", "https://example.com");
-    cy.get("a").should("contain", "Learn More");
-    cy.get("a").should("have.attr", "target", "_blank");
-  });
-
-  it("renders icon from class string", () => {
-    cy.mount(FeatureCard, {
-      props: {
-        title: "With Icon",
-        content: "Content",
-        icon: "mdi-home",
-      },
-    });
-
-    cy.get("i.mdi.mdi-home").should("exist");
-  });
-
-  it("renders html icon", () => {
-    const iconHtml = '<svg><circle cx="50" cy="50" r="40" /></svg>';
-    cy.mount(FeatureCard, {
-      props: {
-        title: "With SVG Icon",
-        content: "Content",
-        icon: { html: iconHtml },
-      },
-    });
-
-    cy.get(".icon").should("exist");
-    cy.get(".icon").find("svg").should("exist");
-  });
-});

package/src/components/FeatureCard.vue

@@ -1,82 +0,0 @@
-<script setup>
-const { title, content, link, icon } = defineProps({
-  title: String,
-  content: String,
-  link: {
-    /** @type {import('vue').PropType<{ text:string ,href: string,target?: string }>} */
-    type: Object,
-    required: false,
-  },
-  icon: {
-    /** @type {import('vue').PropType<{ html: string, width?: number, height?: number }>} */
-    type: Object,
-    required: false,
-  },
-});
-const iconStyle = {
-  width: (icon?.width ?? 40) + "px",
-  height: (icon?.height ?? 40) + "px",
-};
-</script>
-<template>
-  <article class="vertical large-padding">
-    <div>
-      <i
-        v-if="typeof icon === 'string' && icon.startsWith('mdi-')"
-        :class="`mdi ${icon}`"
-      ></i>
-      <div
-        v-else-if="icon"
-        :style="iconStyle"
-        v-html="icon.html"
-        class="icon"
-      ></div>
-      <h5 class="small">{{ title }}</h5>
-      <p v-if="$slots.default">
-        <slot>{{ content }}</slot>
-      </p>
-      <div v-else v-html="content"></div>
-    </div>
-    <nav v-if="link">
-      <a
-        :href="link.href"
-        :target="link.target ?? '_blank'"
-        class="button transparent bold primary-text no-padding"
-      >
-        <span>
-          {{ link.text }}
-        </span>
-        <i class="mdi mdi-chevron-right arrow"></i>
-      </a>
-    </nav>
-  </article>
-</template>
-<style scoped>
-/**
-* Undo Vitepress missing with @eox/ui styles
-*/
-.VPHome .vp-doc a.button.bold {
-  font-weight: bold;
-}
-.VPHome .vp-doc h5.small {
-  font-size: 1.25rem;
-}
-
-/**
- * Custom styles
- */
-article {
-  justify-content: space-between;
-  transition: all 0.3s ease-in-out;
-  width: 100%;
-}
-.arrow {
-  transition: transform 0.2s;
-}
-.button:hover .arrow {
-  transform: translateX(4px);
-}
-.button.transparent:hover:after {
-  background: none;
-}
-</style>