docs(card): add promo docs to style and guidelines

[adamjohnson]

trafficstars

What I did

1. Added Promo docs to Style page:
   • Variants
   • Theme
   • Responsive Design
   • Spacing
2. Added promo docs to Guidelines page:
   • Variants
   • Best Practices
3. Cleaned up the card grid on the Guidelines page

Testing Instructions

1. Obtain a card to write down feedback
2. Open the Style page
3. Make note of any differences from the Figma
4. Write any feedback on aforementioned card
5. Open the Guidelines page
6. Make note of any differences to the Figma
7. Inscribe Guidelines notes on the backside of card.
8. Summon carrier pigeon.
9. Attach and send carrier pigeon to Carrier Pigeon Center™️ in southern Appalachia. ;-)

Figma to reference.

Notes to Reviewers

• Many images did not have the same height; thus, the Do/Don't heights are different and don't quite line up.
• This PR combines Promo docs with existing docs. Make sure:
  • Heading levels are correct
  • Content is inserted where it should be
  • Content isn't duplicated (old and/or/vs new)

Closes #1818.

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 9c477faa5229fb2fe6b210df6263f7e88b181e9e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[netlify[bot]]

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

Name	Link
🔨 Latest commit	9c477faa5229fb2fe6b210df6263f7e88b181e9e
🔍 Latest deploy log	https://app.netlify.com/sites/red-hat-design-system/deploys/6711ba60cb467e0008590433
😎 Deploy Preview	https://deploy-preview-1956--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[bot]]

Size Change: 0 B

Total Size: 211 kB

ℹ️ View Unchanged

Filename	Size
./elements.js	473 B
./elements/rh-accordion/context.js	162 B
./elements/rh-accordion/rh-accordion-header.js	2.77 kB
./elements/rh-accordion/rh-accordion-panel.js	1.37 kB
./elements/rh-accordion/rh-accordion.js	3.21 kB
./elements/rh-alert/rh-alert.js	4.34 kB
./elements/rh-audio-player/rh-audio-player-about.js	1.85 kB
./elements/rh-audio-player/rh-audio-player-rate-stepper.js	1.85 kB
./elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js	1.53 kB
./elements/rh-audio-player/rh-audio-player-subscribe.js	1.43 kB
./elements/rh-audio-player/rh-audio-player.js	13.2 kB
./elements/rh-audio-player/rh-cue.js	2 kB
./elements/rh-audio-player/rh-transcript.js	2.75 kB
./elements/rh-avatar/random-pattern-controller.js	2.72 kB
./elements/rh-avatar/rh-avatar.js	2.9 kB
./elements/rh-back-to-top/rh-back-to-top.js	2.1 kB
./elements/rh-badge/rh-badge.js	1.55 kB
./elements/rh-blockquote/rh-blockquote.js	1.41 kB
./elements/rh-breadcrumb/rh-breadcrumb.js	1.5 kB
./elements/rh-button/rh-button.js	4.24 kB
./elements/rh-card/rh-card.js	3.64 kB
./elements/rh-code-block/prism.css.js	822 B
./elements/rh-code-block/prism.js	572 B
./elements/rh-code-block/rh-code-block.js	7.25 kB
./elements/rh-cta/rh-cta.js	3.96 kB
./elements/rh-dialog/rh-dialog.js	4.78 kB
./elements/rh-dialog/yt-api.js	617 B
./elements/rh-footer/rh-footer-block.js	766 B
./elements/rh-footer/rh-footer-copyright.js	362 B
./elements/rh-footer/rh-footer-links.js	1.17 kB
./elements/rh-footer/rh-footer-social-link.js	964 B
./elements/rh-footer/rh-footer-universal.js	4.05 kB
./elements/rh-footer/rh-footer.js	5.01 kB
./elements/rh-health-index/rh-health-index.js	2.35 kB
./elements/rh-icon/rh-icon.js	2.37 kB
./elements/rh-icon/ssr.js	181 B
./elements/rh-menu/rh-menu.js	1.29 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js	2.47 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js	1.35 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu.js	1.75 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js	571 B
./elements/rh-navigation-secondary/rh-navigation-secondary.js	5.27 kB
./elements/rh-navigation-secondary/test/fixtures.js	769 B
./elements/rh-pagination/rh-pagination.js	5.46 kB
./elements/rh-site-status/rh-site-status.js	2.5 kB
./elements/rh-skip-link/rh-skip-link.js	1.24 kB
./elements/rh-spinner/rh-spinner.js	1.43 kB
./elements/rh-stat/rh-stat.js	2.2 kB
./elements/rh-subnav/rh-subnav.js	2.73 kB
./elements/rh-surface/rh-surface.js	1.11 kB
./elements/rh-surface/test/elements.js	423 B
./elements/rh-switch/rh-switch.js	2.93 kB
./elements/rh-table/rh-sort-button.js	1.49 kB
./elements/rh-table/rh-table.js	3.54 kB
./elements/rh-tabs/context.js	160 B
./elements/rh-tabs/rh-tab-panel.js	1.04 kB
./elements/rh-tabs/rh-tab.js	3.02 kB
./elements/rh-tabs/rh-tabs.js	3.77 kB
./elements/rh-tag/rh-tag.js	2.84 kB
./elements/rh-tile/rh-tile-group.js	1.81 kB
./elements/rh-tile/rh-tile.js	5.15 kB
./elements/rh-timestamp/rh-timestamp.js	983 B
./elements/rh-tooltip/rh-tooltip.js	2.24 kB
./elements/rh-video-embed/rh-video-embed.js	4.6 kB
./lib/context/color/consumer.js	1.35 kB
./lib/context/color/controller.js	947 B
./lib/context/color/provider.js	2.18 kB
./lib/context/event.js	593 B
./lib/context/headings/consumer.js	722 B
./lib/context/headings/controller.js	1.12 kB
./lib/context/headings/provider.js	1.24 kB
./lib/DirController.js	565 B
./lib/elements/rh-context-demo/rh-context-demo.js	1.28 kB
./lib/elements/rh-context-picker/rh-context-picker.js	2.24 kB
./lib/environment.js	4.09 kB
./lib/functions.js	175 B
./lib/I18nController.js	1.38 kB
./lib/ScreenSizeController.js	849 B
./lib/ssr-controller.js	251 B
./react/rh-accordion/rh-accordion-header.js	199 B
./react/rh-accordion/rh-accordion-panel.js	185 B
./react/rh-accordion/rh-accordion.js	215 B
./react/rh-alert/rh-alert.js	184 B
./react/rh-audio-player/rh-audio-player-about.js	191 B
./react/rh-audio-player/rh-audio-player-rate-stepper.js	213 B
./react/rh-audio-player/rh-audio-player-scrolling-text-overflow.js	214 B
./react/rh-audio-player/rh-audio-player-subscribe.js	196 B
./react/rh-audio-player/rh-audio-player.js	183 B
./react/rh-audio-player/rh-cue.js	195 B
./react/rh-audio-player/rh-transcript.js	207 B
./react/rh-avatar/rh-avatar.js	173 B
./react/rh-back-to-top/rh-back-to-top.js	183 B
./react/rh-badge/rh-badge.js	174 B
./react/rh-blockquote/rh-blockquote.js	179 B
./react/rh-breadcrumb/rh-breadcrumb.js	179 B
./react/rh-button/rh-button.js	174 B
./react/rh-card/rh-card.js	172 B
./react/rh-code-block/rh-code-block.js	181 B
./react/rh-cta/rh-cta.js	170 B
./react/rh-dialog/rh-dialog.js	203 B
./react/rh-footer/rh-footer-block.js	184 B
./react/rh-footer/rh-footer-copyright.js	187 B
./react/rh-footer/rh-footer-links.js	185 B
./react/rh-footer/rh-footer-social-link.js	193 B
./react/rh-footer/rh-footer-universal.js	188 B
./react/rh-footer/rh-footer.js	174 B
./react/rh-health-index/rh-health-index.js	184 B
./react/rh-icon/rh-icon.js	202 B
./react/rh-menu/rh-menu.js	173 B
./react/rh-navigation-secondary/rh-navigation-secondary-dropdown.js	217 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu-section.js	205 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu.js	199 B
./react/rh-navigation-secondary/rh-navigation-secondary-overlay.js	201 B
./react/rh-navigation-secondary/rh-navigation-secondary.js	213 B
./react/rh-pagination/rh-pagination.js	178 B
./react/rh-site-status/rh-site-status.js	181 B
./react/rh-skip-link/rh-skip-link.js	181 B
./react/rh-spinner/rh-spinner.js	175 B
./react/rh-stat/rh-stat.js	171 B
./react/rh-subnav/rh-subnav.js	175 B
./react/rh-surface/rh-surface.js	175 B
./react/rh-switch/rh-switch.js	185 B
./react/rh-table/rh-sort-button.js	213 B
./react/rh-table/rh-table.js	174 B
./react/rh-tabs/rh-tab-panel.js	181 B
./react/rh-tabs/rh-tab.js	187 B
./react/rh-tabs/rh-tabs.js	174 B
./react/rh-tag/rh-tag.js	182 B
./react/rh-tile/rh-tile-group.js	183 B
./react/rh-tile/rh-tile.js	194 B
./react/rh-timestamp/rh-timestamp.js	176 B
./react/rh-tooltip/rh-tooltip.js	175 B
./react/rh-video-embed/rh-video-embed.js	227 B
./uxdot/repoStatus.js	255 B
./uxdot/uxdot-best-practice.js	737 B
./uxdot/uxdot-copy-button.js	1.07 kB
./uxdot/uxdot-copy-permalink.js	1.1 kB
./uxdot/uxdot-example.js	1.17 kB
./uxdot/uxdot-feedback.js	727 B
./uxdot/uxdot-header.js	1.07 kB
./uxdot/uxdot-hero.js	679 B
./uxdot/uxdot-installation-tabs.js	675 B
./uxdot/uxdot-masthead.js	809 B
./uxdot/uxdot-pattern-ssr-controller-client.js	536 B
./uxdot/uxdot-pattern-ssr-controller-server.js	1.66 kB
./uxdot/uxdot-pattern-ssr-controller.js	213 B
./uxdot/uxdot-pattern.js	2.07 kB
./uxdot/uxdot-repo-status-checklist.js	1.16 kB
./uxdot/uxdot-repo-status-list.js	1.07 kB
./uxdot/uxdot-repo-status-table.js	782 B
./uxdot/uxdot-repo.js	1.16 kB
./uxdot/uxdot-search.js	2.39 kB
./uxdot/uxdot-sidenav.js	2.67 kB
./uxdot/uxdot-spacer-tokens-table.js	2.45 kB
./uxdot/uxdot-toc.js	1.13 kB

_{compressed-size-action}

[marionnegp]

By this I mean that we should no longer - anywhere in our docs or examples - refer to "light theme" or "dark theme", but rather "light background" or "dark background", and we should also explicitly distinguish between light/dark backgrounds and (light|dark)(er|est)? color palettes. When we do use the word "theme", it should only be in reference to the developer process of customizing the design system's color subsystem via css props.

I like being able to distinguish between the definitions, but I think it's going to be difficult to have non-developers adjust how they use "theme" and "theming" and consider theming as only a developer process.

[bennypowers]

... non-developers ... only a developer process.

Good point. I hope this is something we can fix with more and better words. Ultimately we're producing HTML, and the closer designers and devs are regarding terminology and shared knowledge of "how the DS works", the better.

To wit: Designers also need to know about overriding theme tokens in order to create a theme, so in that regard, even though we don't yet have the facility to compute contexts from color-palettes in figma, the idea of theming as a process can also apply to designers.

[bennypowers]

Thinking it over again, the important part for me isn't that theming is for developers, it's rather that:

• Color palette is a choice, it's something you set actively
• Background (fka context, fka on) is an effect, it's a consequence of having a color palette (or having a default color palette)
• Theming is a process: it's the act of overriding theme tokens with custom values

I think both designers and developers need to know those things

[bennypowers]

demoted to draft in light of above discussion