From 883808457399e2760a96a37f039ebd480ff6145c Mon Sep 17 00:00:00 2001 From: BaskarMitrah Date: Thu, 25 Jun 2026 12:13:18 +0530 Subject: [PATCH 1/3] added example for cards with wide attribute --- src/pages/blocks/cards/index.md | 36 ++++++++++++++++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/src/pages/blocks/cards/index.md b/src/pages/blocks/cards/index.md index 4b3898b..c416783 100644 --- a/src/pages/blocks/cards/index.md +++ b/src/pages/blocks/cards/index.md @@ -10,7 +10,7 @@ Display content in a grid of cards with images and links. ## Syntax ```markdown - + ![Card Image](path/to/image.png) @@ -34,6 +34,8 @@ Card description text goes here. - `"50%"` - Two cards per row (2-column grid) - `"25%"` - Four cards per row (4-column grid) +- **wide**: Displays the card with a wide image. + - **Image size**: 80 x 80 px recommended ## Examples @@ -66,4 +68,36 @@ This is a sample description for the second card in the grid. This is a sample description for the third card in the grid. +[Learn more](https://developer.adobe.com/) + +## Example of a Card with a Wide Image + + + +![Card Image](../../assets/column.jpg) + +## First Card + +This is a sample description for the first card in the grid. + +[Learn more](https://developer.adobe.com/) + + + +![Card Image](../../assets/column.jpg) + +### Second Card + +This is a sample description for the second card in the grid. + +[Learn more](https://developer.adobe.com/) + + + +![Card Image](../../assets/column.jpg) + +### Third Card + +This is a sample description for the third card in the grid. + [Learn more](https://developer.adobe.com/) \ No newline at end of file From 77b45a1c3542bba0c5d09c75f9f1b265f5e23caf Mon Sep 17 00:00:00 2001 From: BaskarMitrah Date: Thu, 25 Jun 2026 20:44:13 +0530 Subject: [PATCH 2/3] Update : cards component --- src/pages/blocks/cards/cards-wide.md | 59 ++++++++++++++++++++++++++++ src/pages/blocks/cards/index.md | 36 +---------------- src/pages/blocks/index.md | 2 + src/pages/config.md | 1 + 4 files changed, 64 insertions(+), 34 deletions(-) create mode 100644 src/pages/blocks/cards/cards-wide.md diff --git a/src/pages/blocks/cards/cards-wide.md b/src/pages/blocks/cards/cards-wide.md new file mode 100644 index 0000000..090615d --- /dev/null +++ b/src/pages/blocks/cards/cards-wide.md @@ -0,0 +1,59 @@ +--- +title: Cards - Wide Variant +description: Display cards with a wide image using the Cards block wide variant. +--- + +# Cards - Wide Variant + +Cards with a wide image layout. See [Cards parameters](index.md) for `slots`, `width`, and other options. + +## Syntax + +```markdown + + +![Card Image](path/to/image.png) + +## Card Heading + +Card description text goes here. + +[Learn more](link-url.md) + +``` + +## Parameters + +- **variant**: `"wide"` — Displays the card with a wide image. + +## Example + + + +![Card Image](../../assets/column.jpg) + +### First Card + +This is a sample description for the first card in the grid. + +[Learn more](https://developer.adobe.com/) + + + +![Card Image](../../assets/column.jpg) + +### Second Card + +This is a sample description for the second card in the grid. + +[Learn more](https://developer.adobe.com/) + + + +![Card Image](../../assets/column.jpg) + +### Third Card + +This is a sample description for the third card in the grid. + +[Learn more](https://developer.adobe.com/) diff --git a/src/pages/blocks/cards/index.md b/src/pages/blocks/cards/index.md index c416783..862523f 100644 --- a/src/pages/blocks/cards/index.md +++ b/src/pages/blocks/cards/index.md @@ -34,8 +34,6 @@ Card description text goes here. - `"50%"` - Two cards per row (2-column grid) - `"25%"` - Four cards per row (4-column grid) -- **wide**: Displays the card with a wide image. - - **Image size**: 80 x 80 px recommended ## Examples @@ -44,7 +42,7 @@ Card description text goes here. ![Card Image](../../assets/column.jpg) -## First Card +### First Card This is a sample description for the first card in the grid. @@ -70,34 +68,4 @@ This is a sample description for the third card in the grid. [Learn more](https://developer.adobe.com/) -## Example of a Card with a Wide Image - - - -![Card Image](../../assets/column.jpg) - -## First Card - -This is a sample description for the first card in the grid. - -[Learn more](https://developer.adobe.com/) - - - -![Card Image](../../assets/column.jpg) - -### Second Card - -This is a sample description for the second card in the grid. - -[Learn more](https://developer.adobe.com/) - - - -![Card Image](../../assets/column.jpg) - -### Third Card - -This is a sample description for the third card in the grid. - -[Learn more](https://developer.adobe.com/) \ No newline at end of file +For cards with a wide image, see [Cards - Wide Variant](cards-wide.md). diff --git a/src/pages/blocks/index.md b/src/pages/blocks/index.md index 13fdad7..1daf257 100644 --- a/src/pages/blocks/index.md +++ b/src/pages/blocks/index.md @@ -68,6 +68,8 @@ Important notices and announcements. Content cards in grid layouts. +### [Wide Variant](cards/cards-wide.md) - Cards with a wide image + ### [Code](code/index.md) Markdown code snippet with syntax. diff --git a/src/pages/config.md b/src/pages/config.md index 5781203..49430a1 100644 --- a/src/pages/config.md +++ b/src/pages/config.md @@ -43,6 +43,7 @@ - [Accordion](/blocks/accordion/index.md) - [Announcement](/blocks/announcement/index.md) - [Cards](/blocks/cards/index.md) + - [Cards Wide](/blocks/cards/cards-wide.md) - [Code](/blocks/code/index.md) - [Code Basic](/blocks/code/code-basic.md) - [Code Highlighted Line](/blocks/code/code-highlighted-line.md) From 3bf05fecd42d5ed8d3296aa7e60178ac552b415e Mon Sep 17 00:00:00 2001 From: BaskarMitrah Date: Thu, 25 Jun 2026 20:57:36 +0530 Subject: [PATCH 3/3] update default example --- src/pages/blocks/cards/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/blocks/cards/index.md b/src/pages/blocks/cards/index.md index 862523f..6ab0729 100644 --- a/src/pages/blocks/cards/index.md +++ b/src/pages/blocks/cards/index.md @@ -10,7 +10,7 @@ Display content in a grid of cards with images and links. ## Syntax ```markdown - + ![Card Image](path/to/image.png)