From d26904b8365a4e092e769406ed23b3d4d8d0279d Mon Sep 17 00:00:00 2001
From: lukzerom <lukzerom@gmail.com>
Date: Thu, 16 Dec 2021 22:04:02 +0100
Subject: [PATCH 1/9] BottomLink description

Signed-off-by: lukzerom <lukzerom@gmail.com>
---
 packages/core-components/api-report.md         |  2 +-
 .../src/layout/BottomLink/BottomLink.tsx       | 18 ++++++++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md
index f2b167691d..f047f38a06 100644
--- a/packages/core-components/api-report.md
+++ b/packages/core-components/api-report.md
@@ -89,7 +89,7 @@ export type BackstageOverrides = Overrides & {
 // @public (undocumented)
 export type BoldHeaderClassKey = 'root' | 'title' | 'subheader';
 
-// @public (undocumented)
+// @public
 export function BottomLink(props: BottomLinkProps): JSX.Element;
 
 // @public (undocumented)
diff --git a/packages/core-components/src/layout/BottomLink/BottomLink.tsx b/packages/core-components/src/layout/BottomLink/BottomLink.tsx
index f7c644bedf..420752ffe4 100644
--- a/packages/core-components/src/layout/BottomLink/BottomLink.tsx
+++ b/packages/core-components/src/layout/BottomLink/BottomLink.tsx
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Divider from '@material-ui/core/Divider';
-import Typography from '@material-ui/core/Typography';
-import ArrowIcon from '@material-ui/icons/ArrowForward';
 import { BackstageTheme } from '@backstage/theme';
 import Box from '@material-ui/core/Box';
+import Divider from '@material-ui/core/Divider';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import ArrowIcon from '@material-ui/icons/ArrowForward';
+import React from 'react';
 import { Link } from '../../components/Link';
 
 /** @public */
@@ -50,7 +50,13 @@ export type BottomLinkProps = {
   onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
 };
 
-/** @public */
+/**
+ * Footer with link used in  {@link InfoCard | InfoCard } and {@link TabbedCard | TabbedCard}
+ *
+ * @public
+ * @remarks
+ *
+ */
 export function BottomLink(props: BottomLinkProps) {
   const { link, title, onClick } = props;
   const classes = useStyles();

From b594bab67dae08c635d826ede84527b67972ee09 Mon Sep 17 00:00:00 2001
From: lukzerom <lukzerom@gmail.com>
Date: Thu, 16 Dec 2021 22:43:05 +0100
Subject: [PATCH 2/9] Breadcrumbs and icon update

Signed-off-by: lukzerom <lukzerom@gmail.com>
---
 packages/core-components/src/icons/icons.tsx         | 10 ++++++++--
 .../src/layout/Breadcrumbs/Breadcrumbs.tsx           | 12 +++++++++---
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/core-components/src/icons/icons.tsx b/packages/core-components/src/icons/icons.tsx
index 7d5497f7e2..d2a01ef010 100644
--- a/packages/core-components/src/icons/icons.tsx
+++ b/packages/core-components/src/icons/icons.tsx
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
+import { IconComponent, useApp } from '@backstage/core-plugin-api';
 import MuiBrokenImageIcon from '@material-ui/icons/BrokenImage';
 import React, { ComponentProps } from 'react';
-import { useApp, IconComponent } from '@backstage/core-plugin-api';
 
 type IconComponentProps = ComponentProps<IconComponent>;
 
@@ -27,7 +27,13 @@ function useSystemIcon(key: string, props: IconComponentProps) {
 }
 
 // Should match the list of overridable system icon keys in @backstage/core-app-api
-/** @public */
+/**
+ * Broken Image {@link https://materialui.co/icon/broken-image | Icon} from material UI library
+ *
+ * @public
+ * @remarks
+ *
+ */
 export function BrokenImageIcon(props: IconComponentProps) {
   return useSystemIcon('brokenImage', props);
 }
diff --git a/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx b/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx
index b0b2d6924f..02c595aadd 100644
--- a/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { withStyles } from '@material-ui/core/styles';
 import Box from '@material-ui/core/Box';
+import MaterialBreadcrumbs from '@material-ui/core/Breadcrumbs';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import Popover from '@material-ui/core/Popover';
+import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
-import MaterialBreadcrumbs from '@material-ui/core/Breadcrumbs';
 import React, { ComponentProps, Fragment } from 'react';
 
 type Props = ComponentProps<typeof MaterialBreadcrumbs>;
@@ -51,7 +51,13 @@ const StyledBox = withStyles(
   { name: 'BackstageBreadcrumbsStyledBox' },
 )(Box);
 
-/** @public */
+/**
+ * Breadcrumbs component to show navigation hierarchical structure
+ *
+ * @public
+ * @remarks
+ *
+ */
 export function Breadcrumbs(props: Props) {
   const { children, ...restProps } = props;
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(

From c9f71267092ae33f487bef1eac4015229ea47e1f Mon Sep 17 00:00:00 2001
From: lukzerom <lukzerom@gmail.com>
Date: Fri, 17 Dec 2021 09:06:58 +0100
Subject: [PATCH 3/9] Card Tab docs update

Signed-off-by: lukzerom <lukzerom@gmail.com>
---
 packages/core-components/api-report.md        |  2 +-
 .../src/layout/TabbedCard/TabbedCard.tsx      | 24 ++++++++++++-------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md
index f047f38a06..2d7f8d1d5c 100644
--- a/packages/core-components/api-report.md
+++ b/packages/core-components/api-report.md
@@ -104,7 +104,7 @@ export type BottomLinkProps = {
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function Breadcrumbs(props: Props_20): JSX.Element;
 
 // @public (undocumented)
diff --git a/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx b/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx
index d791629246..1fcda30158 100644
--- a/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx
+++ b/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx
@@ -14,19 +14,19 @@
  * limitations under the License.
  */
 
-import React, {
-  useState,
-  ReactElement,
-  ReactNode,
-  PropsWithChildren,
-} from 'react';
-import { withStyles, makeStyles } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import CardHeader from '@material-ui/core/CardHeader';
 import Divider from '@material-ui/core/Divider';
-import Tabs from '@material-ui/core/Tabs';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
 import Tab, { TabProps } from '@material-ui/core/Tab';
+import Tabs from '@material-ui/core/Tabs';
+import React, {
+  PropsWithChildren,
+  ReactElement,
+  ReactNode,
+  useState,
+} from 'react';
 import { BottomLink, BottomLinkProps } from '../BottomLink';
 import { ErrorBoundary, ErrorBoundaryProps } from '../ErrorBoundary';
 
@@ -149,7 +149,13 @@ type CardTabProps = TabProps & {
   children: ReactNode;
 };
 
-/** @public */
+/**
+ * Card tab component used in {@link TabbedCard | TabbedCard}
+ *
+ * @public
+ * @remarks
+ *
+ */
 export function CardTab(props: PropsWithChildren<CardTabProps>) {
   const { children, ...restProps } = props;
   const classes = useCardTabStyles();

From ea82f340a3b8e9628967dab98cc3f843b850e120 Mon Sep 17 00:00:00 2001
From: lukzerom <lukzerom@gmail.com>
Date: Fri, 17 Dec 2021 10:41:38 +0100
Subject: [PATCH 4/9] Docs update

Signed-off-by: lukzerom <lukzerom@gmail.com>
---
 packages/core-components/api-report.md        |  9 ++++-----
 .../src/components/EmptyState/EmptyState.tsx  | 12 ++++++++---
 .../FeatureCalloutCircular.tsx                | 10 ++++++++--
 packages/core-components/src/icons/icons.tsx  |  2 +-
 .../src/layout/Content/Content.tsx            | 12 +++++++++--
 .../layout/ContentHeader/ContentHeader.tsx    | 11 ++++++++--
 .../src/layout/ErrorPage/ErrorPage.tsx        | 20 ++++++++++++-------
 7 files changed, 54 insertions(+), 22 deletions(-)

diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md
index 2d7f8d1d5c..f908d381e7 100644
--- a/packages/core-components/api-report.md
+++ b/packages/core-components/api-report.md
@@ -115,7 +115,7 @@ export type BreadcrumbsStyledBoxClassKey = 'root';
 
 // Warning: (ae-forgotten-export) The symbol "IconComponentProps" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function BrokenImageIcon(props: IconComponentProps): JSX.Element;
 
 // @public
@@ -129,7 +129,7 @@ export type CardActionsTopRightClassKey = 'root';
 
 // Warning: (ae-forgotten-export) The symbol "CardTabProps" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function CardTab(props: PropsWithChildren<CardTabProps>): JSX.Element;
 
 // @public (undocumented)
@@ -159,14 +159,13 @@ export interface CodeSnippetProps {
 }
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
-// Warning: (ae-missing-release-tag) "Content" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
-// @public (undocumented)
+// @public
 export function Content(props: PropsWithChildren<Props_13>): JSX.Element;
 
 // Warning: (ae-forgotten-export) The symbol "ContentHeaderProps" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function ContentHeader(
   props: PropsWithChildren<ContentHeaderProps>,
 ): JSX.Element;
diff --git a/packages/core-components/src/components/EmptyState/EmptyState.tsx b/packages/core-components/src/components/EmptyState/EmptyState.tsx
index 5abb41f48b..2d0891bd19 100644
--- a/packages/core-components/src/components/EmptyState/EmptyState.tsx
+++ b/packages/core-components/src/components/EmptyState/EmptyState.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
-import Grid from '@material-ui/core/Grid';
+import React from 'react';
 import { EmptyStateImage } from './EmptyStateImage';
 
 /** @public */
@@ -46,7 +46,13 @@ type Props = {
   action?: JSX.Element;
 };
 
-/** @public */
+/**
+ * Various placeholder views for empty state pages
+ *
+ * @public
+ * @remarks
+ *
+ */
 export function EmptyState(props: Props) {
   const { title, description, missing, action } = props;
   const classes = useStyles();
diff --git a/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx b/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx
index eb17641d89..61d97d7760 100644
--- a/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx
+++ b/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { makeStyles } from '@material-ui/core/styles';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import React, {
   PropsWithChildren,
@@ -108,7 +108,13 @@ type Placement = {
   textWidth: number;
 };
 
-/** @public */
+/**
+ * One-time, round 'telescope' animation showing new feature.
+ *
+ * @public
+ * @remarks
+ *
+ */
 export function FeatureCalloutCircular(props: PropsWithChildren<Props>) {
   const { featureId, title, description, children } = props;
   const { show, hide } = useShowCallout(featureId);
diff --git a/packages/core-components/src/icons/icons.tsx b/packages/core-components/src/icons/icons.tsx
index d2a01ef010..2f75bdfa39 100644
--- a/packages/core-components/src/icons/icons.tsx
+++ b/packages/core-components/src/icons/icons.tsx
@@ -28,7 +28,7 @@ function useSystemIcon(key: string, props: IconComponentProps) {
 
 // Should match the list of overridable system icon keys in @backstage/core-app-api
 /**
- * Broken Image {@link https://materialui.co/icon/broken-image | Icon} from material UI library
+ * Broken Image Icon from material UI library
  *
  * @public
  * @remarks
diff --git a/packages/core-components/src/layout/Content/Content.tsx b/packages/core-components/src/layout/Content/Content.tsx
index b5b1300796..12619666f9 100644
--- a/packages/core-components/src/layout/Content/Content.tsx
+++ b/packages/core-components/src/layout/Content/Content.tsx
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import React, { PropsWithChildren } from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import classNames from 'classnames';
-import { Theme, makeStyles } from '@material-ui/core/styles';
+import React, { PropsWithChildren } from 'react';
 
 /** @public */
 export type BackstageContentClassKey = 'root' | 'stretch' | 'noPadding';
@@ -53,6 +53,14 @@ type Props = {
   className?: string;
 };
 
+/**
+ * HTML article tag wrapped with text alignment properties and custom className
+ *
+ * @public
+ * @remarks
+ *
+ */
+
 export function Content(props: PropsWithChildren<Props>) {
   const { className, stretch, noPadding, children, ...restProps } = props;
   const classes = useStyles();
diff --git a/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx b/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx
index 2a8785514d..440408315d 100644
--- a/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx
+++ b/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx
@@ -18,9 +18,9 @@
  * TODO favoriteable capability
  */
 
-import React, { PropsWithChildren, ReactNode } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
+import React, { PropsWithChildren, ReactNode } from 'react';
 import { Helmet } from 'react-helmet';
 
 /** @public */
@@ -94,7 +94,14 @@ type ContentHeaderProps = {
   textAlign?: 'left' | 'right' | 'center';
 };
 
-/** @public */
+/**
+ * Wrapper of material-ui h2 Typography component with body2 description
+ *
+ * @public
+ * @remarks
+ *
+ */
+
 export function ContentHeader(props: PropsWithChildren<ContentHeaderProps>) {
   const {
     description,
diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
index 3d55307c81..e3bcc372dc 100644
--- a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
+++ b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import Typography from '@material-ui/core/Typography';
-import Link from '@material-ui/core/Link';
-import Grid from '@material-ui/core/Grid';
-import { makeStyles } from '@material-ui/core/styles';
 import { BackstageTheme } from '@backstage/theme';
-import { MicDrop } from './MicDrop';
+import Grid from '@material-ui/core/Grid';
+import Link from '@material-ui/core/Link';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import React from 'react';
 import { useNavigate } from 'react-router';
 import { useSupportConfig } from '../../hooks';
+import { MicDrop } from './MicDrop';
 
 interface IErrorPageProps {
   status: string;
@@ -55,7 +55,13 @@ const useStyles = makeStyles<BackstageTheme>(
   { name: 'BackstageErrorPage' },
 );
 
-/** @public */
+/**
+ * Error page with status and description
+ *
+ * @public
+ * @remarks
+ *
+ */
 export function ErrorPage(props: IErrorPageProps) {
   const { status, statusMessage, additionalInfo } = props;
   const classes = useStyles();

From e3e39feb25e49ab3bb60d97b8b9f8759972fc2f5 Mon Sep 17 00:00:00 2001
From: lukzerom <lukzerom@gmail.com>
Date: Fri, 17 Dec 2021 12:17:53 +0100
Subject: [PATCH 5/9] Core components descriptions update to I

Signed-off-by: lukzerom <lukzerom@gmail.com>
---
 .../HeaderIconLinkRow/HeaderIconLinkRow.tsx    | 10 ++++++++--
 .../HorizontalScrollGrid.tsx                   | 18 ++++++++++++------
 .../src/components/ProgressBars/Gauge.tsx      | 11 +++++++++--
 .../src/components/ProgressBars/GaugeCard.tsx  | 12 +++++++++---
 .../src/layout/Header/Header.tsx               | 13 +++++++++----
 .../src/layout/HeaderLabel/HeaderLabel.tsx     | 14 ++++++++++----
 .../src/layout/HeaderTabs/HeaderTabs.tsx       | 10 ++++++++--
 .../src/layout/InfoCard/InfoCard.tsx           | 14 ++++++++++----
 8 files changed, 75 insertions(+), 27 deletions(-)

diff --git a/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx
index 82ba37c372..caf023086b 100644
--- a/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx
+++ b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx
@@ -13,9 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { IconLinkVertical, IconLinkVerticalProps } from './IconLinkVertical';
-import { makeStyles } from '@material-ui/core/styles';
 
 /** @public */
 export type HeaderIconLinkRowClassKey = 'links';
@@ -37,7 +37,13 @@ type Props = {
   links: IconLinkVerticalProps[];
 };
 
-/** @public */
+/**
+ * List of links mapped to {@link IconLinkVertical | IconLinkVertical}
+ *
+ * @public
+ * @remarks
+ *
+ */
 export function HeaderIconLinkRow(props: Props) {
   const { links } = props;
   const classes = useStyles();
diff --git a/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx b/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx
index 2be702a754..91137064be 100644
--- a/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx
+++ b/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import React, { PropsWithChildren } from 'react';
-import classNames from 'classnames';
-import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-import { makeStyles, Theme } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import IconButton from '@material-ui/core/IconButton';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import classNames from 'classnames';
+import React, { PropsWithChildren } from 'react';
 
 const generateGradientStops = (themeType: 'dark' | 'light') => {
   // 97% corresponds to the theme.palette.background.default for the light theme
@@ -198,7 +198,13 @@ function useSmoothScroll(
   return setScrollTarget;
 }
 
-/** @public */
+/**
+ * Horizontal scrollable component with arrows to navigate
+ *
+ * @public
+ * @remarks
+ *
+ */
 export function HorizontalScrollGrid(props: PropsWithChildren<Props>) {
   const {
     scrollStep = 100,
diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx
index 00e7b3257b..858565f773 100644
--- a/packages/core-components/src/components/ProgressBars/Gauge.tsx
+++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { BackstagePalette, BackstageTheme } from '@backstage/theme';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { Circle } from 'rc-progress';
 import React from 'react';
 
@@ -96,7 +96,14 @@ export const getProgressColor: GaugePropsGetColor = ({
   return palette.status.ok;
 };
 
-/** @public */
+/**
+ * Circular Progress Bar
+ *
+ * @public
+ * @remarks
+ *
+ */
+
 export function Gauge(props: GaugeProps) {
   const { getColor = getProgressColor } = props;
   const classes = useStyles(props);
diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
index 0fa51b3919..6191eb0cd8 100644
--- a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
+++ b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { InfoCard, InfoCardVariants } from '../../layout/InfoCard';
+import React from 'react';
 import { BottomLinkProps } from '../../layout/BottomLink';
+import { InfoCard, InfoCardVariants } from '../../layout/InfoCard';
 import { Gauge, GaugePropsGetColor } from './Gauge';
 
 type Props = {
@@ -44,7 +44,13 @@ const useStyles = makeStyles(
   { name: 'BackstageGaugeCard' },
 );
 
-/** @public */
+/**
+ * {@link Gauge | Gauge} with header, subheader and footer
+ *
+ * @public
+ * @remarks
+ *
+ */
 export function GaugeCard(props: Props) {
   const classes = useStyles(props);
   const { title, subheader, progress, inverse, deepLink, variant, getColor } =
diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx
index 76d346031e..46ea1694e3 100644
--- a/packages/core-components/src/layout/Header/Header.tsx
+++ b/packages/core-components/src/layout/Header/Header.tsx
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { useApi, configApiRef } from '@backstage/core-plugin-api';
+import { configApiRef, useApi } from '@backstage/core-plugin-api';
 import { BackstageTheme } from '@backstage/theme';
-import { makeStyles } from '@material-ui/core/styles';
 import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
 import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
 import React, { CSSProperties, PropsWithChildren, ReactNode } from 'react';
@@ -189,8 +189,13 @@ const SubtitleFragment = ({ classes, subtitle }: SubtitleFragmentProps) => {
     </Typography>
   );
 };
-
-/** @public */
+/**
+ * Backstage main header with abstract color background in multiple variants
+ *
+ * @public
+ * @remarks
+ *
+ */
 export function Header(props: PropsWithChildren<Props>) {
   const {
     children,
diff --git a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
index b4576a27a9..31e8998477 100644
--- a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
+++ b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { makeStyles } from '@material-ui/core/styles';
-import Link from '@material-ui/core/Link';
-import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
+import Link from '@material-ui/core/Link';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
 import React from 'react';
 
 /** @public */
@@ -60,7 +60,13 @@ type HeaderLabelProps = {
   url?: string;
 };
 
-/** @public */
+/**
+ * Additional label to main {@link Header | Header}
+ *
+ * @public
+ * @remarks
+ *
+ */
 export function HeaderLabel(props: HeaderLabelProps) {
   const { label, value, url } = props;
   const classes = useStyles();
diff --git a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
index 00dd3e9b95..c27d12114a 100644
--- a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
+++ b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
@@ -17,10 +17,10 @@
 // TODO(blam): Remove this implementation when the Tabs are ready
 // This is just a temporary solution to implementing tabs for now
 
-import React, { useState, useEffect } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import TabUI, { TabProps } from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
+import React, { useEffect, useState } from 'react';
 
 /** @public */
 export type HeaderTabsClassKey =
@@ -68,7 +68,13 @@ type HeaderTabsProps = {
   selectedIndex?: number;
 };
 
-/** @public */
+/**
+ * Horizontal Tabs component
+ *
+ * @public
+ * @remarks
+ *
+ */
 export function HeaderTabs(props: HeaderTabsProps) {
   const { tabs, onChange, selectedIndex } = props;
   const [selectedTab, setSelectedTab] = useState<number>(selectedIndex ?? 0);
diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
index 8bedca1013..2b1c002456 100644
--- a/packages/core-components/src/layout/InfoCard/InfoCard.tsx
+++ b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
-import React, { ReactNode } from 'react';
-import { withStyles, makeStyles } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 import CardHeader, { CardHeaderProps } from '@material-ui/core/CardHeader';
 import Divider from '@material-ui/core/Divider';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
-import { ErrorBoundary, ErrorBoundaryProps } from '../ErrorBoundary';
+import React, { ReactNode } from 'react';
 import { BottomLink, BottomLinkProps } from '../BottomLink';
+import { ErrorBoundary, ErrorBoundaryProps } from '../ErrorBoundary';
 
 /** @public */
 export type InfoCardClassKey =
@@ -144,7 +144,13 @@ type Props = {
   titleTypographyProps?: object;
 };
 
-/** @public */
+/**
+ * Material-ui card with header , content and actions footer
+ *
+ * @public
+ * @remarks
+ *
+ */
 export function InfoCard(props: Props): JSX.Element {
   const {
     title,

From 90f5a457b52289da265552826b54a510631ca575 Mon Sep 17 00:00:00 2001
From: lukzerom <lukzerom@gmail.com>
Date: Fri, 17 Dec 2021 12:26:52 +0100
Subject: [PATCH 6/9] Docs update

Signed-off-by: lukzerom <lukzerom@gmail.com>
---
 packages/core-components/api-report.md        | 23 +++++++++--------
 .../HeaderIconLinkRow/HeaderIconLinkRow.tsx   |  2 +-
 .../src/layout/Sidebar/Intro.tsx              | 25 ++++++++++++-------
 3 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md
index f908d381e7..b3eb6a2fb0 100644
--- a/packages/core-components/api-report.md
+++ b/packages/core-components/api-report.md
@@ -309,7 +309,7 @@ export function EmailIcon(props: IconComponentProps): JSX.Element;
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function EmptyState(props: Props_2): JSX.Element;
 
 // @public (undocumented)
@@ -331,7 +331,7 @@ export type ErrorBoundaryProps = {
 
 // Warning: (ae-forgotten-export) The symbol "IErrorPageProps" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function ErrorPage(props: IErrorPageProps): JSX.Element;
 
 // @public (undocumented)
@@ -364,7 +364,7 @@ export type FeatureCalloutCircleClassKey =
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function FeatureCalloutCircular(
   props: PropsWithChildren<Props_4>,
 ): JSX.Element;
@@ -372,12 +372,12 @@ export function FeatureCalloutCircular(
 // @public (undocumented)
 export type FiltersContainerClassKey = 'root' | 'title';
 
-// @public (undocumented)
+// @public
 export function Gauge(props: GaugeProps): JSX.Element;
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function GaugeCard(props: Props_10): JSX.Element;
 
 // @public (undocumented)
@@ -415,7 +415,7 @@ export function GroupIcon(props: IconComponentProps): JSX.Element;
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function Header(props: PropsWithChildren<Props_14>): JSX.Element;
 
 // @public (undocumented)
@@ -431,8 +431,9 @@ export type HeaderClassKey =
   | 'breadcrumbTitle';
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
+// Warning: (ae-unresolved-link) The @link reference could not be resolved: The package "@backstage/core-components" does not have an export "IconLinkVertical"
 //
-// @public (undocumented)
+// @public
 export function HeaderIconLinkRow(props: Props_5): JSX.Element;
 
 // @public (undocumented)
@@ -440,7 +441,7 @@ export type HeaderIconLinkRowClassKey = 'links';
 
 // Warning: (ae-forgotten-export) The symbol "HeaderLabelProps" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function HeaderLabel(props: HeaderLabelProps): JSX.Element;
 
 // @public (undocumented)
@@ -448,7 +449,7 @@ export type HeaderLabelClassKey = 'root' | 'label' | 'value';
 
 // Warning: (ae-forgotten-export) The symbol "HeaderTabsProps" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function HeaderTabs(props: HeaderTabsProps): JSX.Element;
 
 // @public (undocumented)
@@ -466,7 +467,7 @@ export function HomepageTimer(_props: {}): JSX.Element | null;
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function HorizontalScrollGrid(
   props: PropsWithChildren<Props_6>,
 ): JSX.Element;
@@ -506,7 +507,7 @@ export type IconLinkVerticalProps = {
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function InfoCard(props: Props_15): JSX.Element;
 
 // @public (undocumented)
diff --git a/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx
index caf023086b..beb44fc771 100644
--- a/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx
+++ b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx
@@ -38,7 +38,7 @@ type Props = {
 };
 
 /**
- * List of links mapped to {@link IconLinkVertical | IconLinkVertical}
+ * HTML nav tag with links mapped inside
  *
  * @public
  * @remarks
diff --git a/packages/core-components/src/layout/Sidebar/Intro.tsx b/packages/core-components/src/layout/Sidebar/Intro.tsx
index 63b8db14ed..9dd41d6c3e 100644
--- a/packages/core-components/src/layout/Sidebar/Intro.tsx
+++ b/packages/core-components/src/layout/Sidebar/Intro.tsx
@@ -14,18 +14,18 @@
  * limitations under the License.
  */
 
+import { BackstageTheme } from '@backstage/theme';
+import Collapse from '@material-ui/core/Collapse';
+import Link from '@material-ui/core/Link';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import CloseIcon from '@material-ui/icons/Close';
 import React, { useContext, useState } from 'react';
 import { useLocalStorage } from 'react-use';
-import { makeStyles } from '@material-ui/core/styles';
-import Link from '@material-ui/core/Link';
-import Typography from '@material-ui/core/Typography';
-import Collapse from '@material-ui/core/Collapse';
-import CloseIcon from '@material-ui/icons/Close';
-import { BackstageTheme } from '@backstage/theme';
 import {
-  SIDEBAR_INTRO_LOCAL_STORAGE,
-  SidebarContext,
   sidebarConfig,
+  SidebarContext,
+  SIDEBAR_INTRO_LOCAL_STORAGE,
 } from './config';
 import { SidebarDivider } from './Items';
 
@@ -88,7 +88,14 @@ type IntroCardProps = {
   onClose: () => void;
 };
 
-/** @public */
+/**
+ * Closable card with information from Navigation Sidebar
+ *
+ * @public
+ * @remarks
+ *
+ */
+
 export function IntroCard(props: IntroCardProps) {
   const classes = useStyles();
   const { text, onClose } = props;

From 7eb1983900fd1b3980a28e0d65dc1434c0e8ae4b Mon Sep 17 00:00:00 2001
From: lukzerom <lukzerom@gmail.com>
Date: Fri, 17 Dec 2021 12:34:51 +0100
Subject: [PATCH 7/9] docs generated

Signed-off-by: lukzerom <lukzerom@gmail.com>
---
 packages/core-components/api-report.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md
index b3eb6a2fb0..e84982e31a 100644
--- a/packages/core-components/api-report.md
+++ b/packages/core-components/api-report.md
@@ -431,7 +431,6 @@ export type HeaderClassKey =
   | 'breadcrumbTitle';
 
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
-// Warning: (ae-unresolved-link) The @link reference could not be resolved: The package "@backstage/core-components" does not have an export "IconLinkVertical"
 //
 // @public
 export function HeaderIconLinkRow(props: Props_5): JSX.Element;
@@ -525,7 +524,7 @@ export type InfoCardVariants = 'flex' | 'fullHeight' | 'gridItem';
 
 // Warning: (ae-forgotten-export) The symbol "IntroCardProps" needs to be exported by the entry point index.d.ts
 //
-// @public (undocumented)
+// @public
 export function IntroCard(props: IntroCardProps): JSX.Element;
 
 // Warning: (tsdoc-malformed-html-name) Invalid HTML element: Expecting an HTML name

From 73a91e25f9429aea9530ab4bf72c09223ae63c42 Mon Sep 17 00:00:00 2001
From: lukzerom <lukzerom@gmail.com>
Date: Fri, 17 Dec 2021 12:41:08 +0100
Subject: [PATCH 8/9] added changeset

Signed-off-by: lukzerom <lukzerom@gmail.com>
---
 .changeset/fast-peaches-drop.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fast-peaches-drop.md

diff --git a/.changeset/fast-peaches-drop.md b/.changeset/fast-peaches-drop.md
new file mode 100644
index 0000000000..29c3a5755f
--- /dev/null
+++ b/.changeset/fast-peaches-drop.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Added description to components: BottomLink, Breadcrumbs, BrokenImageIcon, CardTab, Content, ContentHeader, EmptyState, ErrorPage, FeatureCalloutCircular, Gauge, GaugeCard, Header, HeaderIconLinkRow, HeaderLabel, HeaderTabs, HorizontalScrollGrid, InfoCard, IntroCard

From e643a59dca04a24cebe661c62c62fb4c1f75bd17 Mon Sep 17 00:00:00 2001
From: lukzerom <lukzerom@gmail.com>
Date: Tue, 21 Dec 2021 17:16:05 +0100
Subject: [PATCH 9/9] PR fixes

Signed-off-by: lukzerom <lukzerom@gmail.com>
---
 .../core-components/src/components/EmptyState/EmptyState.tsx   | 1 -
 .../src/components/FeatureDiscovery/FeatureCalloutCircular.tsx | 1 -
 .../src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx     | 1 -
 .../components/HorizontalScrollGrid/HorizontalScrollGrid.tsx   | 1 -
 packages/core-components/src/components/ProgressBars/Gauge.tsx | 1 -
 .../core-components/src/components/ProgressBars/GaugeCard.tsx  | 3 +--
 packages/core-components/src/icons/icons.tsx                   | 3 +--
 packages/core-components/src/layout/BottomLink/BottomLink.tsx  | 3 +--
 .../core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx     | 1 -
 packages/core-components/src/layout/Content/Content.tsx        | 3 +--
 .../core-components/src/layout/ContentHeader/ContentHeader.tsx | 3 +--
 packages/core-components/src/layout/ErrorPage/ErrorPage.tsx    | 1 -
 packages/core-components/src/layout/Header/Header.tsx          | 1 -
 .../core-components/src/layout/HeaderLabel/HeaderLabel.tsx     | 3 +--
 packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx  | 1 -
 packages/core-components/src/layout/InfoCard/InfoCard.tsx      | 1 -
 packages/core-components/src/layout/Sidebar/Intro.tsx          | 1 -
 packages/core-components/src/layout/TabbedCard/TabbedCard.tsx  | 3 +--
 18 files changed, 7 insertions(+), 25 deletions(-)

diff --git a/packages/core-components/src/components/EmptyState/EmptyState.tsx b/packages/core-components/src/components/EmptyState/EmptyState.tsx
index 2d0891bd19..b4fbf6d510 100644
--- a/packages/core-components/src/components/EmptyState/EmptyState.tsx
+++ b/packages/core-components/src/components/EmptyState/EmptyState.tsx
@@ -50,7 +50,6 @@ type Props = {
  * Various placeholder views for empty state pages
  *
  * @public
- * @remarks
  *
  */
 export function EmptyState(props: Props) {
diff --git a/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx b/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx
index 61d97d7760..cac3c8166b 100644
--- a/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx
+++ b/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx
@@ -112,7 +112,6 @@ type Placement = {
  * One-time, round 'telescope' animation showing new feature.
  *
  * @public
- * @remarks
  *
  */
 export function FeatureCalloutCircular(props: PropsWithChildren<Props>) {
diff --git a/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx
index beb44fc771..e30d407377 100644
--- a/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx
+++ b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx
@@ -41,7 +41,6 @@ type Props = {
  * HTML nav tag with links mapped inside
  *
  * @public
- * @remarks
  *
  */
 export function HeaderIconLinkRow(props: Props) {
diff --git a/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx b/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx
index 91137064be..8c5dc4d530 100644
--- a/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx
+++ b/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx
@@ -202,7 +202,6 @@ function useSmoothScroll(
  * Horizontal scrollable component with arrows to navigate
  *
  * @public
- * @remarks
  *
  */
 export function HorizontalScrollGrid(props: PropsWithChildren<Props>) {
diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx
index 858565f773..0336ebc990 100644
--- a/packages/core-components/src/components/ProgressBars/Gauge.tsx
+++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx
@@ -100,7 +100,6 @@ export const getProgressColor: GaugePropsGetColor = ({
  * Circular Progress Bar
  *
  * @public
- * @remarks
  *
  */
 
diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
index 6191eb0cd8..9e6c19ebfe 100644
--- a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
+++ b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
@@ -45,10 +45,9 @@ const useStyles = makeStyles(
 );
 
 /**
- * {@link Gauge | Gauge} with header, subheader and footer
+ * {@link Gauge} with header, subheader and footer
  *
  * @public
- * @remarks
  *
  */
 export function GaugeCard(props: Props) {
diff --git a/packages/core-components/src/icons/icons.tsx b/packages/core-components/src/icons/icons.tsx
index 2f75bdfa39..8d22af4664 100644
--- a/packages/core-components/src/icons/icons.tsx
+++ b/packages/core-components/src/icons/icons.tsx
@@ -28,10 +28,9 @@ function useSystemIcon(key: string, props: IconComponentProps) {
 
 // Should match the list of overridable system icon keys in @backstage/core-app-api
 /**
- * Broken Image Icon from material UI library
+ * Broken Image Icon
  *
  * @public
- * @remarks
  *
  */
 export function BrokenImageIcon(props: IconComponentProps) {
diff --git a/packages/core-components/src/layout/BottomLink/BottomLink.tsx b/packages/core-components/src/layout/BottomLink/BottomLink.tsx
index 420752ffe4..c9c1659284 100644
--- a/packages/core-components/src/layout/BottomLink/BottomLink.tsx
+++ b/packages/core-components/src/layout/BottomLink/BottomLink.tsx
@@ -51,10 +51,9 @@ export type BottomLinkProps = {
 };
 
 /**
- * Footer with link used in  {@link InfoCard | InfoCard } and {@link TabbedCard | TabbedCard}
+ * Footer with link used in  {@link InfoCard } and {@link TabbedCard}
  *
  * @public
- * @remarks
  *
  */
 export function BottomLink(props: BottomLinkProps) {
diff --git a/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx b/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx
index 02c595aadd..0d11068074 100644
--- a/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx
@@ -55,7 +55,6 @@ const StyledBox = withStyles(
  * Breadcrumbs component to show navigation hierarchical structure
  *
  * @public
- * @remarks
  *
  */
 export function Breadcrumbs(props: Props) {
diff --git a/packages/core-components/src/layout/Content/Content.tsx b/packages/core-components/src/layout/Content/Content.tsx
index 12619666f9..1d91556663 100644
--- a/packages/core-components/src/layout/Content/Content.tsx
+++ b/packages/core-components/src/layout/Content/Content.tsx
@@ -54,10 +54,9 @@ type Props = {
 };
 
 /**
- * HTML article tag wrapped with text alignment properties and custom className
+ * The main content part inside a {@link Page}.
  *
  * @public
- * @remarks
  *
  */
 
diff --git a/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx b/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx
index 440408315d..5a9ed3a77e 100644
--- a/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx
+++ b/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx
@@ -95,10 +95,9 @@ type ContentHeaderProps = {
 };
 
 /**
- * Wrapper of material-ui h2 Typography component with body2 description
+ *  A header at the top inside a {@link Content}.
  *
  * @public
- * @remarks
  *
  */
 
diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
index 2daef184e3..08c002d849 100644
--- a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
+++ b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
@@ -59,7 +59,6 @@ const useStyles = makeStyles<BackstageTheme>(
  * Error page with status and description
  *
  * @public
- * @remarks
  *
  */
 export function ErrorPage(props: IErrorPageProps) {
diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx
index 46ea1694e3..9ff0612b9f 100644
--- a/packages/core-components/src/layout/Header/Header.tsx
+++ b/packages/core-components/src/layout/Header/Header.tsx
@@ -193,7 +193,6 @@ const SubtitleFragment = ({ classes, subtitle }: SubtitleFragmentProps) => {
  * Backstage main header with abstract color background in multiple variants
  *
  * @public
- * @remarks
  *
  */
 export function Header(props: PropsWithChildren<Props>) {
diff --git a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
index d29d8cf96b..f523a5319b 100644
--- a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
+++ b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
@@ -61,10 +61,9 @@ type HeaderLabelProps = {
 };
 
 /**
- * Additional label to main {@link Header | Header}
+ * Additional label to main {@link Header}
  *
  * @public
- * @remarks
  *
  */
 export function HeaderLabel(props: HeaderLabelProps) {
diff --git a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
index c27d12114a..bee4bdfce2 100644
--- a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
+++ b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
@@ -72,7 +72,6 @@ type HeaderTabsProps = {
  * Horizontal Tabs component
  *
  * @public
- * @remarks
  *
  */
 export function HeaderTabs(props: HeaderTabsProps) {
diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
index 2b1c002456..f1e67904f1 100644
--- a/packages/core-components/src/layout/InfoCard/InfoCard.tsx
+++ b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
@@ -148,7 +148,6 @@ type Props = {
  * Material-ui card with header , content and actions footer
  *
  * @public
- * @remarks
  *
  */
 export function InfoCard(props: Props): JSX.Element {
diff --git a/packages/core-components/src/layout/Sidebar/Intro.tsx b/packages/core-components/src/layout/Sidebar/Intro.tsx
index 9dd41d6c3e..511a51fd9c 100644
--- a/packages/core-components/src/layout/Sidebar/Intro.tsx
+++ b/packages/core-components/src/layout/Sidebar/Intro.tsx
@@ -92,7 +92,6 @@ type IntroCardProps = {
  * Closable card with information from Navigation Sidebar
  *
  * @public
- * @remarks
  *
  */
 
diff --git a/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx b/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx
index 1fcda30158..06e9f53224 100644
--- a/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx
+++ b/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx
@@ -150,10 +150,9 @@ type CardTabProps = TabProps & {
 };
 
 /**
- * Card tab component used in {@link TabbedCard | TabbedCard}
+ * Card tab component used in {@link TabbedCard}
  *
  * @public
- * @remarks
  *
  */
 export function CardTab(props: PropsWithChildren<CardTabProps>) {