feat(InfoCard): new "narrow" variant

[petheanraj-mitrah]

Description

The Info Card needs to be narrower and more compact. In EDS, it currently takes up too much space on the page, so we need to reduce its width.
I've added a new variant narrow to the Info Card in DevBiz to achieve the required width.

Jira

https://jira.corp.adobe.com/browse/DEVSITE-2517

Test URL

Before : https://main--adp-devsite-stage--adobedocs.aem.page/test/petheanraj/infocard-reduce-width

After : https://devsite-2517--adp-devsite-stage--adobedocs.aem.page/test/petheanraj/infocard-reduce-width

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run all PSI checks
• Re-run failed PSI checks
• Re-sync branch

Commits

• a3eff7b ✅ (latest)

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/test/petheanraj/infocard-reduce-width		Lighthouse returned error: Something went wrong.
🖥️	/test/petheanraj/infocard-reduce-width		Lighthouse returned error: Something went wrong.

[github-actions]

❌ Test Results

Status: Some tests failed!

🔍 Click to view failed tests

📁 test/blocks/code/code.test.js:

❌ Code block > code > data-playground attributes from class
      AssertionError: expected null to equal 'code-session'
        at n.<anonymous> (test/blocks/code/code.test.js:29:63)


📁 test/blocks/columns/columns.test.js:

❌ Columns block > Columns > columns-container
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at n.<anonymous> (test/blocks/columns/columns.test.js:29:117)

❌ Columns block > Columns > buttons
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at test/blocks/columns/columns.test.js:100:86
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/columns/columns.test.js:95:50)


📁 test/blocks/embed/embed.test.js:

❌ Could not import your test module. Check the browser logs or open the browser in debug mode for more information.


📁 test/blocks/contributors/contributors.test.js:

❌ Contributors block > contributors > firstDiv
      AssertionError: expected null to exist
        at n.<anonymous> (test/blocks/contributors/contributors.test.js:32:28)

❌ Contributors block > contributors > remove divs without children
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at test/blocks/contributors/contributors.test.js:42:44
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/contributors/contributors.test.js:41:51)

❌ Contributors block > contributors > last update div
      AssertionError: expected '' to equal 'https://github.com/AdobeDocs/express-add-ons-docs/commits/main/src/pages/references/index.md'
      + expected - actual
      
      +https://github.com/AdobeDocs/express-add-ons-docs/commits/main/src/pages/references/index.md
      
      at n.<anonymous> (test/blocks/contributors/contributors.test.js:53:40)

❌ Contributors block > contributors > image list div
      AssertionError: expected null to exist
        at test/blocks/contributors/contributors.test.js:71:27
        at Array.forEach (<anonymous>)
        at n.<anonymous> (test/blocks/contributors/contributors.test.js:69:33)


📁 test/blocks/tab/tab-playground.test.js:

❌ Tab block playground metadata > extracts data-playground attributes via decoratePreformattedCode
      AssertionError: expected null to equal 'tab-session'
        at n.<anonymous> (test/blocks/tab/tab-playground.test.js:17:63)


📁 test/blocks/tab/tab.test.js:

❌ Tab block > Tab Button Structure > tab > button load structure
      AssertionError: expected 'tab-button active' to equal 'tab-button'
      + expected - actual
      
      -tab-button active
      +tab-button
      
      at n.<anonymous> (test/blocks/tab/tab.test.js:60:38)

❌ Tab block > Sub-tabs > sub-tab > attributes
      AssertionError: expected 'subTab1' to equal 'subTab3'
      + expected - actual
      
      -subTab1
      +subTab3
      
      at test/blocks/tab/tab.test.js:135:58
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/tab/tab.test.js:133:23)

Test Coverage Report

Overall Coverage Summary

Metric	Percentage	Coverage
Statements	56.96%	3900/6846
Branches	85.08%	559/657
Functions	52%	130/250
Lines	56.96%	3900/6846

Coverage by File/Directory

File	Statements	Branches	Functions	Lines
blocks/accordion	96.73%	100%	100%	96.73%
blocks/announcement	76.69%	60%	100%	76.69%
blocks/banner	94.28%	62.5%	100%	94.28%
blocks/cards	92.04%	90%	100%	92.04%
blocks/carousel	77.8%	82.35%	71.42%	77.8%
blocks/code	81.81%	60%	100%	81.81%
blocks/columns	62.59%	74.35%	100%	62.59%
blocks/contributors	84.23%	56%	100%	84.23%
blocks/edition	91.37%	57.14%	100%	91.37%
blocks/fragment	17.03%	100%	0%	17.03%
blocks/image-text	57.5%	55.55%	100%	57.5%
blocks/info	96.87%	100%	100%	96.87%
blocks/info-card	100%	100%	100%	100%
blocks/info-columns	75%	100%	100%	75%
blocks/list	59.09%	85.71%	100%	59.09%
blocks/mini-resource-card	98%	87.5%	100%	98%
blocks/product-card	78.57%	94.11%	100%	78.57%
blocks/profile-card	96.29%	100%	100%	96.29%
blocks/site-hero	93.93%	80%	100%	93.93%
blocks/summary	98.36%	88.88%	100%	98.36%
blocks/tab	93.25%	96.87%	100%	93.25%
blocks/table	100%	84.61%	100%	100%
blocks/text	50%	83.33%	50%	50%
blocks/title	84%	66.66%	100%	84%
components	43.52%	66.66%	53.84%	43.52%
scripts	48.61%	95.22%	42.55%	48.61%

---

Coverage report generated at 2026-08-12T07:00:35.191Z

[davids-ensemble]

While this is not a problem for screen readers since the content of the description is fully available in the DOM, it is a problem for sighted user as they have no way to see the entire description for a card.

Was this something that was accepted as a compromise when the requirement came in or is it something that we didn't think of?

[petheanraj-mitrah]

While this is not a problem for screen readers since the content of the description is fully available in the DOM, it is a problem for sighted user as they have no way to see the entire description for a card.

Was this something that was accepted as a compromise when the requirement came in or is it something that we didn't think of?

@davids-ensemble We've restricted this option so that if the product team provides it, it won't be displayed in the Mini Resource Card, Info Card, Summary Block, etc. We had already mentioned this restriction across all the blocks so I think we will leave