diff --git a/docs/config/frontmatter-configs.md b/docs/config/frontmatter-configs.md
index 57515e3356f..ff416440030 100644
--- a/docs/config/frontmatter-configs.md
+++ b/docs/config/frontmatter-configs.md
@@ -197,9 +197,23 @@ interface Feature {
// Details of the feature.
details: string
+
+ // Link when clicked on feature component. The link can
+ // be both internal or external.
+ //
+ // e.g. `guide/theme-home-page` or `htttps://example.com`
+ link?: string
+
+ // Link text to be shown inside feature component. Best
+ // used with `link` option.
+ //
+ // e.g. `Learn more`, `Visit page`, etc.
+ linkText?: string
}
```
+You may learn more about it in [Theme: Home Page](../guide/theme-home-page).
+
## aside
- Type: `boolean`
diff --git a/docs/guide/theme-home-page.md b/docs/guide/theme-home-page.md
index e791c07acd6..da90b44a3f1 100644
--- a/docs/guide/theme-home-page.md
+++ b/docs/guide/theme-home-page.md
@@ -115,5 +115,17 @@ interface Feature {
// Details of the feature.
details: string
+
+ // Link when clicked on feature component. The link can
+ // be both internal or external.
+ //
+ // e.g. `guide/theme-home-page` or `htttps://example.com`
+ link?: string
+
+ // Link text to be shown inside feature component. Best
+ // used with `link` option.
+ //
+ // e.g. `Learn more`, `Visit page`, etc.
+ linkText?: string
}
```
diff --git a/src/client/theme-default/components/VPFeature.vue b/src/client/theme-default/components/VPFeature.vue
index 7f24f3f351a..4a2be4fcc7c 100644
--- a/src/client/theme-default/components/VPFeature.vue
+++ b/src/client/theme-default/components/VPFeature.vue
@@ -1,26 +1,56 @@
-
- {{ icon }}
- {{ title }}
- {{ details }}
-
+
+
+ {{ icon }}
+ {{ title }}
+ {{ details }}
+
+
+
+
diff --git a/src/client/theme-default/components/VPFeatures.vue b/src/client/theme-default/components/VPFeatures.vue
index db49bde43cc..3dd0f0f3439 100644
--- a/src/client/theme-default/components/VPFeatures.vue
+++ b/src/client/theme-default/components/VPFeatures.vue
@@ -6,6 +6,8 @@ export interface Feature {
icon?: string
title: string
details: string
+ link?: string
+ linkText?: string
}
const props = defineProps<{
@@ -38,6 +40,8 @@ const grid = computed(() => {
:icon="feature.icon"
:title="feature.title"
:details="feature.details"
+ :link="feature.link"
+ :link-text="feature.linkText"
/>