adding an overview page for cards

apps/vue-storybook/.percy.yml

@@ -48,7 +48,7 @@ storybook:
       'Components/Base/BaseModal: Nested',
       'Components/Base/BaseSwimlane: Base Story',
       'Components/Base/BaseVideo: Base Story',
-      'Components/Blocks/BlockCircleImageCard: Base Story',
+      'Components/Cards/BlockCircleImageCard: Base Story',
       'Components/Blocks/BlockCta: Base Story',
       'Components/Blocks/BlockIframeEmbed: Lazy Load',
       'Components/Blocks/BlockImageCarousel/BlockImageCarouselItem: BlockImageCarouselItem',

packages/vue/src/components/BlockLinkTile/BlockLinkTile.stories.js

@@ -33,7 +33,7 @@ export default {
 export const BlockLinkTileData = {
   card: {
     url: '/topics/placeholder-slug-1',
-    title: 'How engineers at NASA-JPL persevered to develop a ventilator',
+    title: 'Lorem ipsum dolor',
     label: 'Solar System',
     thumbnailImage: {
       src: {

packages/vue/src/docs/overviews/cards.docs.mdx

@@ -0,0 +1,81 @@
+import { Meta } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+import * as BlockCardGridItemStories from './../../components/BlockCardGridItem/BlockCardGridItem.stories'
+import * as BlockCircleImageCardStories from './../../components/BlockCircleImageCard/BlockCircleImageCard.stories'
+import * as BlockLinkCardStories from './../../components/BlockLinkCard/BlockLinkCard.stories'
+import * as BlockLinkTileStories from './../../components/BlockLinkTile/BlockLinkTile.stories'
+
+<Meta title="Components/Cards/Overview" />
+
+# Card Components
+
+- [Carousel Cards](#carousel)
+- [Grid Cards](#grid)
+- [Reserved-use Cards](#reserved)
+
+  <br />
+
+  <br />
+
+<span id="carousel"></span>
+
+## Carousel Cards
+
+These cards are interchangeable within `MixinCarousel`.
+
+<br />
+
+<ComponentList
+  components={[
+    {
+      heading: 'BlockLinkCard',
+      meta: BlockLinkCardStories,
+      path: '/story/components-cards-blocklinkcard--base-story',
+      fullWidth: true
+    },
+    {
+      heading: 'BlockLinkTile',
+      meta: BlockLinkTileStories,
+      path: '/story/components-cards-blocklinktile--base-story',
+      fullWidth: true
+    }
+  ]}
+/>
+
+<span id="carousel"></span>
+
+## Grid Cards
+
+These cards can be used to create a grid of cards.
+
+<br />
+
+<ComponentList
+  components={[
+    {
+      heading: 'BlockCardGridItem',
+      meta: BlockCardGridItemStories,
+      customDescription: 'The link is optional',
+      path: '/story/components-cards-blockcardgriditem--base-story',
+      fullWidth: true
+    }
+  ]}
+/>
+
+## Reserved-use Cards
+
+These cards were built for specific use-cases, but that does not exclude them from being re-used for other purposes.
+
+<br />
+
+<ComponentList
+  components={[
+    {
+      heading: 'BlockCircleImageCard',
+      meta: BlockCircleImageCardStories,
+      path: '/story/components-cards-blockcircleimagecard--base-story',
+      fullWidth: true,
+      customDescription: 'Used in the Timeline'
+    }
+  ]}
+/>