diff --git a/.changeset/hip-wasps-yell.md b/.changeset/hip-wasps-yell.md
new file mode 100644
index 0000000000..1cdea4e84d
--- /dev/null
+++ b/.changeset/hip-wasps-yell.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-bazaar': patch
+---
+
+Add `title` as optional parameter to `BazaarOverviewCard`
diff --git a/plugins/bazaar/README.md b/plugins/bazaar/README.md
index 0798888a23..2ad141935e 100644
--- a/plugins/bazaar/README.md
+++ b/plugins/bazaar/README.md
@@ -80,13 +80,15 @@ export const homePage = (
+
+
-+
++
+
{/* ...other homepage items */}
```
-The properties `fullHeight` and `fullWidth` are optional and can be used to adjust the cards styling.
+The property `title` is optional and can be used to customize the title in the card header. If no title is submitted the default titles `Bazaar Random Projects` or `Bazaar Latest Projects` are displayed.
+
+The properties `fullHeight` and `fullWidth` are also optional and can be used to adjust the cards styling.
## How does the Bazaar work?
diff --git a/plugins/bazaar/api-report.md b/plugins/bazaar/api-report.md
index a17927cd77..d7c463888a 100644
--- a/plugins/bazaar/api-report.md
+++ b/plugins/bazaar/api-report.md
@@ -15,6 +15,7 @@ export const BazaarOverviewCard: (
// @public (undocumented)
export type BazaarOverviewCardProps = {
+ title?: string;
order: 'latest' | 'random';
fullWidth?: boolean;
fullHeight?: boolean;
diff --git a/plugins/bazaar/media/overviewCard.png b/plugins/bazaar/media/overviewCard.png
index 6769aa34ca..ef41ca48e5 100644
Binary files a/plugins/bazaar/media/overviewCard.png and b/plugins/bazaar/media/overviewCard.png differ
diff --git a/plugins/bazaar/src/components/BazaarOverviewCard/BazaarOverviewCard.tsx b/plugins/bazaar/src/components/BazaarOverviewCard/BazaarOverviewCard.tsx
index d30eaa3620..c58ee3db1c 100644
--- a/plugins/bazaar/src/components/BazaarOverviewCard/BazaarOverviewCard.tsx
+++ b/plugins/bazaar/src/components/BazaarOverviewCard/BazaarOverviewCard.tsx
@@ -31,6 +31,7 @@ import StorefrontIcon from '@material-ui/icons/Storefront';
/** @public */
export type BazaarOverviewCardProps = {
+ title?: string;
order: 'latest' | 'random';
fullWidth?: boolean;
fullHeight?: boolean;
@@ -51,11 +52,14 @@ const getUnlinkedCatalogEntities = (
/** @public */
export const BazaarOverviewCard = (props: BazaarOverviewCardProps) => {
- const { order, fullWidth = false, fullHeight = false } = props;
+ const { title, order, fullWidth = false, fullHeight = false } = props;
const bazaarApi = useApi(bazaarApiRef);
const catalogApi = useApi(catalogApiRef);
const root = useRouteRef(bazaarPlugin.routes.root);
+ const defaultTitle =
+ order === 'latest' ? 'Bazaar Latest Projects' : 'Bazaar Random Projects';
+
const bazaarLink = {
title: 'Go to Bazaar',
link: `${root()}`,
@@ -127,9 +131,7 @@ export const BazaarOverviewCard = (props: BazaarOverviewCardProps) => {
return (