USWDS - Card: Fix header first media overlap

[mahoneycm]

Summary

Fixed a margin bug on header-first variants that caused exdent card media to overlap headers.

Breaking change

This is not a breaking change.

Related issue

Closes #5401

Related pull requests

Changelog →

Note*
Bug discovered while working on #5325 but has no overlap; They can be merged separately without error.

Preview link

Preview link:
Demo repo →
Card component →

Problem statement

When header first variants for card components have large borders, the media overlaps the header. This is caused due to exdent styles setting a negative top margin to counteract the border. Because header-first variants will always have the media after the header, we should remove the negative top margin for this variant.

Solution

Specify 0 top margin on exdent media within header-first variants.

Testing and review

1. View demo repo preview →
2. Confirm media does not overlap header
3. Inspect usa-card__media--exdent class
4. Remove top-margin: 0.
5. Confirm media shifts to overlap header
6. (optional) - Checkout test repo and update $theme-card-border-width in settings to various values and confirm header is always visible
   • Demo repo →

Testing checklist

• header-first card variants media never overlaps header
• Logic behind solution is valid: Media on header-first cards should never have negative margin

Screenshots

Screenshots

Before

After

[amyleadem]

This makes sense to me. Thanks for the fix!

[mejiaj]

Looks good. Tested header first with media exdent on both regular and flag variants.

[thisisdano]

Nice!