diff --git a/.changeset/nasty-shirts-look.md b/.changeset/nasty-shirts-look.md
new file mode 100644
index 0000000000..32213ee219
--- /dev/null
+++ b/.changeset/nasty-shirts-look.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-home': patch
+---
+
+Use EntityDisplayName JSX element entity information directly for FeaturedDocsCard.
diff --git a/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.test.tsx b/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.test.tsx
index 427a1484d5..c49b41eb18 100644
--- a/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.test.tsx
+++ b/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.test.tsx
@@ -66,8 +66,7 @@ describe('', () => {
},
);
const docsCardContent = getByTestId('docs-card-content');
- const docsEntity = getByText('Getting Started Docs');
-
+ const docsEntity = getByText('getting-started-with-idp');
expect(docsCardContent).toContainElement(docsEntity);
});
});
diff --git a/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.tsx b/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.tsx
index eb8d78b0cc..a7ba4d5e9b 100644
--- a/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.tsx
+++ b/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.tsx
@@ -23,11 +23,16 @@ import {
Progress,
ErrorPanel,
} from '@backstage/core-components';
-import { catalogApiRef, CatalogApi } from '@backstage/plugin-catalog-react';
+import {
+ catalogApiRef,
+ CatalogApi,
+ EntityDisplayName,
+} from '@backstage/plugin-catalog-react';
import { useApi } from '@backstage/core-plugin-api';
import { EntityFilterQuery } from '@backstage/catalog-client';
import { makeStyles, Typography } from '@material-ui/core';
+import { stringifyEntityRef } from '@backstage/catalog-model';
/**
* Props customizing the component.
@@ -116,7 +121,7 @@ export const Content = (props: FeaturedDocsCardProps): JSX.Element => {
}/`
}
>
- {d.metadata.title}
+
{d.metadata.description && (