diff --git a/.changeset/moody-laws-boil.md b/.changeset/moody-laws-boil.md
new file mode 100644
index 0000000000..f481e84044
--- /dev/null
+++ b/.changeset/moody-laws-boil.md
@@ -0,0 +1,7 @@
+---
+'@backstage/plugin-api-docs': patch
+'@backstage/plugin-catalog': minor
+'@backstage/plugin-catalog-react': minor
+---
+
+Use InfoCardVariants on custom cards variant attribute
diff --git a/plugins/api-docs/api-report.md b/plugins/api-docs/api-report.md
index b6683d9b40..991c73d4ab 100644
--- a/plugins/api-docs/api-report.md
+++ b/plugins/api-docs/api-report.md
@@ -10,6 +10,7 @@ import { ApiRef } from '@backstage/core-plugin-api';
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { CatalogTableRow } from '@backstage/plugin-catalog';
 import { ExternalRouteRef } from '@backstage/core-plugin-api';
+import { InfoCardVariants } from '@backstage/core-components';
 import { default as React_2 } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { TableColumn } from '@backstage/core-components';
@@ -128,7 +129,7 @@ export const EntityApiDefinitionCard: () => JSX.Element;
 export const EntityConsumedApisCard: ({
   variant,
 }: {
-  variant?: 'gridItem' | undefined;
+  variant?: InfoCardVariants | undefined;
 }) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "EntityConsumingComponentsCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -137,7 +138,7 @@ export const EntityConsumedApisCard: ({
 export const EntityConsumingComponentsCard: ({
   variant,
 }: {
-  variant?: 'gridItem' | undefined;
+  variant?: InfoCardVariants | undefined;
 }) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "EntityHasApisCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -146,7 +147,7 @@ export const EntityConsumingComponentsCard: ({
 export const EntityHasApisCard: ({
   variant,
 }: {
-  variant?: 'gridItem' | undefined;
+  variant?: InfoCardVariants | undefined;
 }) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "EntityProvidedApisCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -155,7 +156,7 @@ export const EntityHasApisCard: ({
 export const EntityProvidedApisCard: ({
   variant,
 }: {
-  variant?: 'gridItem' | undefined;
+  variant?: InfoCardVariants | undefined;
 }) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "EntityProvidingComponentsCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -164,7 +165,7 @@ export const EntityProvidedApisCard: ({
 export const EntityProvidingComponentsCard: ({
   variant,
 }: {
-  variant?: 'gridItem' | undefined;
+  variant?: InfoCardVariants | undefined;
 }) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "GraphQlDefinitionWidget" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
diff --git a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx
index e810e06ff7..fde41425c9 100644
--- a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx
+++ b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx
@@ -26,13 +26,14 @@ import { apiEntityColumns } from './presets';
 import {
   CodeSnippet,
   InfoCard,
+  InfoCardVariants,
   Link,
   Progress,
   WarningPanel,
 } from '@backstage/core-components';
 
 type Props = {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 };
 
 export const ConsumedApisCard = ({ variant = 'gridItem' }: Props) => {
diff --git a/plugins/api-docs/src/components/ApisCards/HasApisCard.tsx b/plugins/api-docs/src/components/ApisCards/HasApisCard.tsx
index c3d79414c2..bb22f82269 100644
--- a/plugins/api-docs/src/components/ApisCards/HasApisCard.tsx
+++ b/plugins/api-docs/src/components/ApisCards/HasApisCard.tsx
@@ -26,6 +26,7 @@ import { createSpecApiTypeColumn } from './presets';
 import {
   CodeSnippet,
   InfoCard,
+  InfoCardVariants,
   Link,
   Progress,
   TableColumn,
@@ -33,7 +34,7 @@ import {
 } from '@backstage/core-components';
 
 type Props = {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 };
 
 const columns: TableColumn<ApiEntity>[] = [
diff --git a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx
index a63546176f..6ffb6365d2 100644
--- a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx
+++ b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx
@@ -26,13 +26,14 @@ import { apiEntityColumns } from './presets';
 import {
   CodeSnippet,
   InfoCard,
+  InfoCardVariants,
   Link,
   Progress,
   WarningPanel,
 } from '@backstage/core-components';
 
 type Props = {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 };
 
 export const ProvidedApisCard = ({ variant = 'gridItem' }: Props) => {
diff --git a/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.tsx b/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.tsx
index 5455f37f14..af3dcb7204 100644
--- a/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.tsx
+++ b/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.tsx
@@ -28,13 +28,14 @@ import React from 'react';
 import {
   CodeSnippet,
   InfoCard,
+  InfoCardVariants,
   Link,
   Progress,
   WarningPanel,
 } from '@backstage/core-components';
 
 type Props = {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 };
 
 export const ConsumingComponentsCard = ({ variant = 'gridItem' }: Props) => {
diff --git a/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.tsx b/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.tsx
index 9bcace393e..0be746de6d 100644
--- a/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.tsx
+++ b/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.tsx
@@ -28,13 +28,14 @@ import React from 'react';
 import {
   CodeSnippet,
   InfoCard,
+  InfoCardVariants,
   Link,
   Progress,
   WarningPanel,
 } from '@backstage/core-components';
 
 type Props = {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 };
 
 export const ProvidingComponentsCard = ({ variant = 'gridItem' }: Props) => {
diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md
index 831a34edc8..285ecafd70 100644
--- a/plugins/catalog-react/api-report.md
+++ b/plugins/catalog-react/api-report.md
@@ -13,6 +13,7 @@ import { ComponentProps } from 'react';
 import { CompoundEntityRef } from '@backstage/catalog-model';
 import { Entity } from '@backstage/catalog-model';
 import { IconButton } from '@material-ui/core';
+import { InfoCardVariants } from '@backstage/core-components';
 import { LinkProps } from '@backstage/core-components';
 import { Observable } from '@backstage/types';
 import { Overrides } from '@material-ui/core/styles/overrides';
@@ -333,7 +334,7 @@ export interface EntityTableProps<T extends Entity> {
   // (undocumented)
   title: string;
   // (undocumented)
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 // @public
diff --git a/plugins/catalog-react/src/components/EntityTable/EntityTable.tsx b/plugins/catalog-react/src/components/EntityTable/EntityTable.tsx
index 879a35ffd0..3aa6857120 100644
--- a/plugins/catalog-react/src/components/EntityTable/EntityTable.tsx
+++ b/plugins/catalog-react/src/components/EntityTable/EntityTable.tsx
@@ -19,7 +19,11 @@ import { makeStyles } from '@material-ui/core';
 import React, { ReactNode } from 'react';
 import { columnFactories } from './columns';
 import { componentEntityColumns, systemEntityColumns } from './presets';
-import { Table, TableColumn } from '@backstage/core-components';
+import {
+  InfoCardVariants,
+  Table,
+  TableColumn,
+} from '@backstage/core-components';
 
 /**
  * Props for {@link EntityTable}.
@@ -28,7 +32,7 @@ import { Table, TableColumn } from '@backstage/core-components';
  */
 export interface EntityTableProps<T extends Entity> {
   title: string;
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
   entities: T[];
   emptyContent?: ReactNode;
   columns: TableColumn<T>[];
diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md
index f9c0df5abc..e8da88a4e1 100644
--- a/plugins/catalog/api-report.md
+++ b/plugins/catalog/api-report.md
@@ -184,7 +184,7 @@ export interface DependencyOfComponentsCardProps {
   // (undocumented)
   title?: string;
   // (undocumented)
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 // @public (undocumented)
@@ -192,13 +192,13 @@ export interface DependsOnComponentsCardProps {
   // (undocumented)
   title?: string;
   // (undocumented)
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 // @public (undocumented)
 export interface DependsOnResourcesCardProps {
   // (undocumented)
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 // @public (undocumented)
@@ -285,7 +285,7 @@ export interface EntityLinksCardProps {
   // (undocumented)
   cols?: ColumnBreakpoints | number;
   // (undocumented)
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 // @public (undocumented)
@@ -346,25 +346,25 @@ export function hasCatalogProcessingErrors(
 // @public (undocumented)
 export interface HasComponentsCardProps {
   // (undocumented)
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 // @public (undocumented)
 export interface HasResourcesCardProps {
   // (undocumented)
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 // @public (undocumented)
 export interface HasSubcomponentsCardProps {
   // (undocumented)
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 // @public (undocumented)
 export interface HasSystemsCardProps {
   // (undocumented)
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 // @public
@@ -392,7 +392,7 @@ export const RelatedEntitiesCard: <T extends Entity>(
 
 // @public (undocumented)
 export type RelatedEntitiesCardProps<T extends Entity> = {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
   title: string;
   columns: TableColumn<T>[];
   entityKind?: string;
diff --git a/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.tsx b/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.tsx
index b85a446b75..d87b558048 100644
--- a/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.tsx
+++ b/plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.tsx
@@ -15,6 +15,7 @@
  */
 
 import { RELATION_DEPENDENCY_OF } from '@backstage/catalog-model';
+import { InfoCardVariants } from '@backstage/core-components';
 import React from 'react';
 import {
   asComponentEntities,
@@ -25,7 +26,7 @@ import {
 
 /** @public */
 export interface DependencyOfComponentsCardProps {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
   title?: string;
 }
 
diff --git a/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.tsx b/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.tsx
index 33e8caf870..4f30c17a84 100644
--- a/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.tsx
+++ b/plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.tsx
@@ -15,6 +15,7 @@
  */
 
 import { RELATION_DEPENDS_ON } from '@backstage/catalog-model';
+import { InfoCardVariants } from '@backstage/core-components';
 import React from 'react';
 import {
   asComponentEntities,
@@ -25,7 +26,7 @@ import {
 
 /** @public */
 export interface DependsOnComponentsCardProps {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
   title?: string;
 }
 
diff --git a/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.tsx b/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.tsx
index 3fe29093fe..a0f4d399f9 100644
--- a/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.tsx
+++ b/plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.tsx
@@ -15,6 +15,7 @@
  */
 
 import { RELATION_DEPENDS_ON } from '@backstage/catalog-model';
+import { InfoCardVariants } from '@backstage/core-components';
 import React from 'react';
 import {
   asResourceEntities,
@@ -25,7 +26,7 @@ import {
 
 /** @public */
 export interface DependsOnResourcesCardProps {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 export function DependsOnResourcesCard(props: DependsOnResourcesCardProps) {
diff --git a/plugins/catalog/src/components/EntityLinksCard/EntityLinksCard.tsx b/plugins/catalog/src/components/EntityLinksCard/EntityLinksCard.tsx
index 4c4a1ac908..10302d7837 100644
--- a/plugins/catalog/src/components/EntityLinksCard/EntityLinksCard.tsx
+++ b/plugins/catalog/src/components/EntityLinksCard/EntityLinksCard.tsx
@@ -21,12 +21,12 @@ import { EntityLinksEmptyState } from './EntityLinksEmptyState';
 import { LinksGridList } from './LinksGridList';
 import { ColumnBreakpoints } from './types';
 import { IconComponent, useApp } from '@backstage/core-plugin-api';
-import { InfoCard } from '@backstage/core-components';
+import { InfoCard, InfoCardVariants } from '@backstage/core-components';
 
 /** @public */
 export interface EntityLinksCardProps {
   cols?: ColumnBreakpoints | number;
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 export function EntityLinksCard(props: EntityLinksCardProps) {
diff --git a/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.tsx b/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.tsx
index 5864028694..9654152a5c 100644
--- a/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.tsx
+++ b/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.tsx
@@ -15,6 +15,7 @@
  */
 
 import { RELATION_HAS_PART } from '@backstage/catalog-model';
+import { InfoCardVariants } from '@backstage/core-components';
 import React from 'react';
 import {
   asComponentEntities,
@@ -25,7 +26,7 @@ import {
 
 /** @public */
 export interface HasComponentsCardProps {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 export function HasComponentsCard(props: HasComponentsCardProps) {
diff --git a/plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.tsx b/plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.tsx
index 19a48aad25..8476d77bda 100644
--- a/plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.tsx
+++ b/plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.tsx
@@ -15,6 +15,7 @@
  */
 
 import { RELATION_HAS_PART } from '@backstage/catalog-model';
+import { InfoCardVariants } from '@backstage/core-components';
 import React from 'react';
 import {
   asResourceEntities,
@@ -25,7 +26,7 @@ import {
 
 /** @public */
 export interface HasResourcesCardProps {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 export function HasResourcesCard(props: HasResourcesCardProps) {
diff --git a/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx b/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx
index 0b31bbd2be..db95d31f9f 100644
--- a/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx
+++ b/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx
@@ -15,6 +15,7 @@
  */
 
 import { RELATION_HAS_PART } from '@backstage/catalog-model';
+import { InfoCardVariants } from '@backstage/core-components';
 import React from 'react';
 import {
   asComponentEntities,
@@ -24,7 +25,7 @@ import {
 
 /** @public */
 export interface HasSubcomponentsCardProps {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 export function HasSubcomponentsCard(props: HasSubcomponentsCardProps) {
diff --git a/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx b/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx
index 7ab6831e42..5d6fa170f5 100644
--- a/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx
+++ b/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx
@@ -15,6 +15,7 @@
  */
 
 import { RELATION_HAS_PART } from '@backstage/catalog-model';
+import { InfoCardVariants } from '@backstage/core-components';
 import React from 'react';
 import {
   asSystemEntities,
@@ -25,7 +26,7 @@ import {
 
 /** @public */
 export interface HasSystemsCardProps {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 export function HasSystemsCard(props: HasSystemsCardProps) {
diff --git a/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx b/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx
index 70854c1b21..e802b0b583 100644
--- a/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx
+++ b/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx
@@ -24,6 +24,7 @@ import {
 import React from 'react';
 import {
   InfoCard,
+  InfoCardVariants,
   Link,
   Progress,
   ResponseErrorPanel,
@@ -32,7 +33,7 @@ import {
 
 /** @public */
 export type RelatedEntitiesCardProps<T extends Entity> = {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
   title: string;
   columns: TableColumn<T>[];
   entityKind?: string;