[Feature card – large]: Updates to @lg and @md

[RichKummer]

The problem

As part of the v2 updates, we are shifting feature card – large to a 2:1 aspect ratio for @lg and @md breakpoint

The solution

v2 specs using v11 tokens
Updated design spec using v10 tokens

Update highlights

1. @lg and @md will use a 2:1 aspect ratio for the entire feature card
2. See [feature card]: Add border to the card #10072 and [feature card]: Add regular color scheme #10073 for v11 tile updates using a solid border and net new default color scheme
3. Updated alignment for copy and padding
4. Truncation rule for body copy that is >32px from the icon at the bottom right. The heading does not truncate.
5. When @lg and @md, the heading type token is changed to $heading-03
6. When @md, the body copy type token is changed to $body-01
7. Global – padding below eyebrow is adjusted from 16px to 8px

Application/website

C4IBM.com

Business priority

Medium Priority = upcoming release but is not pressing

What time frame would this ideally be needed by (if applicable)

No response

Examples

No response

Code of Conduct

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

[RichKummer]

10/24/23

Decided to separate out the design updates going into v2 launch.

v2 launch

• Feature card sizing and layout stays the same as v1. Once content is too large for the card height, the aspect ratio will break and the card's container will expand to fit the content.
• Added border style similar to card components #10072
• Added color-scheme options #10073

post-v2 launch (feature enhancement)

• We will add a prop to handle overflow situations (naming tbd):

1. When prop is set to aspect-ratio, feature card will be locked to the 2:1 aspect ratio until @sm. Content will overflow past the bottom of the feature card container.
2. When prop is set to flex, feature card will behave similar to v1 – card container will try adn maintain 2:1 aspect ratio and if the content would expand past that, the container would expand vertically to accommodate.