diff --git a/src/pages/blocks/infocard/index.md b/src/pages/blocks/infocard/index.md new file mode 100644 index 0000000..2e5d5e5 --- /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 + + +![Alt text](path/to/image.png) + +### Heading 1 + +Content 1 + +![Alt text](path/to/image.png) + +### [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 + + + +![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. + +![Alt text](../../assets/column.jpg) + +### [Heading 2](https://adobe.com) + +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-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..1d14c33 --- /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 + + +![Alt text](path/to/image.png) + +### Heading 1 + +Content 1 + +![Alt text](path/to/image.png) + +### [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 + + + +![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. + +![Alt text](../../assets/column.jpg) + +### [Heading 2](https://adobe.com) + +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 49430a1..bbf35a0 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) + - [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