feat: mini resource component (#1509)

README.md

@@ -1964,6 +1964,79 @@ Use `slots` to identify the markdown content:
 Use `theme` to match the text color to your color scheme. Defaults to `lightest`.
 
 Use `width` to define the size of the block. Supported values are `100%`, `50%` and `33%`.
+### MiniResourceCard
+
+Used to display the Product information along with the images/icons and headings, with link in a concise and visually appealing way.
+
+![miniresource card](docs/images/mini-resource.png)
+
+```
+<MiniResourceCard slots="image,heading,text,link" repeat="6" theme="lightest" inRow="3" textColor="#427dcd"/>
+
+![Forge the path to customer success](./S_AniChangeBackground.png)
+
+### Remove Background
+
+To remove the background from an image
+
+[Adobe I/O](https://adobe.io)
+
+![Forge the path to customer success](./S_AniConvertToGIF.png)
+
+### Convert to GIF
+
+To convert the video to the GIF format
+
+[Adobe I/O](https://adobe.io)
+
+![Forge the path to customer success](./S_AniCrop.png)
+
+### Crop Image
+
+To crop the image
+
+[Adobe I/O](https://adobe.io)
+
+![Forge the path to customer success](./S_AniMergeVideo.png)
+
+### Merge Video
+
+Merge two or more videos
+
+[Adobe I/O](https://adobe.io)
+
+![Forge the path to customer success](./S_AniResizeVideo.png)
+
+### Resize Video
+
+To resize the video
+
+[Adobe I/O](https://adobe.io)
+
+![Forge the path to customer success](./S_AniTrimVideo.png)
+
+### Trim Video
+
+Trimming the video
+
+[Adobe I/O](https://adobe.io)
+
+```
+
+Use `slots` to identify the markdown content:
+
+- `image` (required)
+- `heading` (optional)
+- `text` (optional)
+- `link` (optional)
+
+Use `theme` to match the text color to your color scheme. Defaults to `dark`.
+
+Use `repeat` to define how many code sections are part.
+
+Use `textColor` to define the color of the text. The preset is black.
+
+Use `inRow` to define the number of mini cards in a row
 
 ### Carousel
 

example/src/pages/index.md

@@ -29,6 +29,7 @@ import TeaserComp from './teaser/teasercomp.md'
 import VideoCarouselComp from './videoCarousel/videoCarousel.md'
 import blackbg from "./teaser/black_power.jpg"
 import TextBlockComp from "./textblock/textblock.md"
+import MiniResource from "./miniresource_block/index.md"
 
 <Hero slots="image, heading, text" background="rgb(64, 34, 138)" hideBreadcrumbNav={false}/>
 
@@ -161,6 +162,8 @@ Accordion item is to expand and collapse the content by clicking the icon. By de
 
 <TextBlockComp />
 
+<MiniResource />
+
 ## Inline Alerts {#Categories}
 
 These are the five types of inline alerts you can use.

example/src/pages/miniresource_block/index.md

@@ -0,0 +1,51 @@
+<MiniResourceCard slots="image,heading,text,link" repeat="6" theme="lightest" inRow="3" textColor="#427dcd"/>
+
+![Forge the path to customer success](./S_AniChangeBackground.png)
+
+### Remove Background
+
+To remove the background from an image
+
+[Adobe I/O](https://adobe.io)
+
+![Forge the path to customer success](./S_AniConvertToGIF.png)
+
+### Convert to GIF
+
+To convert the video to the GIF format
+
+[Adobe I/O](https://adobe.io)
+
+![Forge the path to customer success](./S_AniCrop.png)
+
+### Crop Image
+
+To crop the image
+
+[Adobe I/O](https://adobe.io)
+
+![Forge the path to customer success](./S_AniMergeVideo.png)
+
+### Merge Video
+
+Merge two or more videos
+
+[Adobe I/O](https://adobe.io)
+
+![Forge the path to customer success](./S_AniResizeVideo.png)
+
+### Resize Video
+
+To resize the video
+
+[Adobe I/O](https://adobe.io)
+
+![Forge the path to customer success](./S_AniTrimVideo.png)
+
+### Trim Video
+
+Trimming the video
+
+[Adobe I/O](https://adobe.io)
+
+

packages/gatsby-theme-aio/src/components/MDXFilter/MDXBlocks.js

@@ -42,8 +42,9 @@ import { ProductCardGrid } from '../ProductCardGrid';
 import { OldProductCardGrid } from '../OldProductCardGrid';
 import { AnchorButtonGroup } from '../AnchorButtonGroup';
 import { DCSummaryBlock } from '../DCSummaryBlock';
-import {TeaserBlock} from "../TeaserBlock";
+import { TeaserBlock } from "../TeaserBlock";
 import { VideoCarousel } from '../VideoCarousel';
+import { MiniResourceCard } from '../MiniResourceCard';
 export const MDXBlocks = {
   Hero,
   DiscoverBlock,
@@ -78,5 +79,6 @@ export const MDXBlocks = {
   Carousel,
   AnchorButtonGroup,
   DCSummaryBlock,
-  VideoCarousel
+  VideoCarousel,
+  MiniResourceCard
 };