From caccff8d7c8bf09618609fa296ec0ef3d903946f Mon Sep 17 00:00:00 2001 From: BaskarMitrah Date: Tue, 7 Jul 2026 15:31:42 +0530 Subject: [PATCH 1/3] added examples for the info card --- src/pages/blocks/infocard/index.md | 58 ++++++++++++++++++ .../blocks/infocard/infocard-with-articles.md | 35 +++++++++++ .../infocard/infocard-with-wide-image.md | 60 +++++++++++++++++++ src/pages/config.md | 3 + 4 files changed, 156 insertions(+) create mode 100644 src/pages/blocks/infocard/index.md create mode 100644 src/pages/blocks/infocard/infocard-with-articles.md create mode 100644 src/pages/blocks/infocard/infocard-with-wide-image.md diff --git a/src/pages/blocks/infocard/index.md b/src/pages/blocks/infocard/index.md new file mode 100644 index 0000000..6fabb53 --- /dev/null +++ b/src/pages/blocks/infocard/index.md @@ -0,0 +1,58 @@ +--- +title: InfoCard Block +description: Displays large info cards with an image, heading, and descriptive text. +--- + +# InfoCard Block + +The InfoCard Block displays large cards with an image at the top, followed by a heading and descriptive text. + +## Syntax + +```markdown + + +![](./_image_path) + +### Heading 1 + +Content 1 + +![](./_image_path) + +### [Heading 2](https://adobe.com) + +Content 2 +``` + +## Parameters + +- **slots**: Defines the content structure of each info card. + - `"image, heading, text"` - Displays an image, heading, and text. + +- **repeat**: Specifies the number of info cards to display. + - Set this value to match the number of content blocks provided. + +## Content Structure + +Each info card should contain the following content in the specified order: + +1. **Image**: An image that represents the info card. +2. **Heading**: A heading that serves as the title of the info card. You can use the heading with or without a link. If a link is provided, the entire info card becomes clickable and navigates to the specified URL. +3. **Text**: A paragraph that describes the information, features, or benefits of the card. + +## Example + + + +![](../../assets/column.jpg) + +### Heading 1 + +This is the sample description for the info card content one. Add details about the crad features, benefits, and use cases to help users understand what this product offers. + +![](../../assets/column.jpg) + +### [Heading 2](https://adobe.com) + +This is the sample description for the info card content two. Add details about the crad features, benefits, and use cases to help users understand what this product offers. \ No newline at end of file diff --git a/src/pages/blocks/infocard/infocard-with-articles.md b/src/pages/blocks/infocard/infocard-with-articles.md new file mode 100644 index 0000000..1c32bcf --- /dev/null +++ b/src/pages/blocks/infocard/infocard-with-articles.md @@ -0,0 +1,35 @@ +--- +title: InfoCard Block with Articles +description: Displays large info cards generated from article links using the article's image, title, and description. +--- + +# InfoCard Block with Articles + +The InfoCard Block with Articles automatically generates info cards from the provided article links. Each card displays the article's image, title, and description. + +## Syntax + +```markdown + + +- [Blog 1](https://blog-link) +- [Blog 2](https://blog-link) +``` + +## Parameters + +- **slots**: Defines the content structure for the InfoCard block. + - `"articles"` - Automatically generates info cards from the metadata of the provided article links. + +- **wide**: By default, images are displayed with a 4:3 aspect ratio. Add the `wide` attribute to display images with a 16:9 aspect ratio. + +## Content Structure + +The `articles` slot accepts a list of article URLs. The InfoCard block automatically retrieves the article metadata, including the image, title, and description, and displays it as an info card. + +## Example + + + +- [Blog 1](https://blog.developer.adobe.com/en/publish/2026/05/how-to-get-your-adobe-express-add-on-approved-avoiding-the-most-common-rejections) +- [Blog 2](https://blog.developer.adobe.com/en/publish/2026/05/help-your-adobe-express-add-on-reach-enterprise-users-with-granular-admin-approvals) diff --git a/src/pages/blocks/infocard/infocard-with-wide-image.md b/src/pages/blocks/infocard/infocard-with-wide-image.md new file mode 100644 index 0000000..c2bef79 --- /dev/null +++ b/src/pages/blocks/infocard/infocard-with-wide-image.md @@ -0,0 +1,60 @@ +--- +title: InfoCard Block with Wide Image +description: Displays large info cards with a wide 16:9 image, followed by a heading and descriptive text. +--- + +# InfoCard Block with Wide Image + +The InfoCard Block with Wide Image displays large cards with a 16:9 aspect ratio image at the top, followed by a heading and descriptive text. + +## Syntax + +```markdown + + +![](./_image_path) + +### Heading 1 + +Content 1 + +![](./_image_path) + +### [Heading 2](https://adobe.com) + +Content 2 +``` + +## Parameters + +- **slots**: Defines the content structure of each info card. + - `"image, heading, text"` - Displays an image, heading, and text. + +- **repeat**: Specifies the number of info cards to display. + - Set this value to match the number of content blocks provided. + +- **wide**: Images use a 4:3 aspect ratio by default. Add wide for a 16:9 aspect ratio. + +## Content Structure + +Each info card should contain the following content in the specified order: + +1. **Image**: An image that represents the info card. +2. **Heading**: A heading that serves as the title of the info card. You can use the heading with or without a link. If a link is provided, the entire info card becomes clickable and navigates to the specified URL. +3. **Text**: A paragraph that describes the information, features, or benefits of the card. + +## Example + + + +![](../../assets/column.jpg) + +### Heading 1 + +This is the sample description for the info card content one. Add details about the crad features, benefits, and use cases to help users understand what this product offers. + +![](../../assets/column.jpg) + +### [Heading 2](https://adobe.com) + +This is the sample description for the info card content two. Add details about the crad features, benefits, and use cases to help users understand what this product offers. \ No newline at end of file diff --git a/src/pages/config.md b/src/pages/config.md index 49430a1..b071d14 100644 --- a/src/pages/config.md +++ b/src/pages/config.md @@ -65,6 +65,9 @@ - [Fragment](/blocks/fragment/index.md) - [IFrame](/blocks/iframe/index.md) - [Image](/blocks/image/index.md) + - [InfoCard](/blocks/infocard/index.md) + - [InfoCard with wide image](/blocks/infocard/infocard-with-wide-image.md) + - [Info Card with articles](/blocks/infocard/infocard-with-articles.md) - [Inline Alert](/blocks/inline-alert/index.md) - [Inline Code](/blocks/inline-code/index.md) - [Links](/blocks/links/index.md) From 13aa913fa68def1154751cc1990a5c86843a6e1e Mon Sep 17 00:00:00 2001 From: BaskarMitrah Date: Wed, 8 Jul 2026 11:30:42 +0530 Subject: [PATCH 2/3] fix : typo mistakes --- src/pages/blocks/infocard/index.md | 12 ++++++------ .../blocks/infocard/infocard-with-wide-image.md | 12 ++++++------ src/pages/config.md | 2 +- src/pages/eds-release/index.md | 4 ++-- 4 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/pages/blocks/infocard/index.md b/src/pages/blocks/infocard/index.md index 6fabb53..692de36 100644 --- a/src/pages/blocks/infocard/index.md +++ b/src/pages/blocks/infocard/index.md @@ -10,15 +10,15 @@ The InfoCard Block displays large cards with an image at the top, followed by a ## Syntax ```markdown - + -![](./_image_path) +![Alt text](path/to/image.png) ### Heading 1 Content 1 -![](./_image_path) +![Alt text](path/to/image.png) ### [Heading 2](https://adobe.com) @@ -43,16 +43,16 @@ Each info card should contain the following content in the specified order: ## Example - + ![](../../assets/column.jpg) ### Heading 1 -This is the sample description for the info card content one. Add details about the crad features, benefits, and use cases to help users understand what this product offers. +This is the sample description for the info card content one. Add details about the card features, benefits, and use cases to help users understand what this product offers. ![](../../assets/column.jpg) ### [Heading 2](https://adobe.com) -This is the sample description for the info card content two. Add details about the crad features, benefits, and use cases to help users understand what this product offers. \ No newline at end of file +This is the sample description for the info card content two. Add details about the card features, benefits, and use cases to help users understand what this product offers. \ No newline at end of file diff --git a/src/pages/blocks/infocard/infocard-with-wide-image.md b/src/pages/blocks/infocard/infocard-with-wide-image.md index c2bef79..30ef10e 100644 --- a/src/pages/blocks/infocard/infocard-with-wide-image.md +++ b/src/pages/blocks/infocard/infocard-with-wide-image.md @@ -10,15 +10,15 @@ The InfoCard Block with Wide Image displays large cards with a 16:9 aspect ratio ## Syntax ```markdown - + -![](./_image_path) +![Alt text](path/to/image.png) ### Heading 1 Content 1 -![](./_image_path) +![Alt text](path/to/image.png) ### [Heading 2](https://adobe.com) @@ -45,16 +45,16 @@ Each info card should contain the following content in the specified order: ## Example - + ![](../../assets/column.jpg) ### Heading 1 -This is the sample description for the info card content one. Add details about the crad features, benefits, and use cases to help users understand what this product offers. +This is the sample description for the info card content one. Add details about the card features, benefits, and use cases to help users understand what this product offers. ![](../../assets/column.jpg) ### [Heading 2](https://adobe.com) -This is the sample description for the info card content two. Add details about the crad features, benefits, and use cases to help users understand what this product offers. \ No newline at end of file +This is the sample description for the info card content two. Add details about the card features, benefits, and use cases to help users understand what this product offers. \ No newline at end of file diff --git a/src/pages/config.md b/src/pages/config.md index b071d14..bbf35a0 100644 --- a/src/pages/config.md +++ b/src/pages/config.md @@ -67,7 +67,7 @@ - [Image](/blocks/image/index.md) - [InfoCard](/blocks/infocard/index.md) - [InfoCard with wide image](/blocks/infocard/infocard-with-wide-image.md) - - [Info Card with articles](/blocks/infocard/infocard-with-articles.md) + - [InfoCard with articles](/blocks/infocard/infocard-with-articles.md) - [Inline Alert](/blocks/inline-alert/index.md) - [Inline Code](/blocks/inline-code/index.md) - [Links](/blocks/links/index.md) diff --git a/src/pages/eds-release/index.md b/src/pages/eds-release/index.md index ab2d2db..e95ec64 100644 --- a/src/pages/eds-release/index.md +++ b/src/pages/eds-release/index.md @@ -10,7 +10,7 @@ description: Release notes and changelog for Edge Delivery Services updates on t - **Fix:** HorizontalLine rendering error [DEVSITE-2237](https://jira.corp.adobe.com/browse/DEVSITE-2237) - **Fix:** Title block center alignment on mobile [DEVSITE-2477](https://jira.corp.adobe.com/browse/DEVSITE-2477) - **Fix:** Mini Resource Card alignment with fewer than three cards [DEVSITE-2476](https://jira.corp.adobe.com/browse/DEVSITE-2476) -- **Fix:** Info Card hover underline when no link is set [DEVSITE-2479](https://jira.corp.adobe.com/browse/DEVSITE-2479) +- **Fix:** InfoCard hover underline when no link is set [DEVSITE-2479](https://jira.corp.adobe.com/browse/DEVSITE-2479) - **Fix:** DevBiz code block tab spacing, scoped away from DevDocs [DEVSITE-2474](https://jira.corp.adobe.com/browse/DEVSITE-2474) - **Fix:** Code decoration inside Accordion blocks [DEVSITE-2193](https://jira.corp.adobe.com/browse/DEVSITE-2193) - **Fix:** Unwanted side-nav animation at mobile breakpoint [DEVSITE-1747](https://jira.corp.adobe.com/browse/DEVSITE-1747) @@ -44,7 +44,7 @@ description: Release notes and changelog for Edge Delivery Services updates on t - **Fix:** Discovery Interface [devsite-2327](https://jira.corp.adobe.com/browse/DEVSITE-2327) - **Fix:** Removed `fetchMetadata` from the discovery interface - **Fix:** Added ability to dismiss the contributor block -- **Fix:** Info Card Block [devsite-2338](https://jira.corp.adobe.com/browse/DEVSITE-2338) +- **Fix:** InfoCard Block [devsite-2338](https://jira.corp.adobe.com/browse/DEVSITE-2338) - **Fix:** Added new info card variant with articles - **Fix:** Introduced `wide` variant (replaces previous `ratio` naming) - **Fix:** Addressed PR review feedback From 18c19379939447b3778ca5a5f27cffda55095a19 Mon Sep 17 00:00:00 2001 From: BaskarMitrah Date: Wed, 8 Jul 2026 11:40:30 +0530 Subject: [PATCH 3/3] added alt text for the infocard examples --- src/pages/blocks/infocard/index.md | 4 ++-- src/pages/blocks/infocard/infocard-with-wide-image.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/blocks/infocard/index.md b/src/pages/blocks/infocard/index.md index 692de36..2e5d5e5 100644 --- a/src/pages/blocks/infocard/index.md +++ b/src/pages/blocks/infocard/index.md @@ -45,13 +45,13 @@ Each info card should contain the following content in the specified order: -![](../../assets/column.jpg) +![Alt text](../../assets/column.jpg) ### Heading 1 This is the sample description for the info card content one. Add details about the card features, benefits, and use cases to help users understand what this product offers. -![](../../assets/column.jpg) +![Alt text](../../assets/column.jpg) ### [Heading 2](https://adobe.com) diff --git a/src/pages/blocks/infocard/infocard-with-wide-image.md b/src/pages/blocks/infocard/infocard-with-wide-image.md index 30ef10e..1d14c33 100644 --- a/src/pages/blocks/infocard/infocard-with-wide-image.md +++ b/src/pages/blocks/infocard/infocard-with-wide-image.md @@ -47,13 +47,13 @@ Each info card should contain the following content in the specified order: -![](../../assets/column.jpg) +![Alt text](../../assets/column.jpg) ### Heading 1 This is the sample description for the info card content one. Add details about the card features, benefits, and use cases to help users understand what this product offers. -![](../../assets/column.jpg) +![Alt text](../../assets/column.jpg) ### [Heading 2](https://adobe.com)