Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions src/pages/blocks/infocard/index.md
Original file line number Diff line number Diff line change
@@ -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
<InfoCard slots="image, heading, text" repeat="2" />

![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

<InfoCard slots="image, heading , text " repeat="2" />

![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.
35 changes: 35 additions & 0 deletions src/pages/blocks/infocard/infocard-with-articles.md
Original file line number Diff line number Diff line change
@@ -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
<InfoCard slots="articles" wide />

- [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

<InfoCard slots="articles" wide />

- [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)
60 changes: 60 additions & 0 deletions src/pages/blocks/infocard/infocard-with-wide-image.md
Original file line number Diff line number Diff line change
@@ -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
<InfoCard slots="image, heading, text" repeat="2" wide />

![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

<InfoCard slots="image, heading , text " repeat="2" wide/>

![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.
3 changes: 3 additions & 0 deletions src/pages/config.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
4 changes: 2 additions & 2 deletions src/pages/eds-release/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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
Expand Down
Loading