[CTA Section]: Horizontal line is shown as visible when there are 3 cards in a row

[proeung]

Engineering info:

• Innovation Team engineer:
• Innovation Team JIRA Ticket: https://jsw.ibm.com/browse/ADCMS-2431
• DPO consulting engineer: N/A

---

Description

• The CTA Section row shows a horizontal rule between rows even with only 3 content items before the row break.
• The border issue looks to be happening on AEM because of additional padding top and bottom properties that were added, however, I think there's some improvement on the C4IBM side that we can do to eliminate this issue so that the addition and removal of the horizontal line depending on the number of items per row is managed better.
• See - https://prod-author.roks.cms.cis.ibm.net/content/adobe-cms/language-masters/en/products/watson-orchestrate.html?wcmmode=disabled

Component(s) impacted

CTA Section

Browser

Chrome, Safari, Firefox, Microsoft Edge

Carbon for IBM.com version

v.1.35

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Application/website

AEM

Package

@carbon/ibmdotcom-web-components, @carbon/ibmdotcom-styles

CodeSandbox example

https://prod-author.roks.cms.cis.ibm.net/content/adobe-cms/language-masters/en/products/watson-orchestrate.html?wcmmode=disabled

Steps to reproduce the issue (if applicable)

• Scroll to the bottom of this page (https://prod-author.roks.cms.cis.ibm.net/content/adobe-cms/language-masters/en/products/watson-orchestrate.html?wcmmode=disabled)

Release date (if applicable)

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate issues

[proeung]

@oliviaflory Can you help take a look at this issue and let me know what you think? Thanks!

cc: @jwitkowski79

[oliviaflory]

• The CTA Section row shows a horizontal rule between rows even with only 3 content items before the row break.
• The border issue looks to be happening on AEM because of additional padding top and bottom properties that were added, however, I think there's some improvement on the C4IBM side that we can do to eliminate this issue so that the addition and removal of the horizontal line depending on the number of items per row is managed better.

@proeung

1. Yes, there should not be a horizontal rule below the 3 content items before a row break
2. CTA section is performing correctly in our C4IBM storybook
3. Can you clarify what improvements could be made? I would need to understand the changes and have our dev team weight in.
4. The current CTA section has 160px of padding on the bottom. Does the problem go away with the added padding removed? From a first look the additional top and bottom padding seem like they're throwing the content off from the rest of the page spacing.

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for 60 days. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.