fix(card): vertical alignment of footer

[bennypowers]

What I did

1. make the card's footer area always align to the bottom of the card
2. add a demo which links to the relevant guidelines

Testing Instructions

1. check in various conditions (with proxy)

Notes to Reviewers

[changeset-bot]

🦋 Changeset detected

Latest commit: 476732c

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	476732c
🔍 Latest deploy log	https://app.netlify.com/sites/red-hat-design-system/deploys/654ba7d2c4f7a800075fa729
😎 Deploy Preview	https://deploy-preview-1315--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: +13 B (0%)

Total Size: 209 kB

Filename	Size	Change
./elements/rh-card/rh-card.js	1.89 kB	+7 B (0%)
./rhds.min.js	81.9 kB	+6 B (0%)

ℹ️ View Unchanged

Filename	Size
./elements/rh-accordion/rh-accordion-header.js	1.98 kB
./elements/rh-accordion/rh-accordion-panel.js	1.24 kB
./elements/rh-accordion/rh-accordion.js	1.17 kB
./elements/rh-alert/rh-alert.js	4.27 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.9 kB
./elements/rh-badge/rh-badge.js	1.01 kB
./elements/rh-blockquote/rh-blockquote.js	1.96 kB
./elements/rh-button/rh-button.js	4.39 kB
./elements/rh-code-block/rh-code-block.js	1.19 kB
./elements/rh-context-provider/rh-context-provider.js	189 B
./elements/rh-cta/rh-cta.js	4.58 kB
./elements/rh-dialog/rh-dialog.js	1.64 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.07 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.55 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	571 B
./elements/rh-navigation-secondary/rh-navigation-secondary.js	5.46 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.84 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	789 B
./elements/rh-tabs/rh-tab.js	1.81 kB
./elements/rh-tabs/rh-tabs.js	1.86 kB
./elements/rh-tag/rh-tag.js	1.96 kB
./elements/rh-tile/rh-tile-group.js	1.76 kB
./elements/rh-tile/rh-tile.js	4.2 kB
./elements/rh-timestamp/rh-timestamp.js	974 B
./elements/rh-tooltip/rh-tooltip.js	2.15 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.05 kB
./lib/elements/rh-context-picker/rh-context-picker.js	2.29 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}

[marionnegp]

The footer does look like it's anchoring to the bottom. This might be a dumb question, but how would I test it in different contexts "with proxy"?

The spacing between each section is off. The header's padding is correct, but the body and footer's padding-block should be changed based on the image below.

[bennypowers]

you can see the cta is 32px from the bottom of the footer (33 in the screenie because there's 1px between the edge of the cta and the a, and visbug had trouble picking up on the cta)

@marionnegp do you mean that the footer content should appear further up the card? if so then let's close this PR, which is about aligning the footer content to the bottom of the card in a grid, regardless of the specific content height of each card

[marionnegp]

I'll open a new issue to fix spacing. The footer did stick to the bottom, even when I added more content to the body of one card. I only checked this in card's grid demo. Should I check anywhere else to make sure it works?

[marionnegp]

Added a new issue to fix rh-card padding: #1324

[bennypowers]

that one demo file (grid.html) is the only one you need to check here, i think

So if this is good, let's approve-and-merge