Change usa-card-group to Make the Vertical Spacing Between Cards the same as usa-section

[andyvanavery]

Change Request Description

This change request is to adjust the vertical spacing between grouped cards (the nci-card-group element, as well as any defined classes in that partial. There is some alternate group element for the 2 Guide Card with Image & Description layout) so that when the cards stack vertically, the space between them are the same as the space used by usa-section. This change will impact 3 Feature Card Row, 2 Guide Card Row - Guide Card with Image and Description, and 3 Guide Card Row - Default Guide Card

What's the expected change?

• Vertical space between cards in the vertically stacked orientation (640px <= breakpoint < 880px) will be 32px (equal to usa-section spacing of 16px on bottom of one section + 16px on top of next section)
• Vertical space between cards in the vertically stacked orientation (breakpoint < 640px) will be 24px (equal to usa-section spacing of 12px on bottom of one section + 12px on top of next section)
• Vertical space between usa-sections does not change (remains 16px at 640px-880px and 12px below 640px)

What's the current functionality?

• Vertical space between cards in the vertically stacked orientation (640px <= breakpoint < 880px) is 24px
• Vertical space between cards in the vertically stacked orientation (breakpoint < 640px) is 12px
• Vertical space between usa-sections is 16px at 640px-880px and 12px below 640px

What's the updated acceptance criteria?

Scenario: A user views a page with three (3) Feature Cards in a Feature Card Row in the vertically stacked orientation at the Tablet breakpoint
Given a user is viewing a landing page with three (3) Feature Cards
  And the viewed breakpoint is at least 640px and is less than 880px
Then the user will be able to view the three (3) Feature Cards
  And the Feature Cards will be stacked in the vertical orientation
  And the vertical space between the Feature Cards will be 32px
  And the vertical space surrounding the usa-section holding the three (3) Feature Cards will remain the same (16px)

Scenario: A user views a page with three (3) Feature Cards in a Feature Card Row in the vertically stacked orientation at the Mobile Large or Mobile breakpoint
Given a user is viewing a landing page with three (3) Feature Cards
  And the viewed breakpoint is less than 640px
Then the user will be able to view the three (3) Feature Cards
  And the Feature Cards will be stacked in the vertical orientation
  And the vertical space between the Feature Cards will be 24px
  And the vertical space surrounding the usa-section holding the three (3) Feature Cards will remain the same (12px)

Additional details / screenshot

• 664px Breakpoint: Space between vertically stacked cards is currently 24px
  
• 664px Breakpoint: Padding added to the top and bottom of the usa-section is 16px
  
• 579px Breakpoint: Space between vertically stacked cards is currently 12px
  
• 579px Breakpoint: Padding added to the top and bottom of the usa-section is 12px
  

[bryanpizzillo]

From a technology standpoint, this should be modifying the nci-card-group element, as well as any defined classes in that partial. (There is some alternate group element for the 2 Guide Card with Image & Description layout.)