fix(card): layout for first slotted p

[bennypowers]

What I did

1. fix various issues with rh-card (see changeset)
2. cherry-picked those fixes from the docs: samples #1350 for ease of review

[changeset-bot]

🦋 Changeset detected

Latest commit: 84ba3d6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@rhds/elements	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for red-hat-design-system ready!

Name	Link
🔨 Latest commit	84ba3d6
🔍 Latest deploy log	https://app.netlify.com/sites/red-hat-design-system/deploys/657a2a18fc9821000865875c
😎 Deploy Preview	https://deploy-preview-1380--red-hat-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

Size Change: -4 B (0%)

Total Size: 210 kB

Filename	Size	Change
./rhds.min.js	82.1 kB	-4 B (0%)

ℹ️ View Unchanged

Filename	Size
./elements/rh-accordion/rh-accordion-header.js	1.97 kB
./elements/rh-accordion/rh-accordion-panel.js	1.23 kB
./elements/rh-accordion/rh-accordion.js	1.17 kB
./elements/rh-alert/rh-alert.js	4.4 kB
./elements/rh-audio-player/rh-audio-player-about.js	1.85 kB
./elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js	1.51 kB
./elements/rh-audio-player/rh-audio-player-subscribe.js	1.43 kB
./elements/rh-audio-player/rh-audio-player.js	14.2 kB
./elements/rh-audio-player/rh-cue.js	2 kB
./elements/rh-audio-player/rh-transcript.js	2.94 kB
./elements/rh-avatar/random-pattern-controller.js	2.72 kB
./elements/rh-avatar/rh-avatar.js	2.91 kB
./elements/rh-badge/rh-badge.js	1 kB
./elements/rh-blockquote/rh-blockquote.js	1.94 kB
./elements/rh-button/rh-button.js	4.38 kB
./elements/rh-card/rh-card.js	1.94 kB
./elements/rh-code-block/rh-code-block.js	1.25 kB
./elements/rh-context-provider/rh-context-provider.js	189 B
./elements/rh-cta/rh-cta.js	4.57 kB
./elements/rh-dialog/rh-dialog.js	1.66 kB
./elements/rh-dialog/yt-api.js	614 B
./elements/rh-footer/rh-footer-block.js	765 B
./elements/rh-footer/rh-footer-copyright.js	362 B
./elements/rh-footer/rh-footer-links.js	1.18 kB
./elements/rh-footer/rh-footer-social-link.js	960 B
./elements/rh-footer/rh-footer-universal.js	4.07 kB
./elements/rh-footer/rh-footer.js	5.08 kB
./elements/rh-footer/rh-global-footer.js	250 B
./elements/rh-menu/rh-menu.js	1.25 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js	2.57 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js	1.46 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu.js	1.9 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js	572 B
./elements/rh-navigation-secondary/rh-navigation-secondary.js	5.4 kB
./elements/rh-navigation-secondary/test/fixtures.js	851 B
./elements/rh-pagination/rh-pagination.js	4.45 kB
./elements/rh-spinner/rh-spinner.js	1.61 kB
./elements/rh-stat/rh-stat.js	2.24 kB
./elements/rh-subnav/rh-subnav.js	2.83 kB
./elements/rh-table/rh-sort-button.js	1.31 kB
./elements/rh-table/rh-table.js	2.29 kB
./elements/rh-tabs/rh-tab-panel.js	725 B
./elements/rh-tabs/rh-tab.js	1.83 kB
./elements/rh-tabs/rh-tabs.js	1.98 kB
./elements/rh-tag/rh-tag.js	1.96 kB
./elements/rh-tile/rh-tile-group.js	1.74 kB
./elements/rh-tile/rh-tile.js	4.23 kB
./elements/rh-timestamp/rh-timestamp.js	976 B
./elements/rh-tooltip/rh-tooltip.js	2.24 kB
./lib/context/color/consumer.js	1.15 kB
./lib/context/color/controller.js	1.11 kB
./lib/context/color/provider.js	1.99 kB
./lib/context/event.js	598 B
./lib/context/headings/consumer.js	711 B
./lib/context/headings/controller.js	1.14 kB
./lib/context/headings/provider.js	1.23 kB
./lib/DirController.js	569 B
./lib/elements/rh-context-demo/rh-context-demo.js	1.14 kB
./lib/elements/rh-context-picker/rh-context-picker.js	2.41 kB
./lib/elements/rh-context-provider/rh-context-provider.js	746 B
./lib/functions.js	175 B
./lib/I18nController.js	1.38 kB
./lib/ScreenSizeController.js	856 B

_{compressed-size-action}

[zeroedin]

There are 2 issues I noticed while reviewing this PR and confirmed in a discussion with @marionnegp.

This change works when the body (anonymous slot) is the :first-child. However when [slot="header] is present you get a 48px gap between the header and the first <p>. Per the design spec we should only have 32px here. However we have 32px margin on #body + 16px margin on the <p>.

For the sake of getting this PR out the door, we are going to move that to a new issue as it is additional scope to what this is trying to fix which is the version where header slot is empty.

The second issue that is also going to be spun off to its own issue, is that when a header slot is .empty the class is overwritten by #header { display: flex } and display:none from the class does not get applied, needs an !important added.