From bd9800c0b138269bd1de4811e47542f2ca5938fd Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 9 Jun 2021 17:15:59 +0200
Subject: [PATCH 1/9] Move styles from `styles/card-styles.js` to `styles.js`

---
 packages/components/src/card/body.js                          | 2 +-
 packages/components/src/card/divider.js                       | 2 +-
 packages/components/src/card/footer.js                        | 2 +-
 packages/components/src/card/header.js                        | 2 +-
 packages/components/src/card/index.js                         | 2 +-
 packages/components/src/card/media.js                         | 2 +-
 .../components/src/card/{styles/card-styles.js => styles.js}  | 4 ++--
 7 files changed, 8 insertions(+), 8 deletions(-)
 rename packages/components/src/card/{styles/card-styles.js => styles.js} (97%)

diff --git a/packages/components/src/card/body.js b/packages/components/src/card/body.js
index 9194d601169ea..a297f585174b1 100644
--- a/packages/components/src/card/body.js
+++ b/packages/components/src/card/body.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { BodyUI } from './styles/card-styles';
+import { BodyUI } from './styles';
 import { useCardContext } from './context';
 
 export const defaultProps = {
diff --git a/packages/components/src/card/divider.js b/packages/components/src/card/divider.js
index 09a4a59c72664..150339fa9a737 100644
--- a/packages/components/src/card/divider.js
+++ b/packages/components/src/card/divider.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { DividerUI } from './styles/card-styles';
+import { DividerUI } from './styles';
 
 export function CardDivider( props ) {
 	const { className, ...additionalProps } = props;
diff --git a/packages/components/src/card/footer.js b/packages/components/src/card/footer.js
index e4b66ce4022c7..0a177464903c3 100644
--- a/packages/components/src/card/footer.js
+++ b/packages/components/src/card/footer.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { FooterUI } from './styles/card-styles';
+import { FooterUI } from './styles';
 import { useCardContext } from './context';
 
 export const defaultProps = {
diff --git a/packages/components/src/card/header.js b/packages/components/src/card/header.js
index ece890cddd460..00b4e195036ca 100644
--- a/packages/components/src/card/header.js
+++ b/packages/components/src/card/header.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { HeaderUI } from './styles/card-styles';
+import { HeaderUI } from './styles';
 import { useCardContext } from './context';
 
 export const defaultProps = {
diff --git a/packages/components/src/card/index.js b/packages/components/src/card/index.js
index 765b980567abf..394050cde72db 100644
--- a/packages/components/src/card/index.js
+++ b/packages/components/src/card/index.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * Internal dependencies
  */
 import { CardContext } from './context';
-import { CardUI } from './styles/card-styles';
+import { CardUI } from './styles';
 
 export const defaultProps = {
 	isBorderless: false,
diff --git a/packages/components/src/card/media.js b/packages/components/src/card/media.js
index c660f6705649d..41bd93635af30 100644
--- a/packages/components/src/card/media.js
+++ b/packages/components/src/card/media.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { MediaUI } from './styles/card-styles';
+import { MediaUI } from './styles';
 
 export function CardMedia( props ) {
 	const { className, ...additionalProps } = props;
diff --git a/packages/components/src/card/styles/card-styles.js b/packages/components/src/card/styles.js
similarity index 97%
rename from packages/components/src/card/styles/card-styles.js
rename to packages/components/src/card/styles.js
index a3415843312c4..8be50a25c3600 100644
--- a/packages/components/src/card/styles/card-styles.js
+++ b/packages/components/src/card/styles.js
@@ -11,8 +11,8 @@ import { HorizontalRule } from '@wordpress/primitives';
 /**
  * Internal dependencies
  */
-import { Flex } from '../../flex';
-import { COLORS, space } from '../../utils';
+import { Flex } from '../flex';
+import { COLORS, space } from '../utils';
 
 export const styleProps = {
 	borderColor: COLORS.lightGray[ 500 ],

From 0fd00f36232b82efd0c359a3a52b697bd40a9e58 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 9 Jun 2021 17:29:46 +0200
Subject: [PATCH 2/9] Move `<Card />` to `card/` subfolder and add 
 new`index.js` file to export all card components

---
 docs/manifest.json                            |  2 +-
 .../components/src/card/{ => card}/README.md  |  0
 packages/components/src/card/card/index.js    | 51 ++++++++++++++++++
 packages/components/src/card/index.js         | 52 +------------------
 .../components/src/card/stories/_index.js     |  2 +-
 packages/components/src/card/stories/body.js  |  2 +-
 .../components/src/card/stories/divider.js    |  2 +-
 .../components/src/card/stories/footer.js     |  2 +-
 .../components/src/card/stories/header.js     |  2 +-
 packages/components/src/card/stories/media.js |  2 +-
 packages/components/src/card/test/index.js    |  2 +-
 packages/components/src/index.js              |  2 +-
 12 files changed, 61 insertions(+), 60 deletions(-)
 rename packages/components/src/card/{ => card}/README.md (100%)
 create mode 100644 packages/components/src/card/card/index.js

diff --git a/docs/manifest.json b/docs/manifest.json
index 7415ab658f48b..309646ff11f29 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -710,7 +710,7 @@
 	{
 		"title": "Card",
 		"slug": "card",
-		"markdown_source": "../packages/components/src/card/README.md",
+		"markdown_source": "../packages/components/src/card/card/README.md",
 		"parent": "components"
 	},
 	{
diff --git a/packages/components/src/card/README.md b/packages/components/src/card/card/README.md
similarity index 100%
rename from packages/components/src/card/README.md
rename to packages/components/src/card/card/README.md
diff --git a/packages/components/src/card/card/index.js b/packages/components/src/card/card/index.js
new file mode 100644
index 0000000000000..5731d5296d2a2
--- /dev/null
+++ b/packages/components/src/card/card/index.js
@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { CardContext } from '../context';
+import { CardUI } from '../styles';
+
+export const defaultProps = {
+	isBorderless: false,
+	isElevated: false,
+	size: 'medium',
+};
+
+export function Card( props ) {
+	const {
+		className,
+		isBorderless,
+		isElevated,
+		size,
+		...additionalProps
+	} = props;
+	const { Provider } = CardContext;
+
+	const contextProps = {
+		isBorderless,
+		isElevated,
+		size,
+	};
+
+	const classes = classnames(
+		'components-card',
+		isBorderless && 'is-borderless',
+		isElevated && 'is-elevated',
+		size && `is-size-${ size }`,
+		className
+	);
+
+	return (
+		<Provider value={ contextProps }>
+			<CardUI { ...additionalProps } className={ classes } />
+		</Provider>
+	);
+}
+
+Card.defaultProps = defaultProps;
+
+export default Card;
diff --git a/packages/components/src/card/index.js b/packages/components/src/card/index.js
index 394050cde72db..3c3b401842f24 100644
--- a/packages/components/src/card/index.js
+++ b/packages/components/src/card/index.js
@@ -1,51 +1 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * Internal dependencies
- */
-import { CardContext } from './context';
-import { CardUI } from './styles';
-
-export const defaultProps = {
-	isBorderless: false,
-	isElevated: false,
-	size: 'medium',
-};
-
-export function Card( props ) {
-	const {
-		className,
-		isBorderless,
-		isElevated,
-		size,
-		...additionalProps
-	} = props;
-	const { Provider } = CardContext;
-
-	const contextProps = {
-		isBorderless,
-		isElevated,
-		size,
-	};
-
-	const classes = classnames(
-		'components-card',
-		isBorderless && 'is-borderless',
-		isElevated && 'is-elevated',
-		size && `is-size-${ size }`,
-		className
-	);
-
-	return (
-		<Provider value={ contextProps }>
-			<CardUI { ...additionalProps } className={ classes } />
-		</Provider>
-	);
-}
-
-Card.defaultProps = defaultProps;
-
-export default Card;
+export { default as Card } from './card';
diff --git a/packages/components/src/card/stories/_index.js b/packages/components/src/card/stories/_index.js
index 0f976e55a2a11..014f67f2517d8 100644
--- a/packages/components/src/card/stories/_index.js
+++ b/packages/components/src/card/stories/_index.js
@@ -6,7 +6,7 @@ import { text, boolean } from '@storybook/addon-knobs';
 /**
  * Internal dependencies
  */
-import Card from '../index';
+import { Card } from '../';
 import CardBody from '../body';
 import CardFooter from '../footer';
 import CardHeader from '../header';
diff --git a/packages/components/src/card/stories/body.js b/packages/components/src/card/stories/body.js
index e2c1d7d00bbcb..533e804ae6b5e 100644
--- a/packages/components/src/card/stories/body.js
+++ b/packages/components/src/card/stories/body.js
@@ -6,7 +6,7 @@ import { boolean, text } from '@storybook/addon-knobs';
 /**
  * Internal dependencies
  */
-import Card from '../index';
+import { Card } from '../';
 import CardBody from '../body';
 import { getCardStoryProps } from './_utils';
 
diff --git a/packages/components/src/card/stories/divider.js b/packages/components/src/card/stories/divider.js
index e793541a498e6..1a637095c36dd 100644
--- a/packages/components/src/card/stories/divider.js
+++ b/packages/components/src/card/stories/divider.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import Card from '../index';
+import { Card } from '../';
 import CardBody from '../body';
 import CardDivider from '../divider';
 import { getCardStoryProps } from './_utils';
diff --git a/packages/components/src/card/stories/footer.js b/packages/components/src/card/stories/footer.js
index 50e461aae8347..347cbbb8da84b 100644
--- a/packages/components/src/card/stories/footer.js
+++ b/packages/components/src/card/stories/footer.js
@@ -6,7 +6,7 @@ import { boolean, text } from '@storybook/addon-knobs';
 /**
  * Internal dependencies
  */
-import Card from '../index';
+import { Card } from '../';
 import CardFooter from '../footer';
 import Button from '../../button';
 import { FlexBlock, FlexItem } from '../../flex';
diff --git a/packages/components/src/card/stories/header.js b/packages/components/src/card/stories/header.js
index 63d37f7bc0514..8d04009b53a65 100644
--- a/packages/components/src/card/stories/header.js
+++ b/packages/components/src/card/stories/header.js
@@ -6,7 +6,7 @@ import { boolean, text } from '@storybook/addon-knobs';
 /**
  * Internal dependencies
  */
-import Card from '../index';
+import { Card } from '../';
 import CardHeader from '../header';
 import Button from '../../button';
 import { FlexBlock, FlexItem } from '../../flex';
diff --git a/packages/components/src/card/stories/media.js b/packages/components/src/card/stories/media.js
index 4d499b3067f7e..87d18c5c5415b 100644
--- a/packages/components/src/card/stories/media.js
+++ b/packages/components/src/card/stories/media.js
@@ -7,7 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import Card from '../index';
+import { Card } from '../';
 import CardBody from '../body';
 import CardFooter from '../footer';
 import CardHeader from '../header';
diff --git a/packages/components/src/card/test/index.js b/packages/components/src/card/test/index.js
index 16b4d3158971a..a9f15074e903f 100644
--- a/packages/components/src/card/test/index.js
+++ b/packages/components/src/card/test/index.js
@@ -6,7 +6,7 @@ import { mount, shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import Card from '../';
+import { Card } from '../';
 import CardBody from '../body';
 import CardDivider from '../divider';
 import CardFooter from '../footer';
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index dbf39333441b4..4078bec1ad938 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -25,7 +25,7 @@ export { default as BaseControl } from './base-control';
 export { default as __experimentalBoxControl } from './box-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
-export { default as Card } from './card';
+export { Card } from './card';
 export { default as CardBody } from './card/body';
 export { default as CardDivider } from './card/divider';
 export { default as CardFooter } from './card/footer';

From 12103005006d20f9a47ad574e5a2562927e8b287 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 9 Jun 2021 17:56:06 +0200
Subject: [PATCH 3/9] Move `<CardBody />` to `card-body/` subfolder

---
 docs/manifest.json                                          | 6 ++++++
 .../src/card/{docs/body.md => card-body/README.md}          | 0
 .../components/src/card/{body.js => card-body/index.js}     | 4 ++--
 packages/components/src/card/index.js                       | 1 +
 packages/components/src/card/stories/_index.js              | 3 +--
 packages/components/src/card/stories/body.js                | 3 +--
 packages/components/src/card/stories/divider.js             | 3 +--
 packages/components/src/card/stories/media.js               | 3 +--
 packages/components/src/card/test/body.js                   | 2 +-
 packages/components/src/card/test/index.js                  | 3 +--
 packages/components/src/index.js                            | 3 +--
 11 files changed, 16 insertions(+), 15 deletions(-)
 rename packages/components/src/card/{docs/body.md => card-body/README.md} (100%)
 rename packages/components/src/card/{body.js => card-body/index.js} (88%)

diff --git a/docs/manifest.json b/docs/manifest.json
index 309646ff11f29..4d44e2901c400 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -707,6 +707,12 @@
 		"markdown_source": "../packages/components/src/button/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "CardBody",
+		"slug": "card-body",
+		"markdown_source": "../packages/components/src/card/card-body/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Card",
 		"slug": "card",
diff --git a/packages/components/src/card/docs/body.md b/packages/components/src/card/card-body/README.md
similarity index 100%
rename from packages/components/src/card/docs/body.md
rename to packages/components/src/card/card-body/README.md
diff --git a/packages/components/src/card/body.js b/packages/components/src/card/card-body/index.js
similarity index 88%
rename from packages/components/src/card/body.js
rename to packages/components/src/card/card-body/index.js
index a297f585174b1..6a762463fcfe4 100644
--- a/packages/components/src/card/body.js
+++ b/packages/components/src/card/card-body/index.js
@@ -6,8 +6,8 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { BodyUI } from './styles';
-import { useCardContext } from './context';
+import { BodyUI } from '../styles';
+import { useCardContext } from '../context';
 
 export const defaultProps = {
 	isShady: false,
diff --git a/packages/components/src/card/index.js b/packages/components/src/card/index.js
index 3c3b401842f24..362b83b44f4b5 100644
--- a/packages/components/src/card/index.js
+++ b/packages/components/src/card/index.js
@@ -1 +1,2 @@
 export { default as Card } from './card';
+export { default as CardBody } from './card-body';
diff --git a/packages/components/src/card/stories/_index.js b/packages/components/src/card/stories/_index.js
index 014f67f2517d8..832af61701cfc 100644
--- a/packages/components/src/card/stories/_index.js
+++ b/packages/components/src/card/stories/_index.js
@@ -6,8 +6,7 @@ import { text, boolean } from '@storybook/addon-knobs';
 /**
  * Internal dependencies
  */
-import { Card } from '../';
-import CardBody from '../body';
+import { Card, CardBody } from '../';
 import CardFooter from '../footer';
 import CardHeader from '../header';
 import { getCardStoryProps } from './_utils';
diff --git a/packages/components/src/card/stories/body.js b/packages/components/src/card/stories/body.js
index 533e804ae6b5e..e67ac663bd50a 100644
--- a/packages/components/src/card/stories/body.js
+++ b/packages/components/src/card/stories/body.js
@@ -6,8 +6,7 @@ import { boolean, text } from '@storybook/addon-knobs';
 /**
  * Internal dependencies
  */
-import { Card } from '../';
-import CardBody from '../body';
+import { Card, CardBody } from '../';
 import { getCardStoryProps } from './_utils';
 
 export default { title: 'Components/Card/Body', component: CardBody };
diff --git a/packages/components/src/card/stories/divider.js b/packages/components/src/card/stories/divider.js
index 1a637095c36dd..ae21592ce1f27 100644
--- a/packages/components/src/card/stories/divider.js
+++ b/packages/components/src/card/stories/divider.js
@@ -1,8 +1,7 @@
 /**
  * Internal dependencies
  */
-import { Card } from '../';
-import CardBody from '../body';
+import { Card, CardBody } from '../';
 import CardDivider from '../divider';
 import { getCardStoryProps } from './_utils';
 
diff --git a/packages/components/src/card/stories/media.js b/packages/components/src/card/stories/media.js
index 87d18c5c5415b..bbc79fe5cb316 100644
--- a/packages/components/src/card/stories/media.js
+++ b/packages/components/src/card/stories/media.js
@@ -7,8 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { Card } from '../';
-import CardBody from '../body';
+import { Card, CardBody } from '../';
 import CardFooter from '../footer';
 import CardHeader from '../header';
 import CardMedia from '../media';
diff --git a/packages/components/src/card/test/body.js b/packages/components/src/card/test/body.js
index dbbe21cdd6028..a88823a216bbf 100644
--- a/packages/components/src/card/test/body.js
+++ b/packages/components/src/card/test/body.js
@@ -6,7 +6,7 @@ import { shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import CardBody from '../body';
+import { CardBody } from '../';
 
 describe( 'CardBody', () => {
 	describe( 'basic rendering', () => {
diff --git a/packages/components/src/card/test/index.js b/packages/components/src/card/test/index.js
index a9f15074e903f..6a1133e5f9002 100644
--- a/packages/components/src/card/test/index.js
+++ b/packages/components/src/card/test/index.js
@@ -6,8 +6,7 @@ import { mount, shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import { Card } from '../';
-import CardBody from '../body';
+import { Card, CardBody } from '../';
 import CardDivider from '../divider';
 import CardFooter from '../footer';
 import CardHeader from '../header';
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 4078bec1ad938..202e3a2616cc8 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -25,8 +25,7 @@ export { default as BaseControl } from './base-control';
 export { default as __experimentalBoxControl } from './box-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
-export { Card } from './card';
-export { default as CardBody } from './card/body';
+export { Card, CardBody } from './card';
 export { default as CardDivider } from './card/divider';
 export { default as CardFooter } from './card/footer';
 export { default as CardHeader } from './card/header';

From 0e58fa1426e8353bba3add2c300b4d197f96b821 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 9 Jun 2021 18:05:05 +0200
Subject: [PATCH 4/9] Move `<CardDivider />` to `card-divider/` subfolder

---
 docs/manifest.json                                          | 6 ++++++
 .../src/card/{docs/divider.md => card-divider/README.md}    | 0
 .../src/card/{divider.js => card-divider/index.js}          | 2 +-
 packages/components/src/card/index.js                       | 1 +
 packages/components/src/card/stories/divider.js             | 3 +--
 packages/components/src/card/test/divider.js                | 2 +-
 packages/components/src/card/test/index.js                  | 3 +--
 packages/components/src/index.js                            | 3 +--
 8 files changed, 12 insertions(+), 8 deletions(-)
 rename packages/components/src/card/{docs/divider.md => card-divider/README.md} (100%)
 rename packages/components/src/card/{divider.js => card-divider/index.js} (91%)

diff --git a/docs/manifest.json b/docs/manifest.json
index 4d44e2901c400..857143f984d2d 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -713,6 +713,12 @@
 		"markdown_source": "../packages/components/src/card/card-body/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "CardDivider",
+		"slug": "card-divider",
+		"markdown_source": "../packages/components/src/card/card-divider/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Card",
 		"slug": "card",
diff --git a/packages/components/src/card/docs/divider.md b/packages/components/src/card/card-divider/README.md
similarity index 100%
rename from packages/components/src/card/docs/divider.md
rename to packages/components/src/card/card-divider/README.md
diff --git a/packages/components/src/card/divider.js b/packages/components/src/card/card-divider/index.js
similarity index 91%
rename from packages/components/src/card/divider.js
rename to packages/components/src/card/card-divider/index.js
index 150339fa9a737..33e8a420ca0d6 100644
--- a/packages/components/src/card/divider.js
+++ b/packages/components/src/card/card-divider/index.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { DividerUI } from './styles';
+import { DividerUI } from '../styles';
 
 export function CardDivider( props ) {
 	const { className, ...additionalProps } = props;
diff --git a/packages/components/src/card/index.js b/packages/components/src/card/index.js
index 362b83b44f4b5..0ad217f305128 100644
--- a/packages/components/src/card/index.js
+++ b/packages/components/src/card/index.js
@@ -1,2 +1,3 @@
 export { default as Card } from './card';
 export { default as CardBody } from './card-body';
+export { default as CardDivider } from './card-divider';
diff --git a/packages/components/src/card/stories/divider.js b/packages/components/src/card/stories/divider.js
index ae21592ce1f27..a6eda85335f19 100644
--- a/packages/components/src/card/stories/divider.js
+++ b/packages/components/src/card/stories/divider.js
@@ -1,8 +1,7 @@
 /**
  * Internal dependencies
  */
-import { Card, CardBody } from '../';
-import CardDivider from '../divider';
+import { Card, CardBody, CardDivider } from '../';
 import { getCardStoryProps } from './_utils';
 
 export default { title: 'Components/Card/Divider', component: CardDivider };
diff --git a/packages/components/src/card/test/divider.js b/packages/components/src/card/test/divider.js
index 81f6012c9cd59..8d39242d9fa14 100644
--- a/packages/components/src/card/test/divider.js
+++ b/packages/components/src/card/test/divider.js
@@ -6,7 +6,7 @@ import { shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import CardDivider from '../divider';
+import { CardDivider } from '../';
 
 describe( 'CardDivider', () => {
 	describe( 'basic rendering', () => {
diff --git a/packages/components/src/card/test/index.js b/packages/components/src/card/test/index.js
index 6a1133e5f9002..5c3f9546e1a94 100644
--- a/packages/components/src/card/test/index.js
+++ b/packages/components/src/card/test/index.js
@@ -6,8 +6,7 @@ import { mount, shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import { Card, CardBody } from '../';
-import CardDivider from '../divider';
+import { Card, CardBody, CardDivider } from '../';
 import CardFooter from '../footer';
 import CardHeader from '../header';
 import CardMedia from '../media';
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 202e3a2616cc8..7c11a836c5800 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -25,8 +25,7 @@ export { default as BaseControl } from './base-control';
 export { default as __experimentalBoxControl } from './box-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
-export { Card, CardBody } from './card';
-export { default as CardDivider } from './card/divider';
+export { Card, CardBody, CardDivider } from './card';
 export { default as CardFooter } from './card/footer';
 export { default as CardHeader } from './card/header';
 export { default as CardMedia } from './card/media';

From 5c4d3cea5e46fb223bc4edad34291c6dcb67d9cb Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 9 Jun 2021 18:13:09 +0200
Subject: [PATCH 5/9] Move `<CardFooter />` to `card-footer/` subfolder

---
 docs/manifest.json                                          | 6 ++++++
 .../src/card/{docs/footer.md => card-footer/README.md}      | 0
 .../components/src/card/{footer.js => card-footer/index.js} | 4 ++--
 packages/components/src/card/index.js                       | 1 +
 packages/components/src/card/stories/_index.js              | 3 +--
 packages/components/src/card/stories/footer.js              | 3 +--
 packages/components/src/card/stories/media.js               | 3 +--
 packages/components/src/card/test/footer.js                 | 2 +-
 packages/components/src/card/test/index.js                  | 3 +--
 packages/components/src/index.js                            | 3 +--
 10 files changed, 15 insertions(+), 13 deletions(-)
 rename packages/components/src/card/{docs/footer.md => card-footer/README.md} (100%)
 rename packages/components/src/card/{footer.js => card-footer/index.js} (89%)

diff --git a/docs/manifest.json b/docs/manifest.json
index 857143f984d2d..4878680635711 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -719,6 +719,12 @@
 		"markdown_source": "../packages/components/src/card/card-divider/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "CardFooter",
+		"slug": "card-footer",
+		"markdown_source": "../packages/components/src/card/card-footer/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Card",
 		"slug": "card",
diff --git a/packages/components/src/card/docs/footer.md b/packages/components/src/card/card-footer/README.md
similarity index 100%
rename from packages/components/src/card/docs/footer.md
rename to packages/components/src/card/card-footer/README.md
diff --git a/packages/components/src/card/footer.js b/packages/components/src/card/card-footer/index.js
similarity index 89%
rename from packages/components/src/card/footer.js
rename to packages/components/src/card/card-footer/index.js
index 0a177464903c3..a54ff8dfc0c32 100644
--- a/packages/components/src/card/footer.js
+++ b/packages/components/src/card/card-footer/index.js
@@ -6,8 +6,8 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { FooterUI } from './styles';
-import { useCardContext } from './context';
+import { FooterUI } from '../styles';
+import { useCardContext } from '../context';
 
 export const defaultProps = {
 	isBorderless: false,
diff --git a/packages/components/src/card/index.js b/packages/components/src/card/index.js
index 0ad217f305128..60736cfb2f2c2 100644
--- a/packages/components/src/card/index.js
+++ b/packages/components/src/card/index.js
@@ -1,3 +1,4 @@
 export { default as Card } from './card';
 export { default as CardBody } from './card-body';
 export { default as CardDivider } from './card-divider';
+export { default as CardFooter } from './card-footer';
diff --git a/packages/components/src/card/stories/_index.js b/packages/components/src/card/stories/_index.js
index 832af61701cfc..3fcc079b3431e 100644
--- a/packages/components/src/card/stories/_index.js
+++ b/packages/components/src/card/stories/_index.js
@@ -6,8 +6,7 @@ import { text, boolean } from '@storybook/addon-knobs';
 /**
  * Internal dependencies
  */
-import { Card, CardBody } from '../';
-import CardFooter from '../footer';
+import { Card, CardBody, CardFooter } from '../';
 import CardHeader from '../header';
 import { getCardStoryProps } from './_utils';
 
diff --git a/packages/components/src/card/stories/footer.js b/packages/components/src/card/stories/footer.js
index 347cbbb8da84b..e33bc6acd02ca 100644
--- a/packages/components/src/card/stories/footer.js
+++ b/packages/components/src/card/stories/footer.js
@@ -6,8 +6,7 @@ import { boolean, text } from '@storybook/addon-knobs';
 /**
  * Internal dependencies
  */
-import { Card } from '../';
-import CardFooter from '../footer';
+import { Card, CardFooter } from '../';
 import Button from '../../button';
 import { FlexBlock, FlexItem } from '../../flex';
 import { getCardStoryProps } from './_utils';
diff --git a/packages/components/src/card/stories/media.js b/packages/components/src/card/stories/media.js
index bbc79fe5cb316..af8f91535ec14 100644
--- a/packages/components/src/card/stories/media.js
+++ b/packages/components/src/card/stories/media.js
@@ -7,8 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { Card, CardBody } from '../';
-import CardFooter from '../footer';
+import { Card, CardBody, CardFooter } from '../';
 import CardHeader from '../header';
 import CardMedia from '../media';
 import { getCardStoryProps } from './_utils';
diff --git a/packages/components/src/card/test/footer.js b/packages/components/src/card/test/footer.js
index bcd4308782437..88f9ac55402e6 100644
--- a/packages/components/src/card/test/footer.js
+++ b/packages/components/src/card/test/footer.js
@@ -6,7 +6,7 @@ import { shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import CardFooter from '../footer';
+import { CardFooter } from '../';
 
 describe( 'CardFooter', () => {
 	describe( 'basic rendering', () => {
diff --git a/packages/components/src/card/test/index.js b/packages/components/src/card/test/index.js
index 5c3f9546e1a94..261825e45fdc4 100644
--- a/packages/components/src/card/test/index.js
+++ b/packages/components/src/card/test/index.js
@@ -6,8 +6,7 @@ import { mount, shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import { Card, CardBody, CardDivider } from '../';
-import CardFooter from '../footer';
+import { Card, CardBody, CardDivider, CardFooter } from '../';
 import CardHeader from '../header';
 import CardMedia from '../media';
 
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 7c11a836c5800..8526fe9072559 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -25,8 +25,7 @@ export { default as BaseControl } from './base-control';
 export { default as __experimentalBoxControl } from './box-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
-export { Card, CardBody, CardDivider } from './card';
-export { default as CardFooter } from './card/footer';
+export { Card, CardBody, CardDivider, CardFooter } from './card';
 export { default as CardHeader } from './card/header';
 export { default as CardMedia } from './card/media';
 export { default as CheckboxControl } from './checkbox-control';

From 73818c6be0a3af40c56f24892d1748fcc13f277c Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 9 Jun 2021 18:34:48 +0200
Subject: [PATCH 6/9] Move `<CardHeader />` to `card-header/` subfolder

---
 docs/manifest.json                                          | 6 ++++++
 .../src/card/{docs/header.md => card-header/README.md}      | 0
 .../components/src/card/{header.js => card-header/index.js} | 4 ++--
 packages/components/src/card/index.js                       | 1 +
 packages/components/src/card/stories/_index.js              | 3 +--
 packages/components/src/card/stories/header.js              | 3 +--
 packages/components/src/card/stories/media.js               | 3 +--
 packages/components/src/card/test/header.js                 | 2 +-
 packages/components/src/card/test/index.js                  | 3 +--
 packages/components/src/index.js                            | 3 +--
 10 files changed, 15 insertions(+), 13 deletions(-)
 rename packages/components/src/card/{docs/header.md => card-header/README.md} (100%)
 rename packages/components/src/card/{header.js => card-header/index.js} (89%)

diff --git a/docs/manifest.json b/docs/manifest.json
index 4878680635711..8ecee97b4649e 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -725,6 +725,12 @@
 		"markdown_source": "../packages/components/src/card/card-footer/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "CardHeader",
+		"slug": "card-header",
+		"markdown_source": "../packages/components/src/card/card-header/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Card",
 		"slug": "card",
diff --git a/packages/components/src/card/docs/header.md b/packages/components/src/card/card-header/README.md
similarity index 100%
rename from packages/components/src/card/docs/header.md
rename to packages/components/src/card/card-header/README.md
diff --git a/packages/components/src/card/header.js b/packages/components/src/card/card-header/index.js
similarity index 89%
rename from packages/components/src/card/header.js
rename to packages/components/src/card/card-header/index.js
index 00b4e195036ca..7aa0296929a2f 100644
--- a/packages/components/src/card/header.js
+++ b/packages/components/src/card/card-header/index.js
@@ -6,8 +6,8 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { HeaderUI } from './styles';
-import { useCardContext } from './context';
+import { HeaderUI } from '../styles';
+import { useCardContext } from '../context';
 
 export const defaultProps = {
 	isBorderless: false,
diff --git a/packages/components/src/card/index.js b/packages/components/src/card/index.js
index 60736cfb2f2c2..8aa9df111b072 100644
--- a/packages/components/src/card/index.js
+++ b/packages/components/src/card/index.js
@@ -2,3 +2,4 @@ export { default as Card } from './card';
 export { default as CardBody } from './card-body';
 export { default as CardDivider } from './card-divider';
 export { default as CardFooter } from './card-footer';
+export { default as CardHeader } from './card-header';
diff --git a/packages/components/src/card/stories/_index.js b/packages/components/src/card/stories/_index.js
index 3fcc079b3431e..be87a44e6d6a7 100644
--- a/packages/components/src/card/stories/_index.js
+++ b/packages/components/src/card/stories/_index.js
@@ -6,8 +6,7 @@ import { text, boolean } from '@storybook/addon-knobs';
 /**
  * Internal dependencies
  */
-import { Card, CardBody, CardFooter } from '../';
-import CardHeader from '../header';
+import { Card, CardBody, CardFooter, CardHeader } from '../';
 import { getCardStoryProps } from './_utils';
 
 export default { title: 'Components/Card', component: Card };
diff --git a/packages/components/src/card/stories/header.js b/packages/components/src/card/stories/header.js
index 8d04009b53a65..67a413a6db94b 100644
--- a/packages/components/src/card/stories/header.js
+++ b/packages/components/src/card/stories/header.js
@@ -6,8 +6,7 @@ import { boolean, text } from '@storybook/addon-knobs';
 /**
  * Internal dependencies
  */
-import { Card } from '../';
-import CardHeader from '../header';
+import { Card, CardHeader } from '../';
 import Button from '../../button';
 import { FlexBlock, FlexItem } from '../../flex';
 import { getCardStoryProps } from './_utils';
diff --git a/packages/components/src/card/stories/media.js b/packages/components/src/card/stories/media.js
index af8f91535ec14..25e492f132fd7 100644
--- a/packages/components/src/card/stories/media.js
+++ b/packages/components/src/card/stories/media.js
@@ -7,8 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { Card, CardBody, CardFooter } from '../';
-import CardHeader from '../header';
+import { Card, CardBody, CardFooter, CardHeader } from '../';
 import CardMedia from '../media';
 import { getCardStoryProps } from './_utils';
 
diff --git a/packages/components/src/card/test/header.js b/packages/components/src/card/test/header.js
index 3323658aaa7b6..440ab1707e188 100644
--- a/packages/components/src/card/test/header.js
+++ b/packages/components/src/card/test/header.js
@@ -6,7 +6,7 @@ import { shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import CardHeader from '../header';
+import { CardHeader } from '../';
 
 describe( 'CardHeader', () => {
 	describe( 'basic rendering', () => {
diff --git a/packages/components/src/card/test/index.js b/packages/components/src/card/test/index.js
index 261825e45fdc4..414a7c96a172c 100644
--- a/packages/components/src/card/test/index.js
+++ b/packages/components/src/card/test/index.js
@@ -6,8 +6,7 @@ import { mount, shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import { Card, CardBody, CardDivider, CardFooter } from '../';
-import CardHeader from '../header';
+import { Card, CardBody, CardDivider, CardFooter, CardHeader } from '../';
 import CardMedia from '../media';
 
 describe( 'Card', () => {
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 8526fe9072559..d8191761aeac6 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -25,8 +25,7 @@ export { default as BaseControl } from './base-control';
 export { default as __experimentalBoxControl } from './box-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
-export { Card, CardBody, CardDivider, CardFooter } from './card';
-export { default as CardHeader } from './card/header';
+export { Card, CardBody, CardDivider, CardFooter, CardHeader } from './card';
 export { default as CardMedia } from './card/media';
 export { default as CheckboxControl } from './checkbox-control';
 export { default as ClipboardButton } from './clipboard-button';

From 91f3d9fe0670d71b2da16297c9400cb44f85ed3b Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 9 Jun 2021 18:39:55 +0200
Subject: [PATCH 7/9] Move `<CardMedia />` to `card-media/` subfolder

---
 docs/manifest.json                                          | 6 ++++++
 .../src/card/{docs/media.md => card-media/README.md}        | 0
 .../components/src/card/{media.js => card-media/index.js}   | 2 +-
 packages/components/src/card/index.js                       | 1 +
 packages/components/src/card/stories/media.js               | 3 +--
 packages/components/src/card/test/index.js                  | 3 +--
 packages/components/src/card/test/media.js                  | 2 +-
 packages/components/src/index.js                            | 3 +--
 8 files changed, 12 insertions(+), 8 deletions(-)
 rename packages/components/src/card/{docs/media.md => card-media/README.md} (100%)
 rename packages/components/src/card/{media.js => card-media/index.js} (90%)

diff --git a/docs/manifest.json b/docs/manifest.json
index 8ecee97b4649e..3369ab5d7afad 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -731,6 +731,12 @@
 		"markdown_source": "../packages/components/src/card/card-header/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "CardMedia",
+		"slug": "card-media",
+		"markdown_source": "../packages/components/src/card/card-media/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Card",
 		"slug": "card",
diff --git a/packages/components/src/card/docs/media.md b/packages/components/src/card/card-media/README.md
similarity index 100%
rename from packages/components/src/card/docs/media.md
rename to packages/components/src/card/card-media/README.md
diff --git a/packages/components/src/card/media.js b/packages/components/src/card/card-media/index.js
similarity index 90%
rename from packages/components/src/card/media.js
rename to packages/components/src/card/card-media/index.js
index 41bd93635af30..4458d74cda351 100644
--- a/packages/components/src/card/media.js
+++ b/packages/components/src/card/card-media/index.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { MediaUI } from './styles';
+import { MediaUI } from '../styles';
 
 export function CardMedia( props ) {
 	const { className, ...additionalProps } = props;
diff --git a/packages/components/src/card/index.js b/packages/components/src/card/index.js
index 8aa9df111b072..7101c549e9bce 100644
--- a/packages/components/src/card/index.js
+++ b/packages/components/src/card/index.js
@@ -3,3 +3,4 @@ export { default as CardBody } from './card-body';
 export { default as CardDivider } from './card-divider';
 export { default as CardFooter } from './card-footer';
 export { default as CardHeader } from './card-header';
+export { default as CardMedia } from './card-media';
diff --git a/packages/components/src/card/stories/media.js b/packages/components/src/card/stories/media.js
index 25e492f132fd7..db7597d9c6b57 100644
--- a/packages/components/src/card/stories/media.js
+++ b/packages/components/src/card/stories/media.js
@@ -7,8 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { Card, CardBody, CardFooter, CardHeader } from '../';
-import CardMedia from '../media';
+import { Card, CardBody, CardFooter, CardHeader, CardMedia } from '../';
 import { getCardStoryProps } from './_utils';
 
 export default { title: 'Components/Card/Media', component: CardMedia };
diff --git a/packages/components/src/card/test/index.js b/packages/components/src/card/test/index.js
index 414a7c96a172c..8c02bd19a28b9 100644
--- a/packages/components/src/card/test/index.js
+++ b/packages/components/src/card/test/index.js
@@ -6,8 +6,7 @@ import { mount, shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import { Card, CardBody, CardDivider, CardFooter, CardHeader } from '../';
-import CardMedia from '../media';
+import { Card, CardBody, CardDivider, CardFooter, CardHeader, CardMedia } from '../';
 
 describe( 'Card', () => {
 	describe( 'basic rendering', () => {
diff --git a/packages/components/src/card/test/media.js b/packages/components/src/card/test/media.js
index 935134d281dc2..c9e118f68e6df 100644
--- a/packages/components/src/card/test/media.js
+++ b/packages/components/src/card/test/media.js
@@ -6,7 +6,7 @@ import { shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import CardMedia from '../media';
+import { CardMedia } from '../';
 
 describe( 'CardMedia', () => {
 	describe( 'basic rendering', () => {
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index d8191761aeac6..713b8fcd56c41 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -25,8 +25,7 @@ export { default as BaseControl } from './base-control';
 export { default as __experimentalBoxControl } from './box-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
-export { Card, CardBody, CardDivider, CardFooter, CardHeader } from './card';
-export { default as CardMedia } from './card/media';
+export { Card, CardBody, CardDivider, CardFooter, CardHeader, CardMedia } from './card';
 export { default as CheckboxControl } from './checkbox-control';
 export { default as ClipboardButton } from './clipboard-button';
 export { default as __experimentalColorEdit } from './color-edit';

From 9dcd6b3a4fdde9e1d313691adf4dac2983a8773c Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 9 Jun 2021 19:06:17 +0200
Subject: [PATCH 8/9] Update READMEs internal links

---
 packages/components/src/card/card-body/README.md    |  2 +-
 packages/components/src/card/card-divider/README.md |  2 +-
 packages/components/src/card/card-footer/README.md  |  8 ++++----
 packages/components/src/card/card-header/README.md  |  8 ++++----
 packages/components/src/card/card-media/README.md   |  2 +-
 packages/components/src/card/card/README.md         | 10 +++++-----
 6 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/components/src/card/card-body/README.md b/packages/components/src/card/card-body/README.md
index f0d95287aed78..73b450f7604d8 100644
--- a/packages/components/src/card/card-body/README.md
+++ b/packages/components/src/card/card-body/README.md
@@ -32,4 +32,4 @@ Determines the amount of padding within the component.
 -   Required: No
 -   Default: `medium`
 
-Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from context.
+Note: This component is connected to [`<Card />`'s Context](../card/README.md#context). Passing props directly to this component will override the props derived from context.
diff --git a/packages/components/src/card/card-divider/README.md b/packages/components/src/card/card-divider/README.md
index feac94af52956..05dd2207a38e3 100644
--- a/packages/components/src/card/card-divider/README.md
+++ b/packages/components/src/card/card-divider/README.md
@@ -1,6 +1,6 @@
 # CardDivider
 
-CardDivider renders an optional divider within a [`<Card />`](../).
+CardDivider renders an optional divider within a [`<Card />`](../card/README.md).
 
 ## Usage
 
diff --git a/packages/components/src/card/card-footer/README.md b/packages/components/src/card/card-footer/README.md
index 22745bff7f27e..0a350c6f2c0b1 100644
--- a/packages/components/src/card/card-footer/README.md
+++ b/packages/components/src/card/card-footer/README.md
@@ -1,6 +1,6 @@
 # CardFooter
 
-CardFooter renders an optional footer within a [`<Card />`](../).
+CardFooter renders an optional footer within a [`<Card />`](../card/README.md).
 
 ## Usage
 
@@ -16,7 +16,7 @@ const Example = () => (
 
 ### Flex
 
-Underneath, CardFooter uses the layout component [`<Flex/>`](../../flex/README.md). This improves the alignment of child items within the component.
+Underneath, CardFooter uses the layout component [`<Flex/>`](../../flex/flex/README.md). This improves the alignment of child items within the component.
 
 ```jsx
 import {
@@ -39,7 +39,7 @@ const Example = () => (
 );
 ```
 
-Check out [the documentation](../../flex/README.md) on `<Flex/>` for more details on layout composition.
+Check out [the documentation](../../flex/flex/README.md) on `<Flex/>` for more details on layout composition.
 
 ## Props
 
@@ -75,4 +75,4 @@ Determines the amount of padding within the component.
 -   Required: No
 -   Default: `medium`
 
-Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from context.
+Note: This component is connected to [`<Card />`'s Context](../card/README.md#context). Passing props directly to this component will override the props derived from context.
diff --git a/packages/components/src/card/card-header/README.md b/packages/components/src/card/card-header/README.md
index b3597d0376aaa..911c8fb2892bf 100644
--- a/packages/components/src/card/card-header/README.md
+++ b/packages/components/src/card/card-header/README.md
@@ -1,6 +1,6 @@
 # CardHeader
 
-CardHeader renders an optional header within a [`<Card />`](../).
+CardHeader renders an optional header within a [`<Card />`](../card/README.md).
 
 ## Usage
 
@@ -16,7 +16,7 @@ const Example = () => (
 
 ### Flex
 
-Underneath, CardHeader uses the layout component [`<Flex/>`](../../flex/README.md). This improves the alignment of child items within the component.
+Underneath, CardHeader uses the layout component [`<Flex/>`](../../flex/flex/README.md). This improves the alignment of child items within the component.
 
 ```jsx
 import {
@@ -39,7 +39,7 @@ const Example = () => (
 );
 ```
 
-Check out [the documentation](../../flex/README.md) on `<Flex/>` for more details on layout composition.
+Check out [the documentation](../../flex/flex/README.md) on `<Flex/>` for more details on layout composition.
 
 ## Props
 
@@ -75,4 +75,4 @@ Determines the amount of padding within the component.
 -   Required: No
 -   Default: `medium`
 
-Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from context.
+Note: This component is connected to [`<Card />`'s Context](../card/README.md#context). Passing props directly to this component will override the props derived from context.
diff --git a/packages/components/src/card/card-media/README.md b/packages/components/src/card/card-media/README.md
index 980e32127792e..a93fd81ff8a68 100644
--- a/packages/components/src/card/card-media/README.md
+++ b/packages/components/src/card/card-media/README.md
@@ -1,6 +1,6 @@
 # CardMedia
 
-CardMedia provides a container for media elements, and renders within a [`<Card />`](../).
+CardMedia provides a container for media elements, and renders within a [`<Card />`](../card/README.md).
 
 ## Usage
 
diff --git a/packages/components/src/card/card/README.md b/packages/components/src/card/card/README.md
index c273891702849..6a755a167eb22 100644
--- a/packages/components/src/card/card/README.md
+++ b/packages/components/src/card/card/README.md
@@ -44,11 +44,11 @@ Determines the amount of padding within the component.
 
 This component provides a collection of sub-component that can be used to compose various interfaces.
 
--   [`<CardBody />`](./docs/body.md)
--   [`<CardDivider />`](./docs/divider.md)
--   [`<CardFooter />`](./docs/footer.md)
--   [`<CardHeader />`](./docs/header.md)
--   [`<CardMedia />`](./docs/media.md)
+-   [`<CardBody />`](../card-body/README.md)
+-   [`<CardDivider />`](../card-divider/README.md)
+-   [`<CardFooter />`](../card-footer/README.md)
+-   [`<CardHeader />`](../card-header/README.md)
+-   [`<CardMedia />`](../card-media/README.md)
 
 ### Sub-Components Example
 

From 564c683c2a3ff5321d39265075555b995f0746e5 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 10 Jun 2021 15:05:43 +0200
Subject: [PATCH 9/9] Format js

---
 packages/components/src/card/test/index.js | 9 ++++++++-
 packages/components/src/index.js           | 9 ++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/card/test/index.js b/packages/components/src/card/test/index.js
index 8c02bd19a28b9..2ce59a9fa7f31 100644
--- a/packages/components/src/card/test/index.js
+++ b/packages/components/src/card/test/index.js
@@ -6,7 +6,14 @@ import { mount, shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import { Card, CardBody, CardDivider, CardFooter, CardHeader, CardMedia } from '../';
+import {
+	Card,
+	CardBody,
+	CardDivider,
+	CardFooter,
+	CardHeader,
+	CardMedia,
+} from '../';
 
 describe( 'Card', () => {
 	describe( 'basic rendering', () => {
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 713b8fcd56c41..6a6097486e630 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -25,7 +25,14 @@ export { default as BaseControl } from './base-control';
 export { default as __experimentalBoxControl } from './box-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
-export { Card, CardBody, CardDivider, CardFooter, CardHeader, CardMedia } from './card';
+export {
+	Card,
+	CardBody,
+	CardDivider,
+	CardFooter,
+	CardHeader,
+	CardMedia,
+} from './card';
 export { default as CheckboxControl } from './checkbox-control';
 export { default as ClipboardButton } from './clipboard-button';
 export { default as __experimentalColorEdit } from './color-edit';