diff --git a/docs/xplat/src/content/en/components/grids/grids-header.mdx b/docs/xplat/src/content/en/components/grids/grids-header.mdx
index e3c6b3296c..70406128f7 100644
--- a/docs/xplat/src/content/en/components/grids/grids-header.mdx
+++ b/docs/xplat/src/content/en/components/grids/grids-header.mdx
@@ -86,7 +86,7 @@ Seamlessly scroll through unlimited rows and columns in your {Platform} grid, wi
title="Quick and Easy to Customize, Build and Implement"
description="The Ignite UI {Platform} Data Grid can handle unlimited rows and columns of data, while providing access to custom templates and real-time data updates. Featuring an intuitive API for easy theming and branding, you can quickly bind to data with minimal code."
label="View Samples"
- href="data-grid.md"
+ href="data-grid"
/>
diff --git a/src/components/mdx/CtaArea/CtaArea.astro b/src/components/mdx/CtaArea/CtaArea.astro
index 1c3a77d9a3..58192e158d 100644
--- a/src/components/mdx/CtaArea/CtaArea.astro
+++ b/src/components/mdx/CtaArea/CtaArea.astro
@@ -32,6 +32,11 @@ interface Props {
const { title, description, label, href, note, logo = true, variant = 'default', backgroundImage, overlay } = Astro.props;
+const base = import.meta.env.BASE_URL.replace(/\/$/, '');
+const resolvedHref = href.startsWith('/') && !href.startsWith('//')
+ ? `${base}${href}`
+ : href;
+
const resolvedLogo = logo === true ? logoUrl : (typeof logo === 'string' ? logo : null);
const isHorizontal = variant === 'horizontal';
@@ -60,7 +65,7 @@ const overlayColor = typeof overlay === 'string' ? overlay : undefined;
{description && {description}
}